Butter CroissantThe flow on the same board as the screens.
A wireframe is grey on purpose: its job is to be argued with before anyone spends a week on the visual design. The journey between the screens is drawn beside them, so a comment lands on the step it is about.
StartOrder aheadYour drink1Pick upEnd
no ↓ → Sign in → Pick up
Jun ParkCan a guest pay at pickup, or do we force sign-in here?
One drink, on every screen it is on.
Pumpkin Latte is a row on Order ahead and the heading on Your drink: two figures, one object. Rename it on one screen, and both say Pumpkin Spice Latte.
Order ahead
Pumpkin Spice Latte$6.25
Flat White$4.75
Oat Latte$5.25View order · 1 item
Pumpkin Spice Latte
$6.25 · seasonal
SML
Add to order · $6.25
A control keeps its state.
The controls are figures with parameters, not pictures: a switch is on or off, a slider has a value, a stepper has a number of steps, and each reads a field of the object behind the drawing. Change the field and the control redraws.
Oat milk
Extra shot
Sweetness
✓23
Your drinkMobile screen
oat milkyes
extra shotno
sweetness2 of 4
step2 of 3
Every figure, named.
The toolbar's own names — what you pick is what this list says: five groups, 39 figures.