the taste club. - Menu App Design


 Description

Design project completed for Google UX Design Professional Certificate

Role in Project

Designing from conception to delivery
(Conducting interviews, wireframing, prototyping, conducting usability studies and iterating on designs)


Design prompt: Design a food menu app for a restaurant 

Goal: To design a menu app that enables diners to order easily


Research

I conducted interviews to gain more understanding on the needs of the potential users, the usage of menu apps, and how the potential users find their previous experiences with other menu apps. Responses collected from the interviews revealed several pain points:

  • Insufficient information on the menu makes it hard to order from

  • For users with dietary requirements, it is difficult to determine whether a certain dish is suitable for them, especially when the ingredients are not listed, so that they might need extra assistance from servers at the restaurant

  • If menu app is not easy and efficient to use, for example with unclear navigation or structure, users would prefer printed menus

Persona

Journey Map

Insights

  • Adequate information: One of the main user needs is to have adequate information in the menu app. Users would like to know about the ingredients used, how the dishes look like so as to decide what to order. Especially for diners with diet requirements, it is important to have details of the dishes listed so that they do not need to ask for extra assistance while ordering.

  • Simple categorisation: Categories would help users in viewing different items in the menu efficiently. However, categorisation that is too complicated would have the opposite effect as it could affect the navigation experience. Therefore, it is important to keep the categories simple.

  • Filter function: In view of the needs of users with diet requirements, a filter function for different allergens and dietary habits would greatly enhance their experiences with the menu app, as it helps with selecting dishes they can order, without the need for them to read through details of each dish to determine whether it is suitable for themselves.


Process

Wireframes

Low-fidelity Prototype

Usability Study

I conducted two rounds of usability studies to test the product. The first round was conducted using the low-fidelity prototype, from which the findings were used for the design of the mockup. The second round was completed with the high-fidelity prototype to look for aspects for iterations and refinements. 

First round findings:

  • Users would like a more efficient navigation because the steps to switch between categories are repetitive

  • If the user frequently visits the restaurant and knows the dishes well, they would find it unnecessary to have to read the details of the dishes every time

Changes made:

  • Nav bar: Nav bar added to the top of the list of items so that users can switch back and forth between categories quickly

  • Direct add button: Users can now add items to the cart directly from the list if they do not need to read the details

Second round findings:

  • Users would like a way to view the food they have ordered

  • Users would like a double-step confirmation so that they know they will be making the order when they press the button

Changes made:

  • Order history: A new button for users to access their order history

  • Confirmation dialogue: A dialogue added to ask for confirmation of the users’ orders

High-fidelity Prototype