Diego Valencia
Designer

Kitchen Display Redesign

Helping kitchens work on new orders at a faster pace. Project in collaboration with ZagaLabs LLC.

Kitchen United MIX is the future of takeout & delivery, the  first “Multi-Restaurant Ordering” to-go experience in the US. It’s the only destination that allows foodie fans who love variety to order meals from 10+ restaurants, all on the same bill.

KU Facebook Page

KU Facebook Page

Discovery

KU had the KDS running and in production but they knew that its experience, usability and interface had room for improvement. 

Current members were having difficulties while using it and the look and feel was not appealing to them.

The alarms and order statuses in general were not things that KU had figured out yet and they were iterating without having a clear way to go.

I joined Zagalabs and we came up with a strong solution for kitchen members to understand orders flow and deliver at a faster pace. 

I was responsible for the definition of the order status flow, experience and interface for the new KDS.

Old version of the KDS

Old version of the KDS

Usability issues

· Considering that the screen is placed in a high view of the kitchen, having the buttons "Total" and "Schedule" at the top of the screen make it difficult for short members to reach them. Likewise with the pagination.

· Orders don't scroll within the tiles, that means that orders are divided into as many tiles as needed to display all the items.

· Buttons "done" and "reprint" look like two main call to actions. Speed is everything for kitchen members and this is confusing as to know which action they need to take.

· Order tiles are strictly next to each other with no room to breathe. Having many orders in the same screens makes it overwhelming.

· Hierarchy of information was not clear.

Research

The team at KU did some research in order the get a better understanding of user pain points using the KDS.

The results allowed us to focus our efforts in delivering a product that solve their particular needs.

Discovery results and prioritization done by the KU team

Discovery results and prioritization done by the KU team

Flow for order status
Orders flow proposal

Orders flow proposal

After understanding the current flow for orders and having a couple of revisions and iterations, I designed this new flow.

Status names are displayed in colors in the flow. Same colors are going to apply in the interface to indicate queue, cooking, packing and completed orders and alarms triggers.

This flow had room for improvement so I iterated this keeping in mind the status for members, orders and backend. Also considering KDS order flow impact the EXPO Center view.

Final flow of orders

Final flow of orders

Design challenges

· Give a visual lift to reflect a more modern look and integrate with the KU brand identity.

· Evaluate the overall interface for usability and user experience: hierarchy, button sizes, placement for elements to help users gather relevant information without much effort.

· Improve interface for better touch interactions, making sure interaction elements are focused on specific areas and not spread across the whole screen.

· Improve visibility for products and orders and legibility for all the texts and information.

Wireframes
New KDS wireframes

New KDS wireframes

Having the orders flow in place and recommendations from the KU team based on user interviews, I designed a new architecture for the KDS.

· Hierarchy is way more clear. 

· Order tiles have room to breathe and differentiate from each other. Moreover, they won't have to breakdown into different tiles due to a scroll indicator on orders that have lots of items.

· Details from an order such as member, ID, time due, etc, were placed in a way that did not interfere with users flow: changing status and get their work done.

· Order filters by status and pagination are now at the bottom of the screen to improve touch interaction for all members of the kitchen.

· The only call to action they have to visualize faster is the one that allow them to change the status of the order. Reprint button is secondary.

This version of the wireframes looked pretty solid but had two things missing: 1) the number of the order is not relevant but the ID and time due, and 2) the bags flow was not ready yet. 

As for the bags, kitchen members had mentioned that they felt  frustrated that it took them to another screen to select the number of bags. In this wireframes, I considered adding this flow within the same order tile but the way that they close an order was not finished so I iterated that in the interface design version.

Final solution
Final version of the KDS

Final version of the KDS

The interface addresses the pain points of users and gives them a better understanding of the order flows as follows:

· More clean readability of the information.

· Order ID and time due have higher visibility than the rest of details of an order.

· Order statues and alarms are more clear -these are triggered depending on time due or priority (e.g refired orders).

Bags flow

Kitchen members felt frustrated that it took them to another screen to select the number of bags.

In this new KDS they can select the number of bags right from the same order tile and its design is pretty straightforward.

I kept an android password style since its familiar to most of users. 

After they select at least one bag, the CTA is ready to allow them to complete the order and move it to the completed list. 

I also placed an arrow to go back to review the order in case they need to double check the items the order has to make sure they are putting the correct number of bags.

Select bags - review order - digit pressed

Select bags - review order - digit pressed