Many fast-casual restaurants have both preset menu options (burrito bowl), presets with customizations (burrito bowl, substitute jack cheese with goat cheese) and build-your-own options.
However, in most restaurants, customizations are done in-store via face-to-face communication. For this project, we wanted to handle the self-ordering experience for fast-casual restaurants with varying customization levels in a 9.7 inch kiosk.
Through early-stage research via talking to the eatsa customer center manager, reviewing customer feedback records, and critiquing other restaurants' web and mobile food customization designs, I created a rough user journey to better understand this complex process.
Though the analysis, I realized that the biggest pain point is the overwhelming amount of information. With so many sources of information being presented simultaneously to them, many users have trouble processing it to the point they confidently make any decisions.
I first listed out all the components needed for this feature and put them into five categories:
I started with the most important section: the customization options list. To deal with difficulty in browsing the menu, I wanted to reduce the jarring feeling of screen transitions by using vertical scrolling as the main interaction technique. This way, the user can easily scroll up and down to see all the options:
I applied vertical scrolling to two basic concepts: a gallery view and a list view. The gallery view provides more space for food photos than the list view, which allows the user to browse the options instead of reading a bunch of text. It's just more fun to browse photos.
I realized that there is a lot of overlapping information in the navigation and selection views. To use the limited screen space more productively, I came up with the idea of combining them into the same section.
This way, all title texts 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.
Information collection happens thoughout the entire decision-making process for the user. This raises the importance of a clear visual hierarchy that helps the user locate information easily. I introduced a footer for price, nutrition and CTA.
The result is an interface that is assembled from 3 modular pieces: the customization options list, the summary/navigation and global information/action.
To get more customer feedback in the early design phrase, I ran two rounds of user testing with 20 participants to verify my decisions. The testing process is summarized below:
All participants started scrolling the interface immediately. They understood how to select, add and deselect modifiers. They also seemed to be able to locate information. However, many users were confused by the summary and navigation designs.
After all the testing, I realized that when the summary and navigation are on the left side, it matches people's expectations of an e-commerce website's menu, so users realize they can use it for navigation but don't understand that it's also their order summary. When the sidebar is on the right, it's closer to a shopping cart, so they understand that it's their selection summary but don't use it to navigate. Because users can easily scroll through the menu already, I prioritized order summary over navigation.
In the final design above, the sidebar is on the right size with a big "What's inside" title to help make the "order summary" point even more clear to the user. I also added a title to each category to help the user understand which category they are currently in.
The final design has been deployed at all eatsa locations and helped pitch our kiosk technology to a nationwide restaurant, which clearly proved the value and flexibility of this design.