03 — Kiosk interface
Bolk
Good food for a healthy body
The challenge
Bolk sells healthy bowls at lunch rush. The ordering terminal had to move a queue: someone who has never seen the screen must compose a bowl, pay and leave in under ninety seconds, in a room that is loud and bright.
The response
A single vertical flow with no nesting. One decision per screen, stacked like the bowl itself — base, protein, topping, sauce — with the composition building visibly at the side so you always know what you have made.
01 — Approach
One decision per screen.
Every branch, modal and back-step was removed. The order builds as a stack you can see growing, which means the interface never has to explain where you are — you can read your own progress off the object you are assembling.
02 — Design system
Colour, type and touch for a metre away.
A custom charter built from scratch: an acid green that reads as fresh under fluorescent light, a geometric type ramp with only three sizes, and touch targets sized for someone still holding a phone in the other hand.
03 — Development
Vue, componentised down to the atom.
Built in Vue with a Storybook pattern library so the operations team could restyle seasonal menus without a developer. State lives in a single composable — the order object — and every screen is a pure view of it.
04 — Outcome
A queue that keeps moving.
The stacked flow made the terminal legible from the back of the line — people arrive at the screen already knowing what they will press. The pattern library let the brand run seasonal menus on its own.
Stack
- Vue.js
- Storybook
- Design tokens
Services
- Design strategy
- UI / UX design
- Frontend development
- Image optimisation
Images
- Product photography — Bolk
Start something