The KitchenOS board during a rush
Product design 14 min read

A live-operations dashboard for a multibrand cloud kitchen

where every order goes out on time, even at peak rush.

My roleSystem designInteraction designPrototyping
Timeline2 weeks
TL;DR

Two findings from mapping the order manager's rush. I sorted his work into two piles. The parts a computer can do, and the parts that need him. Then I walked one order through the screen, step by step, and let that decide what stays visible and what collapses. Plus the part where AI gave me bad designs three times before I worked out the problem was me.

This was my approach:

  1. 1Before I designed anythingHow I found the real problem.
  2. 2Building the system, then the screenWhat I automated, what I left with Rajeev, and what his eyes actually need.
  3. 3Getting it builtTwo failed attempts, one fix to my own input, and a working prototype.
  4. 4No numbers, only reasonsWhat I can claim, what I cannot, and what every decision points at.
  5. 5ReflectionsWhat I got wrong about AI, and the rule I am taking with me.
The setup

Three brands, one team

A cloud kitchen has no tables. It only cooks for delivery apps.

This one runs three brands. Biryani. Healthy bowls. Burgers.

The three brands the kitchen cooks for: Biryani Central, Bowl and Co., and Burger Junction

Rajeev runs the pass

Rajeev is the order manager. Every order goes through him. He decides what gets cooked first and who is cooking it. He knows this kitchen well. How fast each cook works and what each cooking station can take.

Rajeev, the order manager, holding three delivery-app tablets at once

During the rush hour

More than 80 orders come in from Swiggy, Zomato and the kitchen's own app. And chaos ensues.

Some orders get delayed while some cooked orders keep getting colder waiting for their delivery rider.

The cost of a delay

Three panels. In the first fifteen minutes the customer calls support, then they ask for a refund, then they post about it on social media

The brand takes the damage.

What I set out to build

One desktop screen for the kitchen. Rajeev is the main user.

But before I could design it, I had to find out what was actually going wrong.

Where I started

Before I designed anything

I started with Rajeev's day

I went in thinking this was a speed problem. More orders, less time, so make the kitchen cook faster.

To confirm my assumption, I wanted to stand where Rajeev stands. So I mapped his current process, step by step.

Rajeev's current process mapped across five steps, in lanes for what he needs to know, what he is deciding, what he is doing, how it feels, and where it breaks. Annotations note that nothing tells him what is happening inside the kitchen, that every answer he needs lives in someone else's head, and that he is the only one holding the full picture.
The current process, mapped step by step.

Had two interesting observations

1. It was never a speed problem

Nothing in the map showed a kitchen that was too slow. Cooking times were already tight. The stations could handle the load.

But what grabbed my attention was a panicked Rajeev, in the middle of a rush, shuffling between three tablets. Trying his best to accept new orders, scanning for orders which are about to get delayed, shouting across the room to ask for cooking status of random items.

He knows how to do his job. Yet he is standing there, clueless, hunting for information.

Three panels of Rajeev mid-rush, shouting across the kitchen to ask who is cooking an item, what its status is, and what is taking so long

That's when it hit me.

Rajeev was never short on speed. He was short on visibility.

Making one decision needed him to check two or three places. Sometimes it needed him to ask someone and wait for an answer.

That was the bottleneck.

2. Most of his work does not need him

This one came from reading the map back.

Rajeev covered in sticky notes, surrounded by the four jobs he does by hand: accept the incoming order, assign items to cooking stations, scan for items to cook together, and spot an order about to go late

Rajeev was doing all of it by hand. At 80 orders an hour. From memory.

A computer can do this faster than a person. And it also does not get tired at order sixty.

His time and mental energy were going into work a system could do.

From logic to layout

Building the system, then the screen

Part 1

Automate the rules, keep the judgment

First, I sorted the list

The journey map gave me everything Rajeev handles in a rush. I went through it and asked one question about each item.

Does this need a person? Yes on the left: decide which order waits when two are due at once, handle the order that does not fit the rules, override the plan when the room disagrees. No on the right: work out a cooking time, put a queue in order, send an item to a station, spot two items that can cook together.

One item would not go in either group

Making sure no order goes late is Rajeev's main job.

But a system spots a coming delay earlier than he can.

So I split it.

The system detects potential delays and suggests a fix. But Rajeev makes the final call.

Then I built the rule work into the system

So I designed four features.

01

Priority logic

The system reads an order and works out its ETA.

The longest item cooking time becomes the cooking time for the whole order.

Then the system compares that number with the rider's arrival time. The larger one becomes the promised time.

Flowchart. The system reads the accepted order. If the order has multiple items it works out which item has the longest cooking time, and that becomes the cooking time for the whole order. That number is then compared with the delivery rider's arrival time, and the larger one becomes the promised time.
02

Auto slotting

Every item goes into its station queue on its own.

The queue is ordered by ETA. Earliest sits at the top.

Rajeev stops sending items to stations. He supervises a queue that is already correct.

03

Auto batching

Items that can be cooked together get grouped together.

The system only does this when their promised times are close.

It works across brands. A biryani for one order and a biryani for another can go in the same batch.

Nobody spots this by hand across 80 live orders. The system does it every time.

04

Auto delay detection

The system watches every order for a delay before it happens. When it finds one, it raises an alert and suggests a fix.

It does not apply the fix. Rajeev decides.

A kitchen has too much a system cannot see. A cook is off today. A station is running hot. A rider is unreliable and Rajeev knows it.

Part 2

Deciding what his eyes need

Showing everything is not visibility

Items, cooking times, station, batch, promised time, rider, platform, customer, order history.

All of it on screen is the same chaos, rearranged.

So I mapped the happy path

The first map showed me a process. This time I wanted to see the experience.

So I imagined one order running on the dashboard I had designed, and mapped it the way it should go.

From the moment it arrives to the moment it leaves. What is Rajeev doing right now? Where are his eyes? What does he need to know at this exact moment?

The happy path mapped across seven steps, in lanes for where his eyes are, what he is doing, and what emotion he is feeling. A new order arrives, he hears the ping, opens the dashboard, sees the new card at the top of the active orders list, reads its details including the Zomato source, the two brands, the accepted status and the 22 minute rider arrival and promised time, sees both items added to their cooking stations, then moves on to other orders.

That gave me the clarity I needed.

Visible all the time

Why it stays
Station status and loadHe cannot route work without it
At risk and breached countsThe two numbers the business counts
Order numberHe traces items back to orders constantly
Which app it came fromWhose promise he is keeping
Order statusWhere the whole order stands, before he opens anything
Promised timeThe one number the whole job is judged on
Items, marked by brandWhat has to be cooked, and which kitchens are in it

Hidden until needed

One click away on the expanded card.

On the expanded cardWhen he needs it
Which station each item went toChecking the routing held
Cook time left on each itemJudging whether the order makes its promise
How far each item has gotChasing one slow item
Rider ETA and journey progressFood is ready early and would sit
Full brand name per itemOnly when the brand mark is not enough

And the rest is surfaced by the system, never hunted for.

Surfaced by the systemWhen it appears
Batch grouping and the orders it feedsWhen the system finds a match
The delay alert, its plan and projected finishWhen an order is going to breach

The final prototype, handling a rush

This flow shows how Rajeev handles a delay alert.

It opens on a clean board. Sixty-four orders live, nothing at risk.

A new order lands. The system reads it, works out its ETA, and drops each item into the right station queue. Rajeev does nothing.

Then one item starts to slip. Chicken Biryani at Hot Station 2 is not going to make its promised time. The alert arrives in the panel and waits.

He opens it when he is ready. The problem is stated, a fix is proposed, and the projected finish is there so he can see what the fix buys.

He takes it. The queue re-sequences, the order comes back inside its promise, and the board goes quiet.

Open the live prototype
Tools, and getting them right

Getting it built

I knew what I wanted it to look like

Data heavy but not crammed.

This screen holds 80 live orders. Colour has to mean something otherwise it will be too hard to focus on anything on it.

So I went looking for references. I found two or three that came close.

The first two tries failed

I gave those references to Claude. What came back was generic. Hard outlines on everything. Dull colour. A dashboard, but not my dashboard.

I tried Figma Make. Same result.

The first Claude output. A dashboard called KitchenCommand: an active orders list on the left, three station columns with hard outlined rows, and a batching suggestions panel on the right. Flat greys and thin rules throughout.
Claude, first attempt
The Figma Make output. A KitchenOS dashboard with an orders rail on the left and five live station columns, each order line boxed and outlined, with a simulate rider delay button at the bottom.
Figma Make, same result
Both large enough to see why they were rejected.

I was blaming the wrong thing

I was two tools in and about to try a third.

Then I realised that I had made two mistakes at once.

I never showed it a layout. I described what I wanted and expected it to work out the structure. It cannot guess a layout. So it reaches for the most common one.

I gave it three references. Three directions do not sharpen an instruction. They get averaged. And the average of three looks like nothing in particular.

So I fixed the input

I went back to Figma. I drew the wireframe by hand.

Every panel. Every region. The whole structure I had already settled during the system work.

No styling. Just the layout.

Then I picked one reference and dropped the rest. A settings dashboard from Vantus ERP.

I do not know if it is a real product. It was data heavy and still completely legible. The way it used white space and grey tones was exactly how I envisioned my dashboard should look.

The wireframe drawn by hand in Figma. Greyscale boxes only: a logo block, a digital clock, at risk and breached counters, an orders rail with a collapsed and an expanded card, and five station columns of repeated order rows. No colour and no styling.
My wireframe
The Vantus ERP settings dashboard used as the single visual reference. A left navigation rail, three administrator role cards, and a dense account table, all on soft white panels with generous white space and grey tones.
The one reference
These two inputs are the turn in the story, so they sit together.

One wireframe, one reference, one tool

I gave both to Stitch. Structure from my wireframe. Visual direction from the one reference.

This time the output was close to what I had in my head. Not finished. Close enough to use.

The Stitch output. A KitchenOS board with the orders rail on the left showing one expanded card with per-item progress, and five station columns across, each led by a batched card in green. Light panels, soft grey rules and generous white space throughout.

Then I used that as the reference, not the result

I did not treat the Stitch output as a design. I treated it as a direction.

I gave it to Claude Code and it built the prototype against that.

Two rounds, one handoff. Round one: my wireframe and one reference both feed into Stitch, which produces the Stitch output, close but not finished. That output is reused. Round two: the Stitch output goes in as a direction rather than a design, into Claude Code, which produces the working prototype.

The prototype was a starting point

Then came the longest stretch of the project. I prompted Claude Code through change after change.

The order card went through several rounds.

The collapsed order card, Claude's output against the final version. Claude's output shows the app as a red dot that reads like a non-veg food indicator, a bold promised ETA label and order id that are hard to read, and the items typed on one line. The final version replaces the dot with the app name in its brand colour, drops the label weight to medium, adds a brand icon per item, and puts one item on each line so it can be scanned.

I stopped when I believed the UI would hold up in real use. Not just in a screenshot.

One thing did not survive that process

I had built the delay alert as a modal. A delay is urgent, so I blocked the screen until Rajeev responded to it.

Anudeep, my mentor at UX Gym, found the problem. Rajeev is always in the middle of something. A modal gives him no way to finish it.

He has to stop everything, right now, for every alert. Even when that alert is not the most urgent thing on his screen.

He was right.

I had designed for the urgency of the alert. Not for the person receiving it.

The v1 alert as a modal. A dialog sits over the dimmed board carrying the order, twelve minutes remaining, the problem, a suggested plan, and two buttons. Nothing behind it can be reached until Rajeev answers.

How I fixed it

Alerts moved to a notification panel on the right of the screen. The alert arrives and waits. Rajeev opens it when he chooses to.

The v2 alert as a notification panel. The alert sits in a red outlined rail down the right of the board, carrying the order, twelve minutes remaining, the problem, a suggested plan with its projected finish, and the two buttons. The whole board stays live and reachable beside it.
The honest part

No numbers, only reasons

What I can claim and what I cannot

This never ran in a real kitchen. So I have no performance numbers.

What I can show is different.

Every decision in here points at something the business already measures.

I kept this map from the moment I started deciding things.

What I builtWhat it fixesBusiness impact
One screen for every order, across all brands and appsOrders sit on three tablets and nowhere togetherDelayed ordersFewer refunds and public complaints
Live cooking status for every itemCooking status exists on no screen, so he has to askDelayed orders · Handover timeLess time lost asking, more orders out
Promised time on every card, urgency hierarchyHe cannot tell which order is close to going lateDelayed ordersProblems caught while they can still be fixed
Auto slotting and auto routingReactive sequencing overloads stationsHandover timeThe same team clears more orders per rush
Auto batching surfaced by the systemNobody spots batches by hand at 80 orders an hourHandover timeCooking time saved on every matched pair
Live station load, always visibleHe cannot see station load at a glanceHandover timeNo station idle while another is buried
Delay alert with confirm or handle manuallyHe finds out an order is late only when it is already lateDelayed ordersA breach avoided instead of explained

The thing no number will catch

Automating the rule work was never only about speed. It was about giving Rajeev his attention back.

He can spend it on the problems that actually need a person.

There is no number for that.

Nobody measures how well someone uses the focus they got back.

I still think it is the most valuable thing here.

Closing

Reflections

Design the behaviour before the appearance

What the product does had to be right first. Only then could what it looks like mean anything.

Why is this collapsed. Why is this red. Why is this loud. The answer was always sitting in the behaviour.

So I was never choosing by taste alone.

Building it without writing code

I built a working dashboard without writing a line of it.

I directed the whole way. Every decision about what it does and how it behaves stayed mine.

What surprised me was how much of the work stayed with me. The thinking did not get easier.

I was wrong about using AI

I thought anything I made with AI would feel less like mine. I thought I could not show it to anyone as proof of what I can do.

That was wrong.

It is not about whether you use AI. It is about which parts you hand over.

I never asked it for a solution.

I used it where the work was slow and mechanical. Pulling research together into something I could read in one pass. Turning a design I had already decided on into a running prototype.

The decisions stayed with me the whole way.

What I would do differently

I would talk to people much earlier.

Anudeep found a real problem in a design I thought was finished. Every day I waited before showing it was a day I spent refining something I would have to change.

The rule I am taking with me

The moat is knowing how a product should behave.

AI is a good tool and it will move fast for you. Just make sure it is moving towards something you decided.