Lavazza Flavia
Machine Interface
Lavazza Flavia
Uplevelling the coffee break experience
Lavazza asked Studio Volpi to develop the UX/UI of their brand new office coffee machine. The product, designed by Thrive Design, used a unique and patented type of pods which could be recognised and adjust the machine settings based on the selected beverage.
Flowcharting , UX & UI, User testing, 3D video animation
Nikola Mitrovic, Alessandro Sala, Fabrizio Gagliardi
December 2018 - May 2020
Testing the early designs
Upon joining the team, I found the project already in progress and my colleagues testing three interface concepts with a rudimentary physical prototype. The tests, divided into three usability sessions, aimed to validate design improvements for different user types and task clarity. Over four weeks, around forty diverse users engaged in independent tasks across interfaces, recorded by eye tracking. We tracked metrics like success, errors, time, and satisfaction, assessing the effectiveness of each concept. After a thorough review, we integrated the top features into the final flow and reworked the overall UX.
Research insights
Expand and compress paragraph
Reduce dead times
We noticed that the time spent on the home screen was much longer for those concepts that presented a beverage selection upfront. Users were spending more time looking through the options without making a choice than the other concepts.
Reduce the time-on-task
To reduce the overall time-on-task to make a drink, we decided to limit all those elements that could slow the user down such as complex illustrations in the 'pack instructions' screen and elaborated selectors in the 'drink modifier' screen.
Streamlining the UX
Post-testing, we overhauled the initial navigation, incorporating feedback. Navigation was meticulously crafted, ensuring users move seamlessly through functions, preventing omissions or erroneous paths. This phase focused on validating user-machine interactions across choice points and actions in various scenarios. Early attention was given to full screen production, determining required assets and animated elements. These encompass beverage selection, brewing, alerts, setup, preferences, and statistics.
Hand annotations over a set of interface screens
Set of low-fidelity designs
Image of a UX flowchart
Set of high-fidelity icons representing coffee-based and other hot beverages
A better break experience
During its launch in North America and the United Kingdom, the machine was widely acclaimed as a smart, tech-savvy machine. Also, while working on this project, Mars Drinks was acquired by Lavazza. As a result, we had to align the UI with the Lavazza's brand guidelines and I was also in charge of creating animations for the machine maintenance tutorials and the different machine statuses.
Front picture of the Flavia coffee machine and its interfaceFlip card back
"Game-changer is an accurate description of this machine" - Ralph Francis, Indirect Channel Director, Lavazza Pro UK.
Flip card
Additional four sample screens of the Flavia interface
3D render of a water pipe connecting to the back of the Flavia's coffee machine Flip card back
cups a day
By reducing the overall time-on-task, we were able to increase the number of cups per day that the machine could handle.
Flip card
Four sample screens of the Flavia interface
High-fidelity render of an iced coffeeFlip card back
The C 300 model won an IF Design Award in 2024, while the C600 model was a finalist of the 2020 IDEA Design Award.
Flip card
Next project
Scroll back to top
Back to top
Scroll back to top