Instagram iconLinkedIn logoDribbble logoEmail icon
Decent screenDecent screenDecent screenDecent screenDecentDecent

Project

As a personal project, I wanted to redesign the interface of the tablet used on the Decent espresso machine.
Challenges
Make the interface much more cleaner and modern.
Fix accessibility issues.
Make the buttons and the font large enough to accommodate anybody.
Results
Since it was a personal project, I did A/B testing with friends and family members. I presented them with the client's screens and give them specific missions. I did the same with my screens.

There was no appeal. The reaction time, ease of navigation and the enjoyment of using the application were a thousand times better than the client's design.
Functional prototype
View the video below.
Problems with client's interface
Decent screen
Decent screen
Decent screen
Decent screen
New design system
Decent wireframe
Decent wireframe
Design system
Comparisons
Client's design
Decent wireframe
My design
My design
Improvements
The main navigation bar is much cleaner and the active tab is in bright yellow.
The icons are more streamlined and clear.
The settings button has been moved to the main nav and the power button made smaller to prevent hitting it by mistake.
Client's design
Decent wireframe
My design
My design
Improvements
Colors are now much brighter and vibrant.
I moved the thermometer at the bottom so to have all parameters in the bottom half of the screen and only the graph in the top half of the screen.
I removed the sliders since they don't allow for very precise adjustment. Alternatively, the user can drag black points on the graph directly.
Client's design
Decent wireframe
My design
My design
Improvements
Whenever there is a slider, the value is always above it so to not hide it when you move the slider.
Client design
Decent wireframe
My design
My design
Improvements
The main navigation always has to be accessible.
Layout is much cleaner and less confusing.
Switches, buttons and sliders are more prominent and easy to use.
Accessibility tests (Colorblindness)
Normal vision
Normal vision
Tritanomaly vision
Tritanomaly vision
Protanomaly vision
Protanomaly vision
Deuteranomaly vision
Deuteranomaly vision
Other projects
KLM logoLogo Nuvoola AILogo AimiaLogo PlanetRateKLM logo
Top of page