TableFlow
A service-timing system that learns each restaurant's real dining tempo. High-signal, glance-and-go.
- Type
- Self-initiated concept
- Year
- 2026
- Role
- Product & Brand Designer
- Sector
- Hospitality · Restaurant Tech
- Disciplines
- UX/UI, Branding, AI
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. Table Flow 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 — but never a guessed time. TableFlow learns each restaurant's real tempo: how long every course runs by hour, party size, even the playlist. Each table wears that learned clock as an arc that fills as the course elapses; when it runs out, the ring turns dashed red and spins. Attention in a glance — and every number behind it is evidence, not a guess.
Constraints
Technical · BusinessA tablet-first grid, 44px touch targets, and off-the-shelf web components — no custom gestures — so TableFlow ships as a PWA on the low-cost tablets restaurants already mount at stations. The learning model asks for nothing new either: it trains on timestamps the POS already records. One engineer can build it.
Thin margins and constant turnover meant designing for zero training: a new hire reads the floor on their first shift, and anything that needed explaining got cut. The AI holds to the same rule — it works backstage and surfaces as one screen of estimates the manager approves each month.
AI in the Process
Tools- Stitch
- First-pass screen exploration — generating and discarding early UI directions fast.
- Figma AI
- Layout iteration inside the design file — variants, spacing, and component passes.
- Claude Code
- Building the wired, clickable prototype from the final designs.
Process — 03
Four roles, one floor
Built personas for waitstaff, managers, owners, and guests, then mapped dining into timed phases — appetizer, main, dessert, settle. Instead of fixing those budgets, TableFlow learns them from every meal served — by hour, party size, and tempo.
A clock on every table
Phase arcs anchor at 12 o'clock and fill against a duration the model learned for that hour and party size. A full arc means act now; overdue becomes a dashed red spinning ring. Floor plan and order list tell the same story — one learned data model, two views.
Color as language
A teal primary chosen to stay clear of all five semantic colors working on the floor. Manrope and DM Mono across 14 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 — 03
Selected user flowsMICRO-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.
MICRO-FLOW · THE MANAGER LOOP
What the manager thinks vs. what the manager does — the monthly minute: glance at accuracy, read the drift, review the AI's proposed durations, approve. From then on, the floor runs on learned time.
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.
- 04
Dining has a rhythm — and it isn't universal. Duration shifts with hour, party size, even the playlist. Lateness, not order content, is what loses desserts, tips, and table turns.
Outcome
A waiter reads any table in under two seconds — and trusts it, because every arc runs on durations learned from thousands of meals, approved by the manager monthly. The phase-arc became the brand itself — the logo is the arc — carried across 14 screens, two full themes, and a complete identity system.
Reflection
Next step: put this in front of real waiters mid-shift and measure two things — whether the two-second glance holds under service pressure, and whether the learned estimates do. The model's accuracy is a design target until real shifts test it.
Final Products — 04
Gallery
