Flow
Order Now or Add To Cart
Two clear paths from the drink sheet: skip the cart for a single drink, or build a larger order.
KopieSatu
Coffee, ordered.Ready when you are.
A self-order app for a local coffee chain: browse, customise, pay at the cashier and collect with a pickup number, in three tabs and a handful of taps.
- Role
- Mobile UI/UX Designer
- Platform
- iOS & Android Mobile App
- Tool
- Figma
- Timeframe
- 2024 – 2025
Seven screens. One flow.
From the menu to the counter.
01 · Browse
Menu
A category rail on the left and a two-column grid of large drink photos, so the whole menu scans in a few thumb flicks.
02 · Customise
Drink Detail
A bottom sheet over the menu: size chips, quantity stepper, and Order Now or Add To Cart in the thumb zone.
03 · Review
Cart
Every line editable in place with size, price and a stepper, and the total pinned beside the primary action.
04 · Confirm
Pay at Cashier
One instruction and one number. The order is confirmed at the counter, so the screen shows only what the customer needs to say.
05 · Wait
Crafting
A live countdown with a friendly illustration replaces the anxious lobby wait.
06 · Collect
Order Ready
A large pickup number to show the barista, with a check badge on the cup as the confirmation.
07 · History
Your Orders
A read-only receipt of what was ordered. Quantity moves into a badge so the list can't be edited by mistake.
A basket that changes.A receipt that doesn’t.
Cart lines carry steppers because they’re still editable. Once the order is placed, the same rows return in Orders with a quantity badge instead, so a finished order never looks like something you can change.
One idea per screen.One figure to read.
Paying, waiting and collecting each get a single illustration, a single headline and one large figure: the total, the countdown, the pickup number. Nothing else competes for attention at the counter.
One colour. One typeface. Nothing to unlearn.
One deep-navy brand colour on white, Poppins throughout, and a persistent three-tab bar with live badges. Each screen is a single state with a single primary action.
Brand Navy
#221F5A
Text, icons, primary buttons
Alert Red
#C0291E
Count badges only
Surface White
#FFFFFF
Screens and cards
Quiet Gray
#6B6B70
Prices and secondary text
Add to cart
Cappuccino
RM 10.90
Add To Cart
MenuCart3Orders
Get the highlights.
At a glance
Designed end to end.
- Screens in the Flow
- 7
- From browsing the menu to collecting a drink, every step is designed and connected.
- Purchase Paths
- 2
- Order Now for a single drink, or Add To Cart to build up an order.
- Ergonomic Layout
- 1-Thumb
- Primary actions, steppers and tabs all sit in the lower half of the screen.