Kiosk Navigation

Research, design, testing: 6 weeks

Designed a clear and simple navigation system that allows restaurant customers to find and add food easily in a kiosk. The navigation system will be deployed in four restaurant chains across the country.

Problem statement

eatsa pivoted to selling its technology to restaurants like Ro̅ti and Wow Bao. The first problem we faced was the huge range of different menu structures used by different restaurants:

As such, the main problem for the user-facing kiosk's navigation system is handling this range of category/sub-category/item menu types.

Research

When the user enters the kiosk ordering app, navigation is the first feature they will interact with. If navigating the kiosk is uncomfortable, they may stop ordering immediately. Using Buffalo Wild Wing's menu as an example, the user journey may be:

For users, the biggest pain point is how to digest all the information in a short amount of time. In actual restaurant contexts, there may be people waiting in line that pressure them to speed up.

Concept

One of the most flexible and clear concepts that came to my mind was one that kept category, subcategory and item in three separate screens. This gives us both maximum flexibility to handle complex menus and clarity by only asking the user one question at one time.

The downside is that for a 3-level menu, it takes 2 clicks to get to an item and 2 more clicks to get back to the top level. To order a sandwich, drink and side the user must make 10 clicks minimum, even if they know exactly what they're looking for.

The design also makes it hard for users who want to browse the food options before making a decision. To solve these problems, I came up with another idea of listing out all subcategories under its category directly.

Now, it's only 5 clicks to make that same order. This combined concept also allows the user to see all the categories and subcategories in one screen. In a quick user testing in the office, 6 out of 8 people preferred the combined concept over the separated concept.

Card design

In both concepts, cards play an essential role in the entire project To make the abstract concept of cards more concrete, I broke the problem down into card size and card content.

01 Card size

There are endless combinations of valid widths and heights for cards. To keep card dimensions manageable, I picked a framework that restricted us to two options for each dimension, giving us four basic card types.

With these four card types, the navigation system can support any menu. What's more, not all categories need to have the same amount of emphasis on the menu. This design allows restaurants to put their most popular categories in bigger cards and de-emphasize less important categories.

02 Card content

Since navigation is the first touchpoint in the entire kiosk ordering experience, the look-and-feel of the cards leaves a strong impression of the brand for users. I took a step back to create some mocks for how these 4 card sizes would look for real menus.

Brand elements such as color, typeface, etc. convey a restaurant's tone and voice. A crazy idea I had was that instead of programming the text and layout inside each card, we would just make the entire card an image.

In 2-level menus, there is only one screen and all the items scroll into view. In 3-level menus with subcategories, categories are simply wide, short cards that are unclickable. This allows restaurants to use non-system fonts in the menu easily to stay on-brand and is flexible enough to handle different menu structures.

Final design

As the last design step, I integrated components like user account, shopping cart and logo into the interface. There is still an edge case in this design: it's possible for the bottom of the screen to not cut off an image, failing to indicate that the menu is vertically scrollable. To address that, I added a slider bar showing what percentage of the menu has been displayed.

To quickly get more actual user insights, I ran a user testing with 10 eatsa customers to verify the two biggest assumptions in this design: first, users can understand and use vertical scrolling, and second, users can find and add multiple items. The testing flow is described below:

9 out of 10 participants were able to use vertical scrolling to see the entire menu and most of them noticed the slider bar on the right side. All participants added three items successfully. I also built a quick mockup for Wow Bao to test out the flexibility of this design.

The cards in these produce an interface that is easy to visually parse while remaining straightforward for engineers to implement. Combined with the user testing that proves the usability of the overall system, this design should be able to support many future customers.