From Certification to Real-World Impact: Matcha Cafe UX Design 🌱
Project: Design a mobile app for a new matcha cafe to establish its digital presence, streamline ordering and enhance customer engagement.​
My role: User Experience - Designer, Researcher and Strategist​​
Duration:
2 weeks User Research
2 weeks Design
Contribution:
User research
Stakeholder interview
Project management
Wireframes
Low-fidelity prototype
High-fidelity prototype​
Background: This project was a volunteer initiative to design a mobile app for a newly launched matcha cafe. The cafe aimed to build its digital presence and provide an easy-to-use platform for customers to explore its menu, place orders, and engage with the brand. As a recent graduate of the Google UX Design Certificate, I took on the challenge to apply my newly acquired skills in a real-world setting, helping the cafe establish a seamless mobile experience that matched its fresh, modern brand.
Goal: To create a seamless and inviting mobile experience for users, allowing customers to easily explore the menu, place orders, and engage with the brand.
User Research
Summary: To ensure the mobile app met customer expectations, I conducted user research to understand the needs and preferences of potential cafe patrons. Through surveys and informal interviews, I identified key user personas, including busy professionals looking for a quick and easy ordering experience, and matcha enthusiasts interested in learning more about the cafe’s offerings. Key findings revealed that users valued simplicity and speed in ordering. Additionally, I analyzed competitors apps to identify pain points in the ordering process, such as complicated menus and slow checkout. These insights guided the design of a streamlined user interface focused on ease of use, clear menu displays, and efficient ordering functionality.
Pain Points: To ensure the mobile app met customer expectations, I conducted user research to understand the needs and preferences of potential cafe patrons. Through surveys and informal interviews, I identified key user personas, including busy professionals looking for a quick and easy ordering experience, and matcha enthusiasts interested in learning more about the cafe’s offerings. Key findings revealed that users valued simplicity and speed in ordering. Additionally, I analyzed competitors apps to identify pain points in the ordering process, such as complicated menus and slow checkout. These insights guided the design of a streamlined user interface focused on ease of use, clear menu displays, and efficient ordering functionality.
Personas
Starting the design
User Flow
The user flow is influenced by user research where diagram illustrates the key interactions within the cafe mobile app, starting from app launch to checkout. The primary focus is on the ordering process, guiding users through menu selection, customization, and checkout. Designed for efficiency, the flow ensures a seamless experience with intuitive navigation, quick order placement, and a smooth checkout process to enhance customer satisfaction.
.png)
Iterate & Refine
Wireframes
The wireframes represent the initial structural layout of the Matcha Moha app, focusing on intuitive navigation and a streamlined ordering process. At this stage, the goal was to establish a clear information hierarchy, ensuring that users could browse the menu, customize their drinks, and check out with minimal friction.
​
After testing the wireframes with potential users, key feedback led to several refinements:
Key Design Decisions
-
Homepage Focus: Prioritized easy access to the menu and featured drinks.
-
Navigation Simplicity: Used a bottom navigation bar for quick access to key sections.
-
Ordering Flow: Designed a step-by-step selection process to enhance clarity and reduce decision fatigue.
-
Checkout Optimization: Minimized steps and included mobile payment integration for efficiency.
Design
The design process began with an established logo, which set the foundation for the app’s branding and visual identity. The brand’s identity influenced the color scheme and typography choices. The logo, inspired by traditional Japanese tea culture, features earthy tones and organic shapes, setting the foundation for the app’s visual language
Color
​
​
The color scheme was carefully chosen to reflect the freshness of matcha while ensuring accessibility and readability in the app. I created a wide range pallet where as the primary colors marked as "main" for easy reference. ​
for eg. Matcha Green is Primary brand color for key UI elements (buttons, highlights)​
To maintain a modern, clean, and readable interface, I chose "Geist" as the primary typeface for both headings and body text. Geist’s minimal and contemporary design complements the Matcha Moha brand’s aesthetic, ensuring a seamless digital experience.​
Additionally, Geist is scalable and works seamlessly across mobile, tablet, and desktop screens.
Final Solution
The final solution delivers a seamless, user-friendly ordering experience by combining an intuitive interface, streamlined checkout, and engaging brand elements to enhance convenience and customer satisfaction​.
.png)
Task 1:
Place a Order
Key Feature
Designed for speed and simplicity, the ordering flow ensures users can place order in just a few taps.
Justification
- Majority of participants expressed concerns regarding lots of steps for placing order, the user flow would enable users to order in minimal less steps with few taps.
Task 2:
Track the order
Key Feature
Track order feature allows users to track their order and know estimated time.
Justification
- Many participants expressed interest to be able to track the order. "Track Your Order" option is displayed as soon as order is confirmed which provides user the feature to track the order conveniently.
Task 3:
Navigate to the cafe
Key Feature
Users can navigate to the cafe after easy is placed with one tap.
Justification
- As per user research one of the pain point on similar apps is, users are not able to navigate to the cafe once order is confirmed. "Get Directions" adds a unique feature to the app and stand outs from the competitors.
This interactive prototype showcases the final design of the Matcha Moha app with main pages, illustrating the smooth ordering flow, intuitive navigation, and engaging UI elements. Built in Figma, the prototype allows users to experience the app’s functionality, including menu browsing, customization options, and a streamlined checkout process.
Final Pitch
Imagine walking into a busy morning cafe, craving your favorite matcha latte, but the long line makes you hesitate. With the Matcha Moha app, that hesitation disappears. You’ve already placed your order ahead of time, customized to perfection, and it’s ready when you arrive. No wait, no hassle-just great matcha, effortlessly.
When I started this project, my goal was to create a simple, fast, and enjoyable ordering experience that reflects the warmth and efficiency of a great cafe visit. Throughout the design process, I learned the importance of balancing aesthetics with functionality, making sure the app was not only visually inviting but also intuitive and efficient.
Looking back, I’m proud of how the final design brings together user needs, business goals, and a strong brand identity. From a frictionless checkout process to a rewards system that keeps customers engaged, every decision was made to enhance the cafe experience.
This project reinforced my passion for user-centered design, and I look forward to applying these learnings to future challenges—crafting experiences that make everyday interactions smoother and more delightful.
📸 Me enjoying a matcha drink & matcha ice cream after wrapping up the project :D
