Molly Tea Kiosk

Add the timeline and the course name. Link the clickable Figma prototype (the redesign has its own flow, "Order a drink (redesign)").

01Overview

Molly Tea lines get long, and many customers don’t use the app. A kiosk could help, if it’s clear.

For a class project, I designed a self-serve kiosk for Molly Tea, a milk tea chain. It’s an unsolicited concept, not affiliated with the brand. The goal was simple: let anyone order milk tea without confusion at any step.

My role

Solo designer

Secondary research, sketches, testing and the hi-fi prototype.

Users

Regulars and first-timers

Regulars want speed. First-timers need to know what's in each drink and what to pick.

Iteration

Two rounds of changes

One after testing my sketches, and one after my professor's critique of the hi-fi screens.

02Solution

Menu with a category sidebar, drink cards showing name, ingredients and price, a toast saying 2 Premium Jasmine Milk Teas were added with an Undo link, and a cart bar showing 2 drinks for $15.50

Step 1

Browse the menu, with your order always in view.

A short list of categories keeps the menu easy to navigate. Every drink shows its name, ingredients and price, and the cart bar at the bottom keeps a running total.

Drink details for Premium Jasmine Milk Tea with a large photo, the price, ingredient chips for jasmine tea and fresh milk, a short description and a Customize drink button

Step 2

See what's in a drink before you commit.

A large photo, the ingredients as chips and a short description help first-timers choose with confidence.

Sugar step of customization: a progress bar with milk and ice done, the question How sweet? and six sugar options with Half sugar selected

Step 3

Customize one choice at a time.

Milk, ice, sugar and toppings each get their own screen with one clear question. The progress bar shows where you are and what you've already picked.

Topping step with No topping selected, a summary of the drink's choices, a quantity stepper set to 2 and an Add 2 to order button for $15.50

Step 4

Choose how many, then add it to your order.

A summary confirms every choice. The quantity stepper makes ordering more than one easy, and the button shows exactly what you're adding and what it costs.

Review your order with two drinks, each with its choices, Edit and Remove links and a quantity stepper, a choice between card and pay at counter, and the total of $25.93

Step 5

Review everything, then pay your way.

Edit, remove or change the amount of any drink, choose card or pay at the counter, and see the full price breakdown before you pay.

Confirmation screen with a green check, order number 281, an estimated wait of about 5 minutes, pickup steps and a countdown before the kiosk starts over

Step 6

Know exactly when and where to pick up.

A large order number, the wait time and pickup steps answer what happens next. A visible countdown resets the kiosk for the next person.

03Research

I ordered from another company’s self-serve kiosk and photographed every screen to study its flow and how much it showed on each page. The steps were clear, but the menu sidebar listed nearly twenty categories in an order that was hard to follow. I learned that over-categorizing a menu creates confusion instead of preventing it.

So I kept Molly Tea’s menu to a few categories, plus a Featured section for anyone who isn’t sure what to order.

04Process

I sketched six screens, then tested them with three people.

Six hand-drawn lo-fi kiosk screens, each numbered with a title and rationale: Welcome, Menu, Customize, Review order, Payment and Order received — My lo-fi sketches, with the reasoning behind each screen.

I tested the sketches with a regular Molly Tea customer, a bubble tea drinker new to the brand and a student who rarely drinks bubble tea. They found the customization screen overwhelming, especially when they were new to the menu.

Change 1

A drink details screen

A short description before customizing, so first-timers can choose with confidence.

Change 2

Customization in steps

Milk, ice, sugar and toppings on separate screens, with a progress bar that shows each choice.

05Critique and redesign

My professor’s critique gave me a clear list to fix.

The flow worked, but the screens were hard to scan and didn’t respond much when tapped. I took each point of the critique and redesigned every screen around it. The two process points are answered above, in the labelled sketches and in this section itself. The four interface points are below, each with the parts that changed numbered on the new screen.

Feedback 1 of 4

“Headings and labels should stand out more clearly compared to other content so users can easily scan each item.”My professor, on the hi-fi menu

A type scale so the eye knows where to land.

The original menu: category names, drink names and prices all in Lato Regular, with category names in capitals in a pink sidebar — **Before**Every line in the same regular weight

The redesigned menu with numbered outlines on the category heading, the active category, the drink names and the prices — **After**Four levels of hierarchy

Category headingBold 44px with a one-line description, instead of small capitals.
Active categoryBold text and a pink bar, so you always know where you are.
Drink namesBold 32px, the first thing you read on each card.
PricesBold and on their own line, easy to compare at a glance.

Feedback 2 of 4

“Each item should list ingredients in a short, easy-to-read format so users can quickly glance at the information.”My professor, on the menu and drink details

Ingredients you can read in one glance.

The original drink details screen: a centred name, price and a paragraph of description under a light Details label — **Before**A paragraph to read, no ingredient list

The redesigned drink details with numbered outlines on the bold name and price, the ingredient chips and the labelled description — **After**Ingredients first, description second

Name and priceLeft-aligned and bold, so they read as the screen's title.
Ingredient chipsEach ingredient in its own pink chip, readable in a second.
Labelled descriptionThe paragraph moved below, under its own label, for anyone who wants more.

The same list appears in one line on every menu card, like “Jasmine tea · Fresh milk”.

Feedback 3 of 4

“Allow users to add multiple items to their cart, which would improve usability and better support common shopping behaviors.”My professor, on the cart and review

A cart built for ordering a round of drinks.

The original review screen with a single drink, its choices in a plain list and a small quantity control, and a faint Back to menu link — **Before**One drink, quantity only at the end

The redesigned review screen with numbered outlines on the list of two drinks, the Edit and Remove links, and the Add more button — **After**Several drinks, each easy to change

Several drinks at onceEach drink keeps its own choices, so a group order stays clear.
Edit or removeFix a mistake without starting the whole order again.
"Add more" instead of "Back to menu"Named for what you want to do, and given a real button, to invite another drink.

Feedback 4 of 4

“Some interactions are minimal.”My professor, on the prototype as a whole

Every tap gets a visible response.

The original toppings step: small grey labels under the progress dots, square option buttons and a pink Add to Cart button — **Before**Choices shown, but easy to miss

The redesigned toppings step with numbered outlines on the progress bar, the selected option, the quantity row and the Add 2 to order button — **After**Choices confirmed as you go

Progress with check marksFinished steps get a check, and your choices are bigger and easier to read.
Clear selected stateA dark border and a check mark, not just a pink fill.
Quantity before addingPick how many right where you finish the drink.
A button that tells you the result"Add 2 to order · $15.50" instead of "Add to Cart".

The menu right after adding a drink, with numbered outlines on the 2 in order badge, the success toast with Undo and the cart total — **After adding**The menu confirms what just happened

"2 in order" badgeDrinks already in your order are marked on the menu.
Toast with UndoConfirms what was added, and lets you take it back in one tap.
Live cart totalThe count and price update the moment you add a drink.

06Design system

I built the redesign on a small design system, so it can grow.

Every colour, text style and repeated element is defined once in Figma and reused. A new drink, category or screen can be built from the same parts, and a change to one component updates every screen that uses it.

colour variables, named by role

text styles in one type scale

components with variants and properties

Components: a Button with Primary, Secondary and Tertiary variants, an Option card with Default and Selected states, a Quantity stepper and a Drink card, each listing its variants and properties — Components use variants for states and properties for content, so one component covers every case.

Type scale in Lato, from Big number Black 200 and Display Black 64 down to Body Regular 28, Ingredients Regular 24 and Label Bold 22 — The type scale behind the new hierarchy.

Ten colour variables with their hex values and roles, from ink and muted for text to pink for selected states and success for confirmation — Colours are named by what they do, like "muted" or "success", not by how they look.

Tokens, not hex codes

Every fill is bound to a variable, so the palette can change in one place.

Variants for states

Default and selected, or primary and secondary, live in one component.

Properties for content

Labels, names, prices and quantities change per screen without detaching anything.

07Reflection

What I learned

Make the hierarchy obvious.

When every line used the same font weight, nothing stood out. A clear type scale fixed that.

Explain the reason behind each idea.

Labelling my sketches with their purpose made my decisions easier for others to follow and critique.

Design for how people actually order.

People often buy more than one drink, so the cart needs to handle that from the start.

Respond to every tap.

At a kiosk, there's no one to ask for help, so every action needs a visible response.