Hue Restaurant Menu and Ordering App

overview

Hue restaurant is a Vietnamese restaurant in San Francisco city, California. They offer a wide range of authentic and quality Vietnamese food, especially the specialties from Hue city – the old capital of Vietnam.

Hue restaurant wants to create an application that helps customers who are not too familiar with Vietnamese food to learn more about the food background via fun facts and visually appealing dish images. They also want to make dining in at their restaurant a convenient and seamless experience.

PROJECT GOAL

Design an app for Hue’s restaurant that allows users to learn about the food’s background and view their images when browsing the menu. They can place the order and pay directly on the app.

MY RESPONSIBILITIES

Conducting interviews, paper and digital wireframing, low and high-fidelity prototyping, conducting usability studies, accounting for accessibility, and iterating on designs.

meet the users

In this project, I took a goal-directed design approach. I found qualitative research methods to be the most useful, consisting of literature review, competitive analysis, and most important the persona hypothesis construction.

Competitive Analysis

I looked at several potential competing companies, and although none compete directly with HueApp, it was helpful to learn about the gaps and the opportunities to apply to the app design. The majority of the features between competitors were very similar, however the main differences that I noticed were:

• Comprehensive details on the dish description vs. Lack of details about the dish

• Easily Accessible vs Hardly Accessible

• Save/Shortlist feature vs. No option to save the dish

• Too Many Screens vs Simplified Interaction

• Distracting Interface vs Minimalistic Interface

Wireframes

PREPARING USER JOURNEY

I constructed a user flow of what a basic start to finish journey of the persona looks like while browsing the food menu and placing the order. This helps me in understanding ways users can interact with the product, as well as allowing me to see navigation through user goals.

BUILD PAPER AND DIGITAL WIREFRAMES

After sketching out some paper wireframes options and thinking through the preliminary flow, I reviewed what was necessary, unnecessary, and what areas needed improvement. I invested a lot of time into this step to make sure I had the finishing touches on the underlying UX before moving onto the visuals.

Preliminary Usability Testing

OVERVIEW

• Research goals: Determine if users find the menu details of the dishes helpful to choose. Determine if users can place orders within the prototype of the Hue restaurant App.

• At the end of the usability testing, I aimed to answer the following questions:

  • What can we learn from the user flow, or the steps that users take, to choose their dishes and place an order?

  • Do users find the information details of the dishes helpful?

  • Are there parts of the user flow where users get stuck?

  • Are there more features that users would like to see included in the app?

  • Do users think the app is easy or difficult to use?

• The study was done both remotely and in person in the United States and was moderated. Each session lasted 25-35 minutes.

• Participants are food enthusiasts and who love going out to eat at least twice a week. Two males, three females, and one nonbinary individual. One participant of assistive technologies (screen reader)

• The preliminary study was conducted with the low-fidelity prototype of the HueApp:

RESULTS

After completing the usability testings with 6 participants, I used an affinity diagram to categorize the data into groups of similarities. There were 4 groups of feedback that were most common among all participants including: Homepage menu, Dish description page, Favorite feature, and the Checkout process. I used the information from the diagram to work on the improvements of the app UX.

CONCLUDED RECOMMENDATIONS FROM THE PRELIMINARY STUDY

• Combine some of the information on the Dish description detail page into one category. 

• Add a feature to the Dish description page to allow users to add extra ingredients to the dish.

• Combine 2 steps in the checkout process into 1 and add Apple/Google pay integration.

• Keep the Favorite feature, but change its name from “Favorite” to “Shortlist”

• Use the same navigation for Entree and Appetizer category.

ACCESSIBITILY CONSIDERATIONS

• Provided access to users who are vision impaired through adding alt text to images for screen readers.

• Used clear and illustrative icons combined with text to help make navigation easier.

• Applied the appropriate contrast ratios to text and background colors for legibility.

Iteration

Since Hue restaurant in SF is specialized in Hue food prepared by the chefs from Hue city, I gathered a moodboard of Hue city to inspire the creation of the brand identity for HueApp. I aimed to maintain ‘the old’ but also brought in a touch of ‘the new’ for the brand look and feel. The final identity as seen below was created with a mix of the ancient traditions and the contemporary values in mind.

Next Steps

• Conduct another round of usability studies to validate whether the pain points users experienced have been effectively addressed.

• Conduct more user research to determine any new areas of need.

• Explore the scalable ways to use the Hue restaurant app design for other restaurants as an
  all-in-one app.

Click Here to View Process Deck