Product design case study: kitchen display system

11 min readFeb 9, 2021

The covid-19 pandemic has accelerated the digital transformation of small and medium restaurant businesses. For someone who has worked in a neighborhood café, I am glad to see this transformation because it will empower SMEs. It would help more local, authentic businesses thrive in a world that sometimes may favors global brands too often. And I think people like supporting local businesses when they can. Tech can help SMEs reach new customers and improve their operations. Restaurants can now make customers scan a QR code to access the menu and order online without waiting for the waiter. Delivery is also possible through the restaurant’ s website.

The kitchen display system (KDS) is used in the kitchen. It displays orders and prioritizes which order to make first. A KDS was once a tool only adopted by big fast food chains (Quick Service Restaurants : QSR) where large quantities of orders come in from both dine-in and delivery.

Today, more and more restaurants diversify their sales channels, by offering delivery services on top of dine-in. More and more SMEs ask third parties to install a point of sale, a KDS and a delivery system all at the same time and connected. So how to leverage online deliveries with KDS?

Today’s focus is the kitchen display system KDS adapted to small and medium restaurants.

Before jumping into design, here is a industry background first with a competition analysis. It will provide with inspiration and help understand what is needed in the KDS to help the staff as much as possible. Once the business requirements are clear, we can draft a user persona, wireframes and make a usability test with a restaurant manager. Finally, I will showcase the high fidelity prototype I have built.

1. Industry background

There are different ways for restaurants to integrate a KDS. The following graph represents the different ways of setting up delivery with a KDS:

Restaurants may be satisfied with their current kitchen process using a paper note system, or decide to fully optimize their kitchen with orders flowing from dine-in & delivery.

Ideation: Screens are not the only tech tools which optimizes orders. Rice cookers, ovens, dishwashers etc could be connected to create a smart kitchen where orders are made depending exactly on ingredient availability. Yet, this is cost-consuming for SMEs. Installing a KDS already costs a tablet/iPad and the service of a third party SaaS.

2. Competition analysis

Dodo pizza

Dodo pizza has a very integrated system. Let’s have a look on their kitchen app design. They have many tablets in their kitchen for various processes: Makeline, Packing, Dough stretching and Oven tablets.

It should be kept in mind that we are providing a low-tech solution that is less integrated and sophisticated than Dodo pizza and that caters restaurants with various size and degree of integration. Dodo is a QSR chain (quick service restaurant) that can have a all-in-one platform but we have to deal with various restaurants of various size. So it is normal that we will have an app different from dodo pizza. Also, restaurants usually have one or two persons in the kitchen and have a lesser budget, so the challenge is to include as much information as possible into on one screen only, including packing. But what we can see from Dodo is how an ideal fully integrated kitchen looks like. And we can find inspiration there.

Loyverse

Loyverse have different configurations depending on the size of the restaurant and whether it is a cafe, bar or restaurant. It may mean that the type of business should be taken into account. We can also see that the display of Loyverse is different from Dodo pizza. It is probably due to dishes being more complex and perhaps have less orders at a time, compared to the food chain.

Let’s look at the secondary data available on Loyverse. Running through comments can help identify the currents issues with KDSs:

“Very useful tool. But I wish there is someway to strike out a completed item from a ticket so we’d know which item was served or still pending. and a function to send a message from the front desk to the kitchen or vice versa”

“One suggestion might be to send a message to the POS that the food is ready.”

“Wish you can see larger picture and details of the food”

“Can you add a function to change the size of font(text)?”

Reviews suggest to optimize readability and not forget to work in tandem with the POS.

idea/problem: kitchen staff has greasy hands. So there needs to be as little as possible interactions with the screen.

Fresh KDS

Most ratings are about technical crashes of the app therefore, they will not be taken into account. The could suggest though that orders should be able to be registered in queue offline, so that orders are not messed up when online and offline.

FRESH KDS suggests a highly customizable features when setting up the kitchen display app, similarly to Loyverse.

ideation : expand an order, filter by drinks, order type etc. But this reduces efficiency and clarity when training new staff, and makes it complicated to choose which order to prioritize.

A few insights from the competition analysis:

display customizable for each restaurant.
readability.
ability to send a message to delivery rider and pos.
the ticket needs to inform if there is packing needed or not.
how to know when it is out of stock? Should not appear in KDA, should appear sooner at POS so this issue is not tackled in the KDS.
also take into account target waiting limits for different channels of sales
bump screens are good to have in a kitchen but in a small business, one or two cooks do everything so there is only one display where all info should be in.
reduce touch with screen somehow.
it could be that one person does it all in a restaurant. it is not like QSR companies.

⇒ Not all considerations are taken into account, only the ones that are believed to improve the KDS in bold. Customizing display for instance, is believed to hinder the user experience. It wastes the time of the staff by choosing which filters he or she wants to apply to orders and increase interactions with the screens, which is undesired when cooking.

3. Additional analysis

I have also made some additional analysis, to find more insights on the KDS.

Business opportunities

Make orders in time. Orders from far of the restaurants are made first to arrive at the customer’s house within 30 min for instance. Dine-in orders can be made second since it takes a shorter time to arrive at the customer.
Improve inventory. By knowing exactly how many orders will arrive in one day and know exactly what amount of ingredients need to be orders to eliminate waste and extra costs.
Decrease stress level of the employee. Knowing exactly what he has to order instead of trying to prioritize himself really helps alleviating the stress of completing orders.
Increase customer loyalty. A positive experience with timely online delivery encourages customers to come back again and order online. The app could come up with a loyalty program where users create an account for this restaurant/ a general account than enables to collect loyalty rewards from the restaurant he/she has visited.
The app could expand customer base to underserved groups.
Help the employee to plan on when to take breaks. It is easy for the cook to feel overwhelmed and pushed back a moment to cut out to finally reach the end of the shift without any break.

2. 1 Audience

Restaurant managers. They take decisions to change the queue of the orders if necessary and analyze daily sales and inventory
Kitchen staff. Execute orders. Need to know which one to prepare next, and if there is a way to pool orders together by making fries in batch for instance.
Users. Users may be able to track when their order has been submitted and when the order is estimated to arrive.

2. 2 Opportunity audience:

Offline deliveries by phone should be incorporated into the app to enable less tech savvy customers to receive deliveries. They could receive order updates by SMS.

3. Understand the customer’s context and needs (when and where)

context: at home, at work, in a social gathering, people order food. They could be ordering food on their way to home so the order time needs to optimal so that when they get home, they get the food. Therefore, they could request the food to arrive in an hour let’s say. Customers are hungry and impatiently waiting for the food. They hope it won’t take too long. Usually would order a whole meal, like a main dish, drink and dessert. There could be very big orders.

Prioritization of order = ingredient availability*a + time of preparation*b +amount of item ordered*c + distance to the customer*d

needs: prioritize orders to be completed timely. Complete as many orders as possible. Inform what order is next. Inform type of order coming in (which one should be labeled? big orders or sales channel?). Inform which order is ready to be sent out of the kitchen. Which order has been completed. Which order is getting delay.
when are where: suboptimal experiences: register when the team has performed best for acknowledgment, remember which order to do, save on inventory

4. Solution

Provide a kitchen app that changes the least possible the current process of the restaurant. But at the same time, upgrade from the current paper order process. We don’t want to give the restaurant more work, we want to give the restaurant less work to do.
Platform: 1 iPad screen.

5. Assumptions

Orders are made one by one, or maximum three at the same time due to limited staff.
The restaurant owner himself or very few people are in the kitchen.
Ideal time for food preparation is 10 minutes. In 10 minutes, the order should be completed by kitchen staff and ready to be served by the waiter or taken by the driver.

4. User persona

Based on the data collected, the user persona can be formulated.

Todd — Restaurant owner and chef

Personality:

Todd is a chef. He likes to be his own employer, so he runs his own restaurant. With the lockdown, he has been receiving a significant amount of online deliveries and is a bit overwhelmed by which order should be prioritized. His only staff is his wife, helping at the POS. He wants to install a kitchen display system to help with orders.

Paint points:

He doesn’t know how which order to complete first.
He wants to minimize touching the screen while cooking.
He doesn’t know which order is for dine-in and delivery, so when to pack and when not.
He cannot read handwritten notes sometimes.

Goal:

Make an order in less than 10 minutes.
Reduce delayed orders.

5. Task flow

I draw the user journey from the kitchen staff perspective since this user will be the one using the KDS most often. Here, I imagine Todd completing an order in the kitchen. In yellow are the steps where Todd needs to interact with the KDS.

I draw many versions of wireframes to build a KDS. I rectify the design according to feedback on restaurants and food delivery managers.

6. Usability test with wireframes

I conduct a one-to-one interview with a manager working in the food delivery company. I make him test the low-fi wireframes to validate the interface I have built and make necessary change.

Here is a low-fi wireframe in which he left feedback on features, flow and design.

Here is a later iteration of the KDS, in which the manager gave me a second round of feedback.

7. High fidelity prototype

The high-fidelity prototype can be found here: https://www.figma.com/proto/LG3jM8RZkkXYvJ8pIbd5P1/Storehub-Kitchen?node-id=5%3A4&frame-preset-name=Desktop&scaling=scale-down

The KDA homepage open with the default view. The most urgent order is opened in full view. It can be replaced by any other order the user wants to see in full by using the “enlarge” button.

The advantage of seeing the order in full is that it enables to see the additional notes marked with a *. The stars show the changes that the customer wants to make to the order.

When there are four or less orders, a full view of four orders becomes the default view. The kitchen staff has better visibility on orders and can cook in bulk.

In red are the orders that are overdue the 10 minutes of food preparation. In green are the orders being made on time. In blue, the orders Todd has yet to start.

The time since an order was placed is marked on each card. That number turn red if it passes the ten-minute mark of preparation.

The bag icon means that the order needs to be packed. The cutlery one informs it is dine-in. They are in black to increase visibility.

It is also possible to cross out the orders that have been made, to reduce confusion.

The history page enables Todd to overview which order were overdue, or canceled, and which one he has made on time. He can now measure his performance. An additional idea is to incorporate daily success rate and other gamification for performance.

Quick setting changes are also available, including colorblind mode for kitchen staff with disability.

Conclusion

The new kitchen display system helps Todd and the kitchen staff to prioritize order and improve performance.
The interface has been designed to minimize interaction: kitchen staff may have dirty hands due to cooking and want to avoid losing time touching the screen.
The icon on each order indicates whether packing or delivery is needed.
History of orders enables, gives indications on which day the staff performed best at completing orders. It can help improve performance in the future.
POS and drivers are immediately informed when Todd clicks on “Ready” so that they pick up the order asap from the kitchen without needing to communicate more.
Contrast and bigger size fonts are used to guarantee readability.

Thank you for reading!

Gwenn Le Pechoux