Combo Builder
Redesigning the combo building experience for predictability and speed of use.
Introduction
One of the many problems we hear from potential prospects is how complex our ordering experience is. We have too many screens that fulfill the same task which makes onboarding new users a bit cumbersome. My role in this project is to simplify the experience focusing on usability to help decrease the time to value.
Why are we doing this?
We are redesigning this feature to simplify our product, making it less complex and more user-friendly. This enhancement is aimed at improving usability, ensuring that our users can navigate and utilize our product more efficiently. Additionally, by streamlining our product, we aim to increase our competitiveness in the sales cycle, making it more appealing to potential customers and helping us stand out in the market.
Problems
Currently the POS has three combo screens catered towards different types of restaurant merchants. These screens perform the same task but with a minor difference in user interface. The issue is that users have to travel to an additional screen to configure the products which adds more friction in terms of navigation.
Too many screens
Existing Experience
Despite transitioning to a new screen, the original header bar element is retained which contains all of the navigation items but in a disabled state. Interestingly enough, the only way to exit this screen is located at the bottom right which is misguiding.
Misguiding Patterns
Split Combo Screen
Group Combo Screen
Linked Combo Screen
Modifier Screen
We interviewed 9 users, 5 managers and 4 cashiers, all from different businesses in Quick Service Restaurants (QSR). Here are the common trends that came across in all of our interviews.
Cashiers have cognitive overload when working on orders with multiple complex products.
Managers have found onboarding new employees to be difficult due to how many screens the user has to travel to.
UI does not match users’ mental model which causes delay when servicing a customer.
Qualitative Research
“It’s hard keeping up with the customer because the system requires us to finish a product one at a time.”
“In order to build out a combo, we have to constantly switch between the modifier and product selection screen.””
Solution
Consolidating all three screens into one unified UI and also adding the capability to edit products all in one screen.
New User Flow
Design Guidelines
From Concept to Development
UI Mapping & Lo-Fi Mockup
After getting feedback from merchants, here’s what we moved forward with.
High Fidelity Mockup
New Experience
User Feedback
Based off of front of house employees.
“We use tons of modifiers in our menu and the requirements filter helps narrow down which ones to focus on first for our cashiers.”
E&G Subs
70 Site locations
“I’d rather build a new menu layout on this screen since I have access to the modifiers without going to another screen.”
Pizza Patron
82 Site locations
“Being able to increase the quantity right in the button is convenient for us.”
Halal Guys
100 Site locations
Outcome
11000 establishments have adopted this feature into their locations and reported an increase of 70% in efficiency when generating orders that are related to combo products. The average session time was reduced from 30 minutes to 9 minutes per day.
Retrospect
There were missed opportunities to reduce design debt in this project. We offer way too much customization when it comes to menu building. That being said, more resources had to be used in order to maintain it. Looking back, there were sprints where we could’ve sunset certain features that the majority of users don’t use.
There were also features that could’ve been redesigned but due to deadlines, we had to use the existing experience as a placeholder. We could’ve save a bit of resources since we’re now going back and redesigning it.
Next Steps
The next step would be reusing the components built into this project and moving it over to the main ordering experience. The project was the beginning of a redesign initiative of revamping the traditional ordering experience in the Point of Sale.
Interested in more? Check out the other things I did!
Centralized Hub for Customer Orders
Created a management queue experience that enables users to display all incoming customer orders for different channels.
Revel System Design System
A list of components that I created for all of my major projects.
