Back
Lavazza Flavia
Machine Interface
Lavazza Flavia
Uplevelling the coffee break experience
ABOUT
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.
MY ROLE
Flowcharting , UX & UI, User testing, 3D video animation
TEAMMATES
Nikola Mitrovic, Alessandro Sala, Fabrizio Gagliardi
DURATION
December 2018 - May 2020
RESEARCH
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
INSIGHT
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.
INSIGHT
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.
DEVELOPMENT
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
OUTCOME
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
"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
250+
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
2
Awards
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