Testing Claude's limits to quickly ship a KDS prototype

A Kitchen Display System (KDS) is a digital screen system that kitchen staff can use to track, prioritize, and complete orders.

Designing one seemed interesting for a case study, because it forced me to work around several constraints:

• restaurant staff need to work fast and under significant pressure

• users can't be looking at the screen for more than a few seconds at a time

• interactive elements must be easy to tap with gloved hands

But that's not all there is to it. A truly useful KDS would also need to take into account what happens outside the kitchen. This means knowing:

• who made the order and how should it be delivered?

• did they have any particular preferences?

• how about food allergies or intolerance?

Business-wise: wouldn't it be nice to know how much it takes us to complete our orders? This kind of information would help the staff react promptly to delays. This data could even enable the restaurant to provide order completion estimates for its clients based on real data averages.

The process

I designed in Figma first and then moved to Claude, reviewing live builds against my specs and iteratively refining details like spacing, shadow values, and color tokens until they matched pixel-for-pixel. This let me catch real usability issues early: things like alignment drift between the tabs and filter controls, or a progress bar that needed to sit above the allergen banner instead of below it, for visual hierarchy reasons.

Consistency & craft

A big part of this project was establishing a consistent visual language: exact token values for shadows, a single source-of-truth color palette, and shared component patterns (the same checkbox, tag, and badge styles reused across every context) so the system would scale cleanly.

Key decisions

• Station filtering: cooks can filter the board to just their station (mains, starters, drinks, desserts) so they only see the items relevant to them.

• Allergen visibility: allergen warnings are a dedicated uppercase banner on each ticket.

• Employee filtering via avatars: an avatar stack doubles as a filter. When tapping a cook's initials, you will only see only their assigned tickets.

Result

The result is a working, responsive prototype with accessible station and cook filtering, real-time order search, status-based color coding, and a toast notification system. If this were a client project, I'd do usability testing with real kitchen staff next, before pursuing full implementation.