UI design
Molly Tea Kiosk
What if Molly Tea had a self-serve kiosk? Designing an ordering flow that works for regulars and first-timers alike.
- Role
- UX/UI Designer, Interaction Designer
- Tools
- Figma, Procreate
Add the timeline, and say whether this was a class project or self-initiated. Note that it's an unsolicited concept, not affiliated with Molly Tea.
Context and problem space
Molly Tea stores frequently have long queues, and many customers don’t use the mobile app. A self-serve kiosk could streamline ordering, improve accuracy, and deliver an accessible, intuitive experience for everyone.
Ideation: low-fidelity screens
I sketched six low-fidelity screens inspired by Molly Tea’s mobile app and real-world self-serve kiosks. Each screen was designed to simplify the ordering flow, minimize steps, and make interactions clear and accessible.
Lean testing insights
I tested the lo-fi prototype with three people: a regular Molly Tea customer, a bubble tea drinker unfamiliar with the brand, and a student who rarely drinks bubble tea.
- They found the customization screen overwhelming because of the many options, especially for new customers.
- Choice overload and unfamiliar menu items could slow ordering, increase errors and reduce confidence.
These insights highlighted the need to simplify the selection flow and give first-time customers clear guidance.
High-fidelity screens
I built a complete high-fidelity prototype, iterating on the lo-fi designs based on testing.
Drink details
The welcome and menu browsing screens stayed the same. I added a drink details screen with concise descriptions to help first-time drinkers choose with confidence.
Step-by-step customization
I redesigned drink customization into clear stages (milk, ice, sugar, toppings) with a dynamic progress bar and updated labels, giving real-time feedback. Large buttons and clear text make the process accessible and easy to navigate.
Order summary and confirmation
The order summary clearly breaks down prices and guides customers to payment. The confirmation screen reassures them with a prominent order number, wait time and pickup instructions.
Clickable prototype
Reflection and lessons learned
This project reinforced how clear, step-by-step flows and immediate feedback reduce confusion and build confidence. Lean testing and iteration showed the impact of small design details, shaping how I approach multi-step, accessible interfaces.
Consider a short section on kiosk accessibility: reach height for wheelchair users, audio or tactile options, and multilingual support.