Table Flow
A real-time service-timing system for restaurant floors. High-signal, glance-and-go.
The Brief
Restaurant teams run service from memory while their tools show order lists. Nothing on the market shows the dining room itself — who is mid-main, who is waiting, who needs attention right now. TableFlow makes the live floor plan the single source of truth: every table readable in under two seconds, from across the room.
The Approach
I treated time as the interface. Every dining phase has an average duration, and each table wears that clock as an arc that fills as the course elapses. When time runs out, the ring turns dashed red and spins — attention in a glance, no reading required. Color carries meaning everywhere, and the system never spends the same color twice.
Constraints
Technical · BusinessBuilt on a tablet-first responsive grid with 44px minimum touch targets and off-the-shelf web components — no custom native gestures — so it could ship as a PWA on the low-cost tablets restaurants already mount at stations, buildable by a single engineer.
Restaurants run on thin margins and constant staff turnover, so I designed for zero training: a new hire has to read the floor on their first shift. Any feature that needed explaining got cut.
Process — 03
Four roles, one floor
Built personas for waitstaff, managers, owners, and guests, then mapped the dining experience into timed phases — appetizer, main, dessert, settle. Those phase budgets became the numbers that drive the entire interface.
A clock on every table
Phase arcs anchor at 12 o'clock and fill with elapsed course time. A full arc means act now; overdue becomes a dashed red spinning ring. The floor plan and the order list always tell the same story — one data model, two views.
Typographic precision at 11px
A teal primary chosen to stay clear of all five semantic colors working on the floor. Manrope and DM Mono across 12 screens in dark and light themes, with contrast tuned to AA so status reads under dining-room lighting.
Design Decisions
Cognitive rationaleMotion for overdue, not just color
A dashed red ring spins when a table runs late. The visual system registers motion and color in peripheral vision before conscious reading — under half a second — so an overdue table is felt across the room, not read.
One context-aware action per table
Instead of a menu, each table surfaces the single next move for its current phase. Fewer choices means a shorter decision time, so waiters act without deliberating.
A floor plan, not a list
Waiters already hold the room's layout in their heads. Mapping live status onto real table positions lets them recognize a table by location instead of recalling it from a list — offloading working memory rather than taxing it.
Micro-flows — 02
Selected user flowsCHOSEN MICRO-FLOW · COGNITIVE MAP
What the waiter thinks vs. what the waiter does — the 2-second table check mapped in three rows: the mind, the UI, the action.
MICRO-FLOW · FILMSTRIP
Glance → tap → ping → resolved — one delayed table rescued in four frames, with the cognitive principles that make it work.
Outcome
A waiter reads any table in under two seconds. The phase-arc mechanic became the brand itself — the logo is the arc — carried across 12 screens, two full themes, and a complete identity system.
Reflection
Next step: put this in front of real waiters mid-shift and measure whether the two-second glance actually holds under service pressure.
Case Study
Challenge · Solution · ImpactThe Challenge
Waitstaff track a dining room by memory while their tools show chronological order lists. Attention lands late — dishes linger, desserts go unoffered, tables turn slowly. List-first tools answer "what was ordered," never "who needs me now."
The Solution
A live floor plan as the single source of truth: phase-colored tables wearing timer arcs, a dashed red ring for overdue attention, context-aware actions that change with the meal, and kitchen callouts placed on the map itself.
User Research
Methods · Participants · InsightsKey Insights
- 01
Existing tools track orders, not attention — as a waiter you run the room from memory while the screen shows a list.
- 02
The gap is just as sharp from the guest's seat: you wait, trying to catch the waiter's eye, because nothing tells her your table is the one that needs her now.
- 03
Waiters glance, they don't read. Mid-service, anything slower than a two-second glance gets ignored.
Final Products — 04
Gallery
