"Build your own" for kiosk

Brightloom is a technology company powering other restaurants’ digital ordering experiences by providing white-label kiosk apps and mobile apps. In this project, I was challenged to redesign the item customization flow under the in-store kiosk framework to deliver a more engaging and fun "make your own" experience.
Audience
Fast casual restaurants and their customers
My role
Work as the only designer on this project and run the entire design process from initial research to implementation support

Problem statement

Many fast casual restaurants like Chipotle and Sweetgreens offer "build your own" options to accomodate different user needs. When ordering in-store, all selections/customizations are done via face-to-face communication.
Brightloom wants to provide a digital kiosk ordering solution to increase ordering speed and accuracy and lower labor costs for fast-casual restaurants.

Research

Replacing in-person ordering with kiosk ordering reduces a lot of communication pressure and helps new customers visualize what they are ordering. However, digital ordering also brings new challenges:
Users are exposed to a huge amount of information all the time
Users’ decision-making modals is no longer linear
Using Chipotle’s menu as an example, when using a kiosk to order, a typical user journey looks like
Because the kiosk presents more information and surfaces more decisions, users are more likely to look for the optimal food to meet their personal goals. This means the customization interface needs to be supportive and guiding.

Concepts

To untangle this problem, I first created a diagram to show users' decision-making at different granularity levels and mapped out potential user needs at each level.

Modifiers level – streamline the modifier browsing experience

It’s very common that a "build your own" menu has 100+ modifiers. I decided to use vertical scrolling as the main interaction technique to reduce the jarring feeling of screen transitions. This way, users can easily scroll up and down to see all modifier options:
List View
Gallery View
Two basic layouts are gallery view and list view. Because I believe that beautiful pictures of food are key to the experience, I decided to use gallery view, which allows users to browse images instead of reading a bunch of text.

Categories – support selection optimization

While building a dish, users are likely to go through some back and forth to optimize their selections. I added category navigation to help users transition between categories and a summary of what they had selected so far as a reference.
Navigation
Selection summary
Combined in one screen
Since category navigation and selection summary have a lot of overlapping information, I came up with the idea of combing them to use the limited screen space more effectively. This way, all category labels can be used as links to different categories and the entire section can be used to show users what they have added to their meal.

General information – help meet personal goals

Sometimes, users may have very specific goals like budgeting the cost or meeting nutritional goals. To help with that, I decided to pull all general information and actions into a footer.
The result is an interface that is assembled from 3 modular pieces to match the user’s decision-making levels: the customization option list, the summary/navigation sidebar and global information/action footer.

Testing and iteration

To get more customer feedback in the early design phrase, I ran two rounds of user testing with 20 total participants to verify my decisions. During testing, all participants were asked to use the prototype to build a bowl they wanted for lunch. All users were able to finish the task smoothly but I noticed that users had different expections of sidebar.
I tested two versions of the interface with different sidebar positions and saw many users were confused by the summary/navigation sidebar.
Sidebar on the left, like an e-commerce website’s menu
20% didn't use the navigation bar
40% didn’t notice the order summary section
Sidebar on the right, like a shopping cart summary
40% didn't use the navigation bar
10% didn’t notice the order summary section
After testing, I realized that when the sidebar is on the left, it matches people’s expectations of an e-commerce website’s menu, so users expect it to be navigation but don’t understand it’s also a summary. When the sidebar is on the right, it’s closer to a shopping cart showing order summary information. Because users can easily scroll through the modifier list already, I prioritized order summary over navigation.
After releasing this feature, I received additional feedback from both customers and restaurant partners that they would like an image-based order summary view to reduce reading effort.
I did some exploration to see how I may be able to improve the order summary view in the next version of customization.

Final Design and Achievement

There are thousands of real-world restaurant problems in designing a "build your own" customization feature. To release sooner, I finalized an MVP version for implementation.
The final design has been deployed to all eatsa and Roti mediterranean grill locations. With the new customization feature, we saw a 20% increase in order ticket value. It also helped pitch our kiosk technology to a new Deliveroo concept in Singapore and a Paramount Boxed concept in Canada.