AMAKARA MENU APP
UX Case Study
Google UX Professional Design Certificate
The Problem:
A sushi restaurant needs a digital interface for potential customers to browse their menu.
The Goal:
Create an app design that allows customers to browse the restaurant’s menu offerings.
User Research:
User research was conducted to identify problem points and needs of users when looking up a restaurant’s menu online or via an app. My user research consisted of a 4 open-ended question survey, and was completed by 58 users.
The results of this survey identified many similar frustrations, needs, and goals of users when using an online menu. Using this information, I developed empathy maps, personas, and a user journey map. These tools helped identify pain points.
Pain Points:
#1: Prices
Prices are a main point of interest for many online menu users, however, are often not listed on the online menu. Pricing will be a key piece of information to be included in this app design.
#2: Dietary Restrictions
Many users have dietary restrictions or allergens that require special attention. The app design will make allergen, nutrition, and ingredient information easily accessible and clear.
#3: Photos
Photos of menu offerings are something many users noted as being important when looking up a menu online. This helps their deciding factor on if they would like to visit the restaurant, what they would order, and gauge portion sizes.
#4: Navigation
Users find it frustrating when a menu is difficult to locate on a website or app. They prefer a clear layout that is simple to navigate and is easy to use on both a computer and phone.
In addition to user research, I also conducted a competitor audit, consisting of 2 direct competitors and 2 indirect competitors.
Wireframing & Prototyping:
User Flow:
After conducting and analyzing my research, I moved on to start the design process. I first created a user flow to establish what path a user would take in the app.
After creating a user flow and list of screens needed, I also listed out the elements that each screen would need to include. Since my user flow for this project is browsing the menu, my focus is on the menu screen, filter screen, and individual item screens.
Paper Wireframes:
Once I had the user flow clear, I began sketching paper wireframes. For each focus screen, I sketched 5 different iterations. I then narrowed down the elements I found most effective and sketched my final paper wireframes with a single option for each screen.
Digital Wireframes/Low-Fidelity Mock-Ups:
After establishing my design ideas through paper wireframes, I transfered the sketches to digital wireframes in Figma. I added a few key navigation ques, and created a low-fidelity mock-up.
Usability Testing
Usability Study Goals:
-
Determine if the app navigation is easy for users.
-
Determine if users are able to find all the menu information they desire.
-
Get feedback on if the app is appealing.
Methodology:
-
Monitored usability study
-
5 participants
-
Each participant was emailed the prototype link. I met with participants via Zoom meeting and read them the prompts to get real-time feedback.
-
Length: Each session lasted 5-10 minutes
Themes & Insights:
-
The reservation option is not clear to most users, so users need a better cue to navigate to the reservation page.
-
Most users find the navigation of the menu categories unclear, so users need a more intuitive way to navigate the menu options.
-
A majority of the users will find the filter option beneficial, so the filter feature should be kept in the design.
Takeaways:
The updates I made to the design based on the feedback received in the usability study are:
-
Changed the "clock" icon to a "calendar" icon. Additionally, I added text underneath the navigation bar icons for clarity.
-
Added buttons to the navigation of both the menu categories and the menu item information categories.
-
Added a menu icon at the top of the screen, where users can navigate to the reservation page through as well.
Accessibility:
As I was considering accessibility, I tested my app colors against accessibility guidelines. Unfortunately, the yellow (from the Amakara logo) that I had been using in my design did not meet accessibility standards against the white background. After trying out darker shades of the yellow with no success of meeting the guidelines, I decided to test yellow as a background color with the brown as the foreground color. This combination passed the accessibility guidelines and I was able to keep the yellow in my design with a few design changes to make sure the yellow was being used properly, interchangeably a foreground or background with the brown color.
Refinement:
In the final stages of the design process, I continued to refine details and create a few different iterations, with peer reviews between each iteration. I completed this process with my three focus screens (main menu, filter, and menu item).
Once I had the details finalized on my focus screens, I created a brand guidelines sticker sheet to apply to the rest of my screen designs.
Using my design system and guidelines, I moved forward with creating a high-fidelity prototype.
