Project: Coffee e-commerce experience
Role: UI/UX Designer
Platform: Mobile
Tools: Figma
Objective: Create a quiz-style mobile flow that matches the customer with a coffee blend that is personalised to their tastes.
The Problem
From analysing existing sites, and from my own experiences, I identified four potential issues that a customer could run into:
1. Too much choice
2. Understanding taste preferences
3. Inconsistent repeat purchases
4. Lack of confidence
Most coffee apps focus on transactions, not personalisation, and when they occasionally do, it feels like an after-thought and is often buried within the site. The goal with the 'Meister Kaffee' flow was to design a mobile experience that guides users to discover their taste profile by recommending coffee blends. This method simplifies decision-making and creates a premium, craft-coffee brand identity.
Find Your Meister
The solution to these issues was a personalised recommendation system that asks users guided questions about tastes and habits in order to build a “coffee profile”. This then matches users with curated blends and provides a clean, seamless and modern purchasing flow.
Iteration 1
Iteration 1
Iteration 2
Iteration 2
The initial iteration created friction through several design choices. To improve the experience, unnecessary ‘continue’ buttons were removed and screens now advance automatically after selection, which creates a more intuitive interaction for mobile users.
A progress bar was also added to show users how many steps remain which sets clear expectations around completion time. The UI was further changed to improve readability, replacing hard-to-read typography with a more accessible and legible style.
A progress bar was also added to show users how many steps remain which sets clear expectations around completion time. The UI was further changed to improve readability, replacing hard-to-read typography with a more accessible and legible style.
Final Iteration
Final Iteration
Product Page Iterations
Initial Product Page
Developed Product Page
Final Product Page
The final iteration improved the hierarchy of the page by scaling down the hero image and simplifying the roast level into plain language. Spacing and readability were also refined, and the explanation was shortened into a more digestible format.
Navigation and CTA language were also improved to create a more balanced experience that better combines premium branding with e-commerce usability.
Navigation and CTA language were also improved to create a more balanced experience that better combines premium branding with e-commerce usability.
Final Product Page
Labelling the product with '94% match' adds an extra level of personalisation.
The product card allows users to understand the recommendation with quick and clear information.
A short paragraph explains to the user why this blend has been chosen and highlights key words/phrases based on the choice they made in the quiz.
If users are not happy with their choice, they can view, and easily switch to, other recommendations and compare them to each other.
Subscription Page
The user is now asked how often it should be delivered after the product page. This gives the customer the chance to understand the product first, before deciding whether to commit to a subscription.
Iteration 1
Iteration 2
Iteration 3
The subscription page then suggests an appropriate frequency, from a one-time purchase to a monthly subscription. This transparent and user-friendly design aims to reduce friction in repeat purchases and increase customer retention.
Reflection
This project showed me the importance of reducing friction whilst also keeping useful information obvious to the user. The biggest improvement I made was automatically progressing each section of the quiz once the user makes their choice.
Instant feedback is also important for the user, so letting them know why this particular product was chosen, builds trust in the recommendation and adds an extra level of personalisation.
