Gaggiuino is an open source project where users upgrade their Gaggia Classic espresso machines with a digital controller. It lets them adjust pressure, temperature, and flow rate, competing with pricier models. The software is then projected on a 3.5" Nextion LCD screen (480x320).
Why this project?
As a home barista and design enthusiast, I was excited to discover Gaggiuino's plan for a new feature enabling flow profile sharing, which allows users to customize pressure, temperature, and flow settings. Eager to blend my interests in user interface design and coffee, I couldn't wait to get started.
Market Research
The claim
Since the pandemic, consumers are increasingly recreating café experiences at home. The global espresso machine market is expected to hit US$16 billion by 2031, with a growth rate of 5.4%.
The problem
In 2023, sales increaseddespite fewer units sold, indicating rising demand for upscale machines. The popular Gaggia Classic, touted as a beginner's favorite, is frequently customized by users, offering budget-friendly options.
Competitive Analysis
I analyzed 2 popular machines with similar software in the space and looked for feedback on social media (YouTube and Reddit) from users to see pain points.
Decent Espresso
Sanremo You
The good
The coffee it produces is great and better than on traditional machines
The bad
The software is complicated to navigate.
User Reviews
I like the coffee it produces but why is the software so hard to use? I can never find how to make changes to a profile.
Giulia
I had high hopes but the overly complicated software interface ruined the experience for me.
Paul
This is a coffee lover's dream, offering control over temperature, pressure, and flow rate.
Ricardo
Preparation before designing
Prior to starting the design, I wanted to set up this design with a non complicated path in mind. I referred to the original design to look at the current UX and what needs to be shown on the dashboard.
Before redesign
The new feature for this software is profile sharing, which will be implemented through file transfer to a USB. My challenge lies in finding a way to seamlessly save and load files from the USB to the software, ensuring an easy and smooth user experience.
Flow diagram
To outline essential features, I created a straightforward flowchart illustrating the primary actions for the user.
Low-fidelity wireframes
Once the flow was completed, I started creating low-fidelity wireframes for the main flows.
13 high-fidelity designs were created
Once the low-fidelity wireframes were complete, I started by creating a couple of the main screens for the display. Including A/B testing with different profile wireframes.
Minimalist approach
This concept introduced a dosage screen for minimalist recipe adjustments, with users cycling through tabs for other modifications.
Less toggle
This approach allows users to adjust dosage and other recipe details like temperature on one screen.
Extended Wireframe
Usability test
After producing high-fidelity wireframes, they underwent testing with users to gauge their responses to the interface.
Preparation
The project aimed to ensure the share feature's functionality and provide a seamless user experience. Usability tests with five participants, each given wireframes for the dashboard and Save tab, evaluated the profile sharing feature. Testing was conducted in person, introducing users to the product and asking questions to assess functionality and user experience.
Sharing is caring
At first, on the dashboard, I used a tab labeled 'save' to indicate that it would lead users to the save screen for profile sharing. However, testing showed that 80% of users found the 'save' label confusing. As as result, it was changed to 'Share' to improve clarity and user experience.
Old Display
In the Share tab, users swipe to switch between profiles. Initially, an overflow icon and blurred profile image prompted swiping. However, 40% of users found it confusing. To address this, I replaced the icon with one showing a swipe action for clarity.
Updated Concept
I took these difficulties into consideration when creating a new concept for this design. After presenting the updated version to the users, 50% expressed satisfaction with the changes, indicating a significant improvement in user experience.
Project summary
During the project, I managed to evaluate the market, create a set of low fidelity wireframes, and build them out to a high-fidelity beautiful UI designs. In the last checkup round I also did a usability test to gauge which areas needed improvement.
What would I do differently?
Though the outcome was positive, if I encountered the same problem today, I would have prioritized designing the UX flow. I appreciate car dashboards that consolidate all necessary changes onto one page. Implementing this approach for the profile modification page could streamline the process, removing the need for toggling between sections.
.png)
.png)
