Case Study:
SoBro Subs App
The product:
SoBro Subs is a food ordering app for a fictional gourmet sandwich shop
Project duration:
1 month | January 2023 - February 2023
Self-directed project
My role:
UX research, UI design, visual design
Responsibilities:
User research, wireframing, prototyping, creating low-fidelity and high-fidelity mockups, user testing
Project overview
The problem:
Users with dietary preferences and/or allergens find it difficult to quickly find sandwich options that are relevant to them.
The goal:
Create a food ordering app with a filter function that can filter search results by preference and/or allergen.
Understanding the user
First, I created empathy maps to understand the users I’m designing for and their needs. A primary user group identified through this research was people with food allergies who need to customize their order to exclude allergens. Another user group identified was people with food preferences (like vegan, vegetarian, pescatarian, etc.) who don’t have time to fully customize their meal but want food that falls within their preferences.
These user groups confirmed my assumptions, but research also revealed that food customization was especially difficult for non-native English speakers and people with disabilities.
Pain points
Personas
Jazza is a foreign-exchange student who needs to customize her food orders because she has a soy allergy.
“I love trying new cultural dishes near my university campus. I especially like when my food is tailored to me.”
Bethany is a vegan doctor who needs an improved app interface for customizing food orders using a screen reader because she struggles with dyslexia.
“By the end of the day, I don’t have time to cook, so I often order food. I’m dyslexic and would customize orders more if it weren’t such a long and frustrating process for me.”
Journey maps
Competitive audit
I conducted a competitive audit to determine how the SoBro Subs app would stack up against both direct and indirect competitors. I studied each competitor’s place in the market and analyzed the strengths, weaknesses, gaps, and opportunities of their online ordering apps and websites.
SoBro Subs’ key direct competitors are DiBella’s Subs, an old-fashioned sub sandwich shop located in 5 states in Northeastern United States; and Earl of Sandwich, a traditional sandwich shop located in 5 different countries. Their indirect competitors are DoorDash, a technology company that enables users to order delivery from local businesses; and Domino’s Pizza, a global pizza chain.
Value proposition
The SoBro Subs app will offer:
Ability to filter foods by dietary preference
Ability to filter out specific food allergens
Images for every dish and minimal text
These features will allow users to quickly and easily identify foods they want to order based on their unique dietary preferences and food allergies.
User flow
Information architecture
Starting the design
I began the design process by creating design iterations of the front page using paper wireframes. This allowed me to quickly pick out elements I liked from previous sketches and incorporate them in the first sketch of the home screen (pictured, bottom right).
Digital wireframes
As the initial design phase continued, I went on to create digital wireframes based on the paper wireframes I had created.
I made sure to include space on the home page for frequently ordered items as well as a button that lets the user go straight to the menu from the home screen.
I designed the filter feature to be part of the search screen. Users can click the filter icon next to the search bar to open up the filter dialog, where they will see options to filter menu items by both food preference and food allergen.
Low fidelity prototype
After creating digital wireframes, I used Figma to make an interactive lo-fi prototype that I could use to test out my designs.
In this prototype, there are two main ways that users can navigate to the filter feature: click the search icon on the bottom nav then the filter icon on the search screen, or click the hamburger button on the bottom nav, which brings up a menu that includes filter as an option.
Usability study
Once the lo-fi prototype was ready, I conducted an unmoderated usability study using a tool called Lookback.io. Findings from this study helped guide the designs from wireframes to hi-fi mockups.
Participants
5 participants: 2 female, 2 male, 1 nonbinary, all aged 20-65 years old
Methodology
Unmoderated usability study
Participants completed a preliminary participant survey, filtered menu items in the app, and completed a usability questionnaire about their experience
Affinity diagram
Findings
Users had difficulty finding the filter feature
It’s not always clear to users that the filter feature exists
The click radius on certain buttons is too small
Insights
The filter feature should be placed more prominently in the design
An overlay should pop up on the home screen near the search button on the bottom nav to remind users that this feature exists
The click radius on radio, checkbox, back, and navigation buttons needs to be expanded
Refining the design
The usability study gave me a clear view of what was and wasn’t working in my lo-fi prototype. I created the high fidelity mockups based on the insights gained from the usability study.
Mockups
Because it was somewhat difficult for users to find the filter feature, I simplified the bottom navigation bar to make the search icon more prominent.
I also made the filter button more prominent on the search screen. Now instead of a small icon next to the search box, there is a dedicated filter button next to the search button.
Visual design
High fidelity prototype
Once I refined the hi-fi mockups, it was time to make it interactive. I created the hi-fi prototype using Figma.
Accessibility considerations
The following was implemented with accessibility in mind:
Click radius was increased so that users with limited mobility can easily select buttons.
Icons were used to make navigation easier for non-native English speaking users.
Images were added for every menu item to make it easier for users with dyslexia or visual impairments to scan through the menu.
Alt text was added to images to make it easy to understand for users who utilize a screen reader.
Next steps
If I were to continue this project, I would recommend the following next steps:
Conduct a second 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 that could be improved upon.
Takeaways
Impact
SoBro Subs app users will be able to save time by filtering out menu items based on food preferences or allergens.
“I'm used to just putting in ‘gluten free’ but knowing now that there is an option to filter it based on preference, that's actually super handy.”
- Usability study participant
What I learned
I learned that what’s obvious to me as the designer is not obvious to all users. This project has taught me that every design decision I make needs to be tested and backed up with research and/or data.
Let’s connect!
Thank you for taking the time to read this case study. I’d love to hear your thoughts on my work!