Categorization for Simplified Menu Navigation
2023
Client: Itoko Sushi
Role: UX Designer (interviews, surveys, prototyping, user testing, wire-framing, workshop facilitation)
Duration: 6 weeks
Tools: Figma, Photoshop, Excel, Power Point
For a project during the SAIT UX Design Bootcamp, I was tasked with redesigning a local restaurant app to improve the ordering experience for customers.
Itoko Sushi is a local sushi Calgary restaurant with many menu items and a pick-up option available through their mobile app.
CHALLENGE
To determine pain points in the current ordering experience and create a clickable prototype to test solutions.
FINAL PRODUCT
PROCESS
Heuristics Evaluation
Competitor Analysis
User interviews and Surveys
User Personas
User Flows
User Journey Maps
Card Sorting
Ideation Workshops
Wire-framing
Low Fidelity Prototype
Usability Testing
Mid/High Fidelity Prototype
How We Got There
HEURISTIC EVALUATION
I started the discovery phase by looking at the existing app and doing a series of heuristic tests ranking the categories out of 5 to determine the current pain points.
Pain Points:
No clear back button
Easy to get lost in the many menu pages
1. User Freedom and Control: 1/5
Overwhelming amount of menu items and no images
A lot of info and text on the home page
2. Aesthetics and Minimalist Design: 2/5
3. Consistency and Standards: 3/5
Hamburger menu shows all the menu items instead of navigation pages
Two ways to navigate to the menu (bottom bar and hamburger menu)
COMPETITOR ANALYSIS
To follow up on the heuristics evaluation, I completed a competitor analysis. I was particularly interested in seeing the difference between menu navigation functions on other ordering apps.
List of Researched Competitors
Coco Calgary
Ginger Beef Bistro House
Pizza 73
Sal’s Pizza
Skip the Dishes
Shawarma Barlow
Dominoes
Key Differences
Other apps generally have:
1. More images / Less text
2. Menu bar on the top with categories
INTERVIEWS & SURVEYS
I did a series of 3 interviews and 5 surveys to determine customers’ current opinions on the current app and their existing ordering habits.
Key Findings
100% of participants stated:
1. Difficult to Navigate
Menu has too many sections
More likely to purchase items with more information on what they are buying
2. Needs More Images and Descriptions
“What am I ordering? It doesn’t tell me what a combo 7 is.”
-Interviewee #1
USER TESTING
Round 1
To pinpoint exactly where users were having trouble with navigation, I organized 3 usability tests on the current app.
Key Findings
Menu navigation was ranked 4/5 in difficulty.
100% of participants took over 30 seconds to find sections of the menu
100% of participants would leave before ordering because of the difficult navigation
“I would have left by now and ordered curry instead.”
-Participant #2
AFFINITY DIAGRAMS
I created affinity diagrams to organize the data and gain more detailed customer insights.
CUSTOMER INSIGHTS
Most likely to use app:
Tech Savvy users
ages 18-30
USER PERSONAS
From the previous user research I created 2 user personas
Jeremy is a busy student between 18-30, tech-savvy, and orders out frequently, so is likely to be a repeat customer.
Primary User
Kirsten is a busy mom ordering for a family. She is less comfortable with technology and wants a fast and simple user experience.
Secondary User
JOURNEY MAP
I focused on Jeremy to create a journey map exploring the pain points in menu navigation found during initial Usability Testing, including the long ordering process due to the amount of pages and confusing menu navigation due to current page layouts.
USER FLOW #1
I created a user flow to visualize the complexity of the menu navigation and the excessive amount of pages currently on the app. I included all the options that would link to different pages in the green boxes to visualize the confusing excessive number of categories on the current menu. I also wanted to illustrate how the current app takes the user to the cart every time a menu item is added, making them navigate back to the main menu once each item is added.
WORKSHOPS
How Might We
I created a Point of View Statement for Jeremy. I presented the POV Statement, User Persona, Journey Map, and User Flow to other students and facilitated a How Might We Workshop where each student brainstormed 5 How might we questions. We then voted on what we thought were the top 3 prioritized How Might We Questions.
Prioritized How Might We Questions
1. How might we simplify & organize menu for better clarity & navigation.
2. How might we navigate to the menu faster.
Ideation Workshop
Next, I facilitated a Brain Write workshop using the highest voted How Might We question with a group of 3 other students to brainstorm possible solutions and vote on the strongest 4.
Top Voted How Might We
How might we simplify & organize the menu for better clarity & navigation?
Top Voted Solutions
1. Add an icon on each product that when clicked has a pop-up with further descriptions and images.
2. Add a filter/sort function that can search menu items by price, ingredients, deals, etc.
3. With a membership account add a saved orders section for quick reorders, and a rating system to rank and save your favourite dishes.
4. Make the Main Menu a grid of icons and images of larger categories.
Hypothesis
We believe that larger menu categories with icons on the Main Menu and a top menu bar with the categories throughout the ordering process will decrease the number of steps when adding items to the cart, allowing a more intuitive ordering experience.
USER FLOW #2
For the second user flow, I used screenshots to visualize the current flow and then added changes to create what the modified flow could be. The Final State of the modified flow demonstrates how adding a top bar with menu categories and an “add to cart” button reduces the number of steps in the ordering process since every item no longer needs a separate page.
CARD SORT
We then reorganized the menu items into larger categories and sub-categories to clear up the interface.
WIREFRAMES
Menu Navigation
Login Navigation
LOW-FIDELITY PROTOTYPE
1.The first change was a top bar with the menu categories for clear navigation.
2. Accordion menus with smaller categories were also added for a simplified interface.
3. We reduced the number of pages by adding info of the items directly on the menu page and an “add to order” button where you can increase the quantity. With these changes menu items did not require their own page.
4. We also added a profile to be able to save orders and payment methods reducing steps for repeat customers.
USABILITY TESTING
Round 2
I did a series of 3 usability tests with the low fidelity clickable prototype using figma.
Results
Participants Ranked tasks in three categories from 1-5 (5 being the most difficult).
We successfully lowered the tasks from the initial usability test from a 4 difficulty to a 1.
Menu Navigation 1/5
Profile Navigation 1/5
Cart Navigation 1/5
Additional Findings
100% of participants experienced a block at the beginning of the user flow with the login as the landing page.
When asked which page they would prefer to be the landing, the majority stated the menu.
If taken straight to the menu how will customers know that we have an account sign-up to save orders and payment methods?
Additional Questions
After additional competitor analysis, I noticed many other apps feature a checkout as guest and sign-in options at the checkout stage.
Alter the checkout process to maximize the experience for guest customers and repeat customers with profiles.
Solution
MID-FIDELITY PROTOTYPE
1. Changed checkout flow when customer clicks “checkout” they get taken to the log-in page
2. Added two separate checkout pages for guest users and repeat users.
Guest User
Returning User
