The brief
Three build-your-own ordering sites for made-up restaurants, plus one front page to pick between them. Each one had to cook the order on screen before you pay. The test for each was simple: a diner should want to post it, and an owner should want to buy it.
All three are concept work. The restaurants are invented, and so are their menus and prices.
What we made
- Tall Order, a burger counter: stack layers on a toasted bun under heat lamps while a ruler measures the stack at true scale
- Lievito, a pizzeria: pick a base and a size, dress it, and watch every topping go from raw to baked during a 90 second bake at 900°F
- steep, a tea bar: six teas poured into one cup, pearls that drop and settle, then sealed, shaken and finished with a straw
- A shared cart for the whole table with sides, drinks, tax and tip, and a pickup or delivery checkout
- A vertical video for each counter
How it works
Each counter has its own art direction: a diner at night, a marble-and-green pizzeria and a bright tea bar. Sheets of toppings were cut into single pieces automatically, and every topping has a real-world size so it spreads to the crust the way it would on a real pie.
Pizza and boba share one engine for the menu, the cart, tax and tip, checkout and accessibility. In testing, 15 random orders per counter were priced to the cent, full orders went through in Chrome, Safari's engine and Firefox, and the accessibility checker found 0 issues in the light and dark layouts, on desktop and on a phone. The front page weighs 163 KB.
What we threw away
Toppings first showed up as white boxes. The topping layer shared a class name with the site header, so every slice picked up the header's white background. We renamed it and added an automated test.
Toppings were too small and bunched in the middle, so they got real sizes and a crossfade to baked versions in the oven. The boba first looked like a sticker, because a drawn cup on a real image never matches. Now one cup image is split into glass, tea and highlights and recolored for all six teas. steep also went from 22 to 60 fps on a phone slowed down four times once live blurs were removed.
Limits
These are concepts. Menus, prices, calories, allergens and kitchen claims are sample content, and every number above was measured in testing, not with real customers.
The food and cup art are generated stills, not photos of real food. A real build swaps in the restaurant's own menu, prices, photos and name. Tall Order holds 52 fps while cooking and Lievito 40 fps while baking on the slowed phone, so they are smooth but not as light as steep.
