Aloha Kitchen Display System:
Color Coded Modifiers
The Delicate Balance of Using Multiple Colors on One Screen
Role Product Designer, December 2024
Team 2 UX Designers, 1 Product Manager, 1 Product Owner, 20+ Developers
Background
For any kitchen, it is essential for the front and back of house staff to be able to view, track and fulfill orders. A kitchen display system (KDS), allows for staff to do this digitally rather than having printed or handwritten tickets. KDS are often unique to a kitchen’s setup and are also customized for ticket layouts, timers and notifications. In this project, I was tasked with redesigning the KDS tickets to include additional colors in order to highlight menu items and modified menu items. This case study explores the challenge of using multiple colors on a single screen display.
Understanding the Customer’s Problem
After the ticket layouts were redesigned a couple years ago, the feedback we received from many customers was that they wish they had the ability to highlight modified menu items in order to make them visually attractive and therefore not easily missed as orders were being made. As you can see below, the basic ticket layout has three colors: red (threshold time exceeded), orange (threshold time approaching), grey (no threshold time triggered). In addition add-ons, voided items and “no” item colors are sprinkled throughout the ticket with similar error and warning colors. We knew that having these types of modifiers would not be common, and therefore made sense to reuse these colors to signify the more “negative” actions.
So, why did the customers need additional differentiators in the tickets? Customers explained that during lunch or dinner rushes, the ability to quickly identify menu modifiers—not just the “negative” actions— was crucial to ensure orders were fulfilled with minimal mistakes.
Brainstorming and Testing
Each ticket’s dimensions are 470 x 452 px, so I went through an exhausting list of iterations that used changes to font weight and size, increased or decreased indentations, and iconography. Out of all these iterations, the designs that affected our real estate issue the least was…color.
Designers know that when it comes to the use of colors, outside of data visualizations, you want to limit your color palette to 3-4 colors in order to avoid overwhelming users. Using too many colors can often dilute visual clarity and can be too distracting. In addition, my team and I decided that this particular feature could be turned on or off, so we could build this feature for customers who wanted to use color-coded modifiers without penalizing those who did not.
Before getting to work on the designs, we worked with our accessibility designer and design system designer to come up with a range of colors to ensure compliance with accessibility standards.
Then we spent some time playing around with different colors, hues, saturations, as well as the placement of the colors in different forms. We decided to go with highlighting the text rather than using the colors for the font because adhering to accessibility standards would be much more challenging.
Solution
After conducting some testing, we found that the design that performed the best used the brighter colors that highlighted only the text and not the entire row. Users will turn on color coding under settings, assign different menu items or modifiers with the color of their choosing and are free to build whatever combination of categories and colors they wish.
Example KDS with only color-coded modifiers:
Example KDS with only color-coded parent items + modifiers:
Key Takeaways
Are we giving too much power to the user? And thus creating a bad experience—even one of the user’s own making? When I first started to design this out, I was gritting my teeth because adding so much color onto a single screen went against every fiber of my designer being. Since this feature is highly customizable, I wondered whether a user’s experience could go from bad to worse due to the excessive use of colors and thus render the feature worthless. While our deadline did not allow for further use and testing of the colors, I wondered if there was a “threshold” for how much was too much. So until then…
God I really hope no one ever uses all the colors...