Simply Espresso App
An app to help home baristas with an espresso machine perfect espresso shots satisfying their own tastes, log coffee details, and make the best of coffee beans.
Scope
Concept Research
Problem framing
Design development
Wireframe & prototype
User testing
Target Users
Home baristas using espresso machine
Role
UX/ UI Design
User research
Design strategy
Branding
Year
2022
Background
As a latte lover, unable to visit the coffee shops I like to get my daily dose of happiness during the pandemic prompted me to purchase an espresso machine with grinder and milk steamer, and embark on the journey of learning coffee knowledge, and dialing techniques, hoping to make a cup of coffee to my liking.
After experiencing some frustration during this learning process of coffee making, I wanted to design an app to help me be more precise and organized when dialing in coffee.
Concept Research, Testing & Define Pain Points
With a basic idea of designing an espresso app with timer and coffee journal functions that I need in mind, I performed a competitive research to see how other coffee apps are addressing similar issues, and what can be improved to better suit my design purpose.
Curious as to whether other home baristas suffer from similar frustration, and are willing to use an app to help the dialing process, I then conducted user interview and surveys to uncover users’ journeys in using espresso machine to pull espresso shots at home, as well as their interest in using an espresso app to help them make better espresso and record shot details.
Coffee dose and grind size are two most important factors home baristas care about when dialing in espresso.
Problems
-
Coffee dose and grind size are the most frustrating parameters for newbie home baristas to figure out when making espresso. Often, they feel lost and dejected when not getting good espresso after many trials. Some don’t even know how much beans to start dialing in with.
-
People often get flustered during coffee making process that they forget to start/ stop the timer.
-
Easily losing track of coffee shot details if not writing it down right away. With many things go on in kitchen, and people want to enjoy coffee while it’s hot. It can be hard for them to keep neat coffee notes during the process.
-
The hand-written coffee notes may be unorganized and messy overtime and hard to reference back. People usually just jot down numbers on a piece of paper, which is easily lost the next day. And the coffee information of different shots is not always organized in the same order.
-
It can be annoying to write down same parameters repeatedly for each shot during the dialing process.
-
Having multiple beans and unable to track their freshness / roasting dates.
User Storyboard
The Goal
To develop an espresso app facilitating coffee making process for home barista/ espresso machine user with a timer, coffee dose and grind size recommendations, brew log and bean log to record coffee details as they play with the parameters affecting espresso brews.
Key Product Features
-
Sound activated timer with manual option.
-
An optional sound activated timer that automatically begins counting when detecting sound of extraction from an espresso machine. Once stopped, a new espresso log will be generated by date with the extraction time record.
-
-
Coffee dose and grind size recommendation by bean type, desired shot, and user’s location.
-
The dose and grind size chosen prior to timed espresso extraction will also be automatically recorded in the new espresso log. User can then input brew yield, coffee roaster information and notes at a later time.
-
-
Coffee brew logs sorted in calendar to easily rate and record details of each espresso shot and search for previous entries.
-
Coffee bean logs for recording roaster’s information and freshness reminder.
-
Easy search, track and organize different coffee beans. No need to repeated enter bean information in brew logs once beans are set up.
-
Design
Based on research findings, study of user journeys, and defined product features, I map out User Flow for the App. The map help segment and define user experience, illustrating key screens, and a series of steps that the user takes to complete tasks.
Key tasks are:
-
Onboarding - set up basic information for recommendation on coffee dose and grind size.
-
Adjust dose and grind size (if needed) before start/ stop the timer to time the espresso extraction.
-
Edit/ Search for brew logs
-
Access coffee bean logs
User Flow
Wireframing & Prototyping
I had clear visual identity in mind so I went from wireframing some key screens such as the timer screen straight to Hi-Fidelity prototyping. Being able to design with colors and style in mind has helped me better read the user flow and empathize with real user experience of the app throughout design process.
Hi-Fidelity Prototype - 1st Iteration
Usability Testing
In order to find out how easy it is for users to navigate the app prototype and testing some major features of the app through completing tasks, I moderated usability testing remotely with 6 participants who performed prompted tasks with the 1st iteration of Hi-Fidelity Prototype while sharing screens and gave direct feedback.
Goals
-
Determine usability, discoverability of buttons and features, visual appeal, and intuitiveness. Test whether users need more support or clarification while completing a task flow.
-
Are there parts of the user flow where participants get stuck?
-
Do users like the visual design of the app/ features?
-
Are there any design changes we can make to improve the overall user experience of the app?
Affinity Map
Findings
" I want to know the benefits of sharing my location."
"Can I adjust timer activation mode (manually or by sound) directly right on the Timer screen?"
"Bean cards content layout seems a little misaligned"
Insights
-
To reduce drop off rate, make onboarding process clearer by having asking ONE question on a screen, in a more friendly, detailed fashion.
-
Eliminate unnecessary onboarding questions.
-
Use colloquial terms.
-
Onboarding set up should ends with a Confirmation Screen for grind size/ dose recommendation before connecting user to timer screen.
-
Need to include a manual/ sound activated button on timer screen clearly indicating current timer mode.
-
Avoid abbreviation.
-
Make bean log content more readable and aligned.
“Love the graphics
&
the color palette!”
Final Design
Key Improvements:
-
Improved clarity on onboarding steps.
-
Smoother transition from onboarding to Brew Guide to Timer Screen.
-
Include timer mode adjustment button for easy switch between manual and sound activation mode.
-
Introduce clearer hierarchy in Bean Cards, improving readability.
Left:
First time user, onboarding set up for beginner home barista who wants to have Dose / Grind Size Recommendations for their beans.
Right:
Advanced brewer can skip initial set up and set their preferred Dose/ Grind Size via Timer screen.
When ready, Start/ Stope the Timer to generate a new Brew Log.
Left:
Use Calendar to find old brew log entries. Navigate to Log to see most recent brew entries.
Go to Beans tab to see bean logs.
Right:
Adjust the Timer activation modes (manual or sound based) on Timer screen or navigate to Settings and fine tune there.
Usability Testing on Improved Design
I conducted a 2nd moderated usability testing remotely with the same 6 participants participated in the first usability testing. This time giving less moderation and let them explore the Updated Hi-Fidelity Prototype freely as if completely on their own in real life, to see if they encounter any pain points and if they find the user experience better than last time when testing the first prototype.
All of them enjoyed the app, and gave positive feedback.
They love the design and the improved user experience!
“The user experience is much better than last version!.”
“When can I download this app? Would love to use it for real! :)”
Next Steps and Opportunities
-
Continue develop coffee bean log editing screens ( New, Delete) and Filters.
-
User's coffee consumption statistics.
Design System
