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.

Lo-fi screens: welcome, menu browsing, drink customization, order summary, payment, order confirmation

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.

Drink details screen

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.

Customization before and after

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.

Order summary and confirmation screens

Clickable prototype

Wireframes and navigation flow, plus the clickable MVP 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.