Designing an app that streamlines restaurant orders between front-of-house and kitchen staff.
About the project
Ancon who provides point of sales services to leading restaurants & bars, wanted to digitise their current kitchen ticketing flow by introducing a kitchen display system as part of their ecosystem: POS application with web, mobile and kiosk applications.
Starting with Client Discussions
To kick off the project, I've had multiple product owner calls, workshops, and brainstorming sessions with the help of the BA & PM, to understand the exact idea behind the requirement of the client, since we are designing this as a major part of their eco-system which contains a bunch of applications which are already in use with real world users.
So the concise summary of all the points covered in the Product Owner calls is,
Necessity of a solution in which you can visualise the entire workflows of a kitchen ticket. Solution should be communicated seamlessly with multiple kitchens.
Clarifying the business impact
The main concept is to introduce it as an additional application seamlessly integrated into their existing ecosystem, with the ultimate goal of presenting it to their current POS customers.
Understanding the Problem
After our initial discussions, we have pinpointed the problem based on the requirements and have also identified the corresponding business requirements.
Restaurant managers, front-of-house & kitchen staff face inefficient order management, execution, and processing, leading to discrepancies and errors, ultimately disappointing customers with delays.
Always missing ticket details
Poor communication among front of house & kitchen staff
Lost track of orders and order prioritisation
Defining my task
As the result of all these discussions and findings, I was tasked to begin the design process from scratch.
I was assigned to design an application from scratch where you can, display & manage kitchen orders in order to fulfil their kitchen display system need.
Understanding the current ticketing flow
I conducted a thorough examination of the existing traditional kitchen ticketing workflow to pinpoint the key areas requiring our attention. This foundational understanding was crucial for accurately interpreting insights from subsequent stages of the process.
Upon reviewing the workflow, I was able to establish clear connections between the significant areas that require attention and the specific steps within the flow. So this helped me when talking to users.
Talking to existing users
As the next step, I decided to talk to users, because when transitioning from the traditional to the digital method, gathering insights from those who are already using the traditional method is crucial.
As I identified, there were 3 possible user groups,
Kitchen Staff
Front of house staff
Restaurant Managers
According to the nature of the project, we conducted user interviews remotely with the help of the team from client’s side, with a qualitative approach by having open ended questions & discussions.
In the interview process, I opted for a qualitative open-ended questionnaire approach to encourage users to share their experiences openly, providing detailed and context-specific insights. Importantly, this method aimed to minimise the introduction of bias into the interview process.
Questions were like,
What are your biggest concerns about using printed tickets as kitchen
ticketing ?
Was it easier to communicate the order through a printed ticket or, were there any difficulties you faced ? How is the overall experience ?
According to your experience, what should be improved in the current ticket flow?
If you could change one thing about ticket printing flow, what would it be?
There is this one thing that they always highlighted!
“ We see the kitchen ticket as a to-do list with no option to tick it off “
Through insights from user interviews, we identified the primary factors driving the requirements: management, communication, and timing across three user groups.
Ideating possible solutions
So as the next step, my focus shifted to transforming the old ticketing flow into a new application flow, ensuring alignment with the insights of different user groups.
After team discussions, we pinpointed the steps that need improvement and identified areas that we can integrate with these steps from the 1st version.
“Send ticket to kitchen” step - In this step, it should give control to the front of house staff, allowing manual ticket sending, offering the flexibility to prioritise and monitor orders sent to the kitchen.
“View the ticket” step - In this step from the kitchen perspective, the staff could acknowledge viewing a ticket, indicating the initiation of item preparation to the front of house.
“Mark ticket completion” step - In this step it should enable marking individual items as completed, providing flexibility rather than waiting for the entire order to be finished.
Mark ticket items completion & Mark ticket Completion steps - When marking individual items or the entire ticket as prepared, there should be an additional step to indicate that the items are ready for service.
Introducing Master Display
After analysing all level of user flows, we added an extra layer to the ticketing workflow to cover, manage, visualise and track order tickets called Master Display which act as a gatekeeper to all the order tickets coming from the POS.
Building upon the second version, we came up with a comprehensive version that includes all the steps. Based on that we identified the main components of the application.
Meanwhile I just started sketching out possible interfaces and components as a heads up to the next step which is designing the UIs. Actually I’m a huge believer in starting on paper.
I really like to start with paper because it prevents me from diving into unnecessary details too early in the process and it keeps the focus on essential features and functionalities, preventing over-complication of the design.
Wire-framing and Evaluating them
So with all the insights, I crafted the mid-fidelity wireframes. Actually in this step I created the wireframe for the entire application flow, in the purpose of,
Mapping it out and bringing it in to the discussion table just to make sure everyone is on the same page about the application flow
To identify potential improvements before moving on to the UI design phase
Feature identification and prioritisation
Designing UIs
Then, with the findings from the wire framing, keeping it as the foundation, I initiated the design process with the most important component: the ticket design. So initially, I just drafted the overall layout and started with the ticket design.
Ticket Design: Initial iterations
These were initial iterations, I designed for the ticket card for both master and kitchen displays. But soon realised there are certain issues here.
Lack of item details - When it comes to item details, it just the item name. In this case, user should be able to see additional information like, add-ons or extra ingredients right here in the ticket card itself.
Ticket status is not visually distinguished enough - Even the colour codes are used as orange for preparing, red for delayed & Green for completed tickets, they should be more visible.
Marked items & other details like, ticketed time, order type etc.. are not included and visually distinguished enough.
After taking the above issues into consideration, I worked on a few other iterations. I shared those iterations with the team, product manager and the design lead to get their feedback. Then we came with this version.
Ticket Design - Selected design
Ensuring the consistent design between the master & kitchen display
Because in small restaurants, it's common for kitchen staff to occasionally work at the front and vice versa, I wanted to maintain the visual design consistency between the Master and Kitchen display interface designs. We had several discussions and brainstorming sessions with my design lead on this and, then I moved to designs
Master Display Design
After discussions with the client and internal reviews revealed user flow issues. New client requirements also emerged.
Partially prepared Items to be displayed in "ready for pick up" section - Need a way to indicate and mark "Ready", when some of the items from an order is ready to pick up.
Lack of filtration options - To enable the front office staff to monitor tickets according to their status, it is necessary to have a method for filtering and sorting them.
Display more tickets - Even the number of tickets that we show increases with the screen size of the device, It may necessary to show more tickets in the current layout to improve the user's experience & it can increase productivity and efficiency.
Adding partially prepared order details & filtration options
Kitchen Display Design
By incorporating learnings gained from master display designs and taking into account input from both the team and the client, it was easy to swiftly pinpoint and address some of the user experience concerns and make improvements with minimal iterations.
Section to view all items to be prepared - With a comprehensive list of items to be prepared enables staff to determine the quantity of each item required and the corresponding ticket to which it belongs. This information facilitates efficient decision-making regarding the preparation process.
Parallel ticket viewing - With a way to view multiple tickets simultaneously, it is possible for the user to view each ticket's details, without having to switch back and forth between them. So several staff members can work on several tickets/items.
Prototyping and testing
After all the design enhancements and changes, I just created a high fidelity prototype in order to Visualise the complete flow and information architecture of the app and as a simple tool for our first user test with in-house team mates.
I chose to use Cognitive walkthrough, method with our cross-functional team comprising BA, developers, QAs, and also my lead.
So the found concerns were,
Layout Options Preferences - Some users prefer displaying more tickets on a single page, even if it means showing fewer details. They opt for an expanded view through long-press when viewing a higher number of tickets.
Increasing space between touch targets - Users experienced difficulties tapping individual items due to their fast-paced work. To address this, we increased the spacing between touch targets on item rows in the ticket card.
Current Design: Improved KDS
After we finished building the above designs, we just tested it internally with stakeholders and very few selected users with the help of the client in order to have some idea on usability.
Then after a few iterations and a few design feedback rounds with the rest of the team, we did some overall improvements on following things.
Enhanced detailed views for tickets
Improved item status through the system
Interaction & Accessibility Improvements
Finalised Designs
Master Display - Viewing, managing, tracking the statuses of all the tickets in a single view as the central monitoring point.
Item mark as picked up - Viewing, managing, tracking the statuses of all the tickets in a single view as the central monitoring point.
Detail View of a ticket - A full detailed view of item journey across kitchens, providing insight into multi-kitchen progress and overall ticket status.
Some of the interactions
Working with Engineers
As we initiated the development of a brand new product from scratch, which is set to become a significant component of an existing system's ecosystem, we faced numerous technical obstacles and hurdles from the development team.
So I collaborated closely with the team, ensuring their involvement throughout the product's design process.Consequently, when it comes to the developer handover, I meticulously created handoff specification documents including style guide, design system documentation for all the designs and also for all modifications and improvements.
Impact
28%
Adopted by 28% of their existing customer base in 2 weeks.
34%
Boosted those restaurant kitchen operational efficiency by 34%.
What I've learned
Importance of prioritising legacy methods - I've learnt importance of retaining elements from the existing user methods when introducing a new design solution.
Importance of feature prioritisation - While it's possible to incorporate numerous features into a design solution, I learned that meticulously identifying features directly impacts the user experience.
Visual language & Interaction designing for efficiency - I've learnt the profound impact of maintaining consistent visual language and well-defined interactions with proper feedbacks to increase the usability of the solution.
Importance of Adaptability and Flexibility - I've learnt how important it is to make the design solution adapt to different scenarios & situations. As an example, the kitchen display solution should be able to be customised to accommodate unique kitchens.
That's a wrap. Thank you for reading!
Other stories
