underbelly app

PROJECT OVERVIEW

Problem

Design a new app interface to encourage customers of the Underbelly restaurants to order takeaway food and checkout using the mobile app.

Solution

Figure out if users can complete core tasks of ordering food for pickup using the app. Determine if the app was easy to use and intuitive. 

Challenges

  • Users want to quickly add menu items to their cart from a saved favorites section or a previous order section.
    I can add a favorites section on the app to allow a quick add to cart for the user.

  • Food availability. The user would like to see if the menu item is out of stock. I can add a function for the restaurant to update their app with out of stock items.

  • Users don’t want to use 3rd party apps to order from Underbelly because they often charge more. This app design will allow them to order directly from the restaurant. 

  • Users would like a more accurate estimated time for the food order to be ready. Time is precious and they don’t want to have to wait around. I could include a wait time for the food at checkout.

RESEARCH-Understanding the user

Personas

Persona

Persona

Competitive Audit

Competitive Audit Goal:
Compare the purchasing experience of each competitor as a new user and a returning user. 

Key Competitors:
Our key competitors are: TOAST Takeout, (indirect competitor) an online third party ordering app for a wide range of restaurants and Tajima Ramen, and Menja Ultra (direct competitors) are other local San Diego restaurants serving Japanese cuisine and ramen. The only competitor with an app is Toast.

What are the type and quality of competitors’ products?
*Direct competitors don’t offer an app.
Tajima Ramen’s website has well designed branding communicating its traditional offerings of Japanese cuisines. Offering an accessibility widget and images of food. The animation and flow of text verse images is balanced. Menja Ultra’s website shows they care more about their food than their website. Not a lot of design of the website was considered. The images of food are enticing and speak for themselves, but the text is one size. No real hierarchy and hard to find information.

Competitors Strengths:
(Tajima/RakiRaki uses Toast to place orders)
Toast app strengths include:

  • Remembering restaurants previously ordered from

  • Remembering users’ payment information

  • Many local restaurants to order from

Menja Ultra strengths: 

  • Offers online ordering through their own website

  • Offering full menus in more than one language

  • Accessibility

  • Join waitlist options through yelp

Weaknesses:

Toast weaknesses include: 

  • Not expanding its language options/ no accessibility on app

  • No creativity / individual restaurant branding since it is a third party app

Tajima/RakiRaki/Menja Ultra weaknesses include: 

  • No app, just website

  • Not offering audio versions of its menu

Opportunities:
Some opportunities I identified include: 

  • Add restaurant branding to app

  • Provide quick and easy way to reorder past orders

  • Provide rewards or perks for returning users

DESIGN

User Flow, paper wireframes, lo-fi prototype

User flow to complete task of ordering an item and checking out.

Digital wireframes

Lo-fidelity wireframes

USABILITY STUDY

I conducted a moderated research study of five participants varying in age who order out a minimum of one night a week and live in the metropolitan or suburban areas of San Diego. To evaluate the usability of ordering an item in the app, I relied on both qualitative and quantitative data using key performance indicators. Users were able to checkout but some users were unable to return back to home page. Other users took more time on task to located their desired location on the homepage because there was not enough emphasis on the location buttons. Most users did not like being automatically taken to the cart page after adding one item. In order for them to add more they had to back out to the menu page and start over. From this study I learned valuable insights to focus on for the next design iteration.

Research Questions trying to answer

  • How long does it take for a user to place an order?

  • Are users able to add items to the Favorites list?

  • Are there any places where the users get confused? 

  • Are users able to create a Profile for faster checkout and saving past orders/favorite items?

  • Are users able to customize order items?

Low Fidelity Prototype to use for first usability study.

Affinity Diagram from data collected from the first usability test

Insights learned from usability study

Ideation

From the study I learned that I needed to reduce the steps to add items to the cart and create a banner notification instead of directing the user to the cart automatically. I also learned some users preferred a location name listed instead of reading the address to decide on a location to place an order from. So I a designed a button with the name of the location.

Mockups / High Fidelity Prototypes

Created a design system to simplify ideations of the prototype.

High Fidelity Prototype— Click Image for link to prototype

TAKEAWAYS

WHAT I LEARNED

The final high-fidelity prototype met user needs to add items to the cart without being redirected to the cart page reducing the number of clicks needed. As well as the user favorite items are now first on the menu page for quick access and there is a greater emphasis put on the location name on the homepage.

As a result from this project I simplified the flow allowing users to quickly add menu items directly from a saved favorites list using 2 clicks instead of searching for same item on the menu, saving valuable time.

Creating a consistent design system allowed for faster iterations of the project to be completed. The whole UX design process from beginning personas and pain points to usability studies help guide the project to stay focused on solving the user problems.