Menu

A menu design for an app and TV screens, providing pleasant menu experiences and quicker in-store services for campus cafe shop. 

CONTEXT  
Google Design Challenge

TIMELINE
7 Days (2018.3)

PROCESS
User Research
Ideation
Conceptual Testing
Iteration
Usability Testing

METHODS
Interview
Contextual Inquiry
Card Sorting
Rapid Prototyping

Prompt

Design the menu experience for the new center’s cafe, including today’s menu, ingredients, food allergens and prices.

What's happening now?

RESEARCH INSIGHT

Customers are ordering the same food mostly because they don’t read the menu and the menu is not very helpful for them to make decisions.

Cafe employees are exhausted with the long ordering line because they have to explain the same information again and again.

Design Concept

Help customers to make decisions with a picture-based menu, providing recommendations, customizations, and preference filter.

Enable in-store quick orders through a web preview menu and generated order code, using waiting time to provide customers with more in-time information and quicker service.

Persona

How can the design benefit both customers and cafe employees?

Customer Journey Map

Scenario 1: Online order through the App

Doing

1.Browse

2.Choose

3.Customize

Workflow

Scenario 2: In-store Quick Order through a webpage

Behavior

1.Scan Poster 

2.Preview

3.Choose

4.Order Code

That's it!

Workflow

Behind the Design

KICK OFF

I started this project from understanding the prompt. The red line highlighted my methods while the question marks led my research and design focus.

Research 

METHODS

These in-field researches helped me understand what's going on about menu from both internal and external perspectives. The card sorting helped me understand costumers priorities.

CONNECT THE DOTS

MARKET RESEARCH

My design niche is "grab-and-go" on-campus cafe shop. Finding other exemplars helped me get inspirations about menu reviewing and ordering.

Test 

Conceptual testings with 3 users helped me to improve the filter interaction.

1. Browsing the menu, find your what you want to order for lunch.
2. You want to order a sandwich but you are allergic to dairy. What would you do?

2 out of 3 people I tested with had the same confusion:"why when I filter out dairy, some sandwiches with eggs are still there? What's that black triangle?"

The reason why some sandwiches with eggs are still here is because the egg can be swapped during customization. Somehow this is not clear to users. Therefore in the food card, I list ingredient in two categories: changeable and not changeable. And after users click on the indicator, a pop up will show up, leading them to the customization.

What to improve?

Don't spend too much time on initial research. Research and iteration should go hand-in-hand. Spend more time on presentation.

Do more research on how cafe shop handle on-line and in-store orders at the same time. Their sequencing of preparing food could influence user experience.

I am a little bit stressed out as the deadline approaching. Without all the helps from friends, I can't make it. Thanks Julia Zhu and Kathy Li for providing suggestions about presentation! Thanks Aditya More for suggesting how to export high quality gif! Thanks Ruoxun Chen for providing good insights during user testing! 

CASE STUDIES--

Brand 

2018.5-2018.8 

UX/UI Design: An inline brand style system to accelerate MailChimp users' market content creation.

Group 

2019.1

UX/UI Design: A redesign of Yelp collection for groups.

Donor

2017.10-2018.4 

Product Design: An interactive donation box for CHI 2018

Menu 

2018.3 

UX/UI Design: A pleasant menu experiences and quicker in-store services for campus cafe shop.

Picker 

2017.10 

UX Design: A redesign of a template picker for online diagramming

Web Memo 

UX Design: A browser plugin for online courses

Cumulo

2016.9-2016.11 

UX Research: An educational kids' game for IBM

Lidro 

2015.5-2016.7 

Product Design: An intelligent product for home-made fruit wine

Web Memo 

UX Design: A browser plugin for online courses