Simplifying the So Famous Menu: A UX Case Study on Reducing Ordering Time

User Research
Visual Design
Prototype
User Testing & Iterations
Duration: 4 weeks
Completed: Oct 2022
Overview
So Famous is a takeout-exclusive authentic Chinese restaurant that offers its customers a generous amount of choices to design their meals freely.

The goal of this project was to understand the thought process of potential customers and simplify the complex ordering process on limited screen real estate.

Background

So Famous had a goal when constructing their menu for their upcoming restaurant. They wanted to enable their customers to have the freedom to customize their meals. I was fortunate to be a part of this menu design project, as I contributed to the ordering process from a design perspective. 

As the sole designer on this project, I constructed a sound research plan to understand the needs of frequent takeout customers, developed prototypes to test with potential customers, and designed visual assets for the menu based on the branding style guide I previously established for So Famous. 

Some key achievements are:

1) Applying UX design process to a graphic design problem. Intensive utilization of user-centric design philosophy to approach menu design. 

2) Presenting data. Presenting data and proposals to stakeholders. I provided valuable information when stakeholders voiced their concerns about the validity of the data and convinced them to accept my research-supported approach.

3) Working with limitations. The project was limited to 3 digital screen panels, which was restricted to the number of menu offerings. 

4) Improved ordering time. Improving the menu's clarity made the ordering process more intuitive, and the average time needed was reduced.

Discovery

The interview process:

To understand the ordering process of takeout restaurants like Thai Express, Shanghai 360, and Teriyaki. I constructed an interview plan which included short open-ended questions and survey questions to gather data from 10 frequent takeout customers. I also developed a user testing plan tested by the same candidates for the original menu that the owners of So Famous initially created.
The insights I gathered from the interviews and user tests were:

1) Order process was too complex. The ordering process from the original menu gave the users too much information, creating confusion for the customers. 

2) Lack of menu clarity leads to frustration. Takeout customers appreciate their time as the priority. It was revealed in the interviews that lack of menu clarity leads to frustration, in turn making customers less likely to return. 

3) Pictures are worth a thousand words. Most competitors' menus contain large product shots to tell customers what the product is. Iconography also greatly influenced the convey of spice level, peanut allergy, and vegetarian/vegan options. Users found these to be very helpful when choosing their meals.

4) Combos don't always promote sales. The owners initially planned to implement a plethora of combos to the menu. However, almost 80% of the interviewees would rather pick their own meal than choose a combo or on-sale item.

Define the Issue

Problem Statement:

Takeout customers that appreciate their time find the existing menu to be too complex and lacks clarity, in turn feels frustrated and less likely to return.

Objectives and Approach

By reviewing the insights I gathered through user research, there were crucial things that I needed to tackle (besides making it look aesthetically pleasing) for the menu to be successful:

1) Provide an "Uber-like" ordering experience without physically interacting with the screens. Customers should be able to customize a meal by mentally making choices as they go through the menu. 

2) Add iconography on top of telling images. A lot of the complexity could be simplified with iconography and images to convey spice level, peanut allergy, and vegetarian/vegan options.

3) Simplify the ordering process. The current menu needs to be simplified. To make it easier for customers to know what choices could be paired together, I created unique category names; "So Full Pail" for made-to-order dishes; and "So Quick Pail" for freshly made, warmer dishes.

Prototype, Test, and Iterate

When coming up with the menu's wireframes, several criteria needed to be met to move on to a low-fidelity prototype.

1) Clear instructions for choices. Menu offering combinations must be clearly instructed to reduce customer confusion when placing an order.

2) Minimal but efficient screen real estate usage. No wasted space while keeping it simple. Achieving this was challenging due to the abundance of choices on the menu.

3) Type size in relation to viewing distance. Text on the menu must remain legible since the screens were around 10ft above ground and 8ft away from the counter. 

When the first round of wireframes was completed, they were ready for testing in the restaurant before opening.
Several key feedback came up in the first round of testing. 

1) Text size needed to be even bigger. The text was too small when viewed at the counter in a real-world scenario. This issue was the most significant roadblock for the design.

2) The process was more straightforward but could still be improved. The creation of the product names "So Full Pail" and "So Quick Pail" improved the menu clarity, but the combination of Stir Fried Entree and Rice & Noodles was not mentioned on the menu.

3) The So Full Pail and So Quick Pail products were easy to remember and on brand. Positive feedback from the owners and testers regarding the naming of the products, reminding them of McDonald's use of "Mc" in McFlurry and McChicken. The names were also indicative of how the dishes were made and how quickly or sizeable the choices were.

4) Unexpected adjustments made by owners. To gather real-world data and reduce the abundance of menu offerings, the owners proactively soft-launched their restaurant to see what choices were less popular. This affected the structure of the design's next iteration.

With these insights, more iterations were made to the design. A few rounds of wireframes and low-fidelity prototypes were made to refine the text size issue. 

Final Design

Data gathered by owners from their soft launch warranted the removal of several menu offerings. The feedback on the final designs from customers was as follows:

1) The coloured rings representing the spice level are creative and intuitive. This design choice was added in one of the iterations to reduce screen real estate usage that an icon would otherwise occupy.

2) The "Entree and Base" label made it clear. The label made it easier to understand the composition of the offering, which needed to be evident in previous iterations.

3) Colour choices. The continuation of colours between the screens made it clear what dishes belong in which pail. Differentiating colours for labels and pricing allowed customers to process the menu quickly.

Takeaway

Key takeaways from this project are that:

1) User-centric design is king. It was apparent to me while working on this project that this design approach should be applied to everything beyond the digital space. Potential applications include monitoring customer traffic flow to manipulate product placement in a store or even the existing ketchup bottle design change. 

2) Compromises needed to be made to move forward. We adjusted our plans to accommodate insights derived from research data and determine tradeoffs.

3) Challenge yourself to grow. 
Before taking on this project, I emphasized technical and design skills. However, this project taught me how to deal with conflict, unexpected situations, and deliver a desired output in a tight timeline.