Duration
April 2024 - Jun 2024
Type
An independent student project was completed while in the Google UX program
Responsibilities
Conducting interviews, paper and digital wireframing, low and high-fidelity prototyping, conducting usability studies, accounting for accessibility, and iterating on designs
Overview
The Relish food ordering app allows users to browse the menu without specific ingredients. No matter their age or food habits, choosing the ingredients they don't want in the meal will result in a personalized menu crafted uniquely to their needs.
Problem
The problem is that ordering food with specific dietary restrictions is difficult. The menu structure of most food-ordering apps limits custom choice with an overly broad menu.
Food ordering apps categorize items into broad groups such as"Vegan," "Gluten-Free," "Appetizers," "Main Courses," etc. While intended to simplify navigation, this broad categorization often results in a need for more detailed options, making it difficult for customers to find specific dishes that meet their preferences or dietary requirements.
Design Process
The design process for the Relish food-ordering app started with a comprehensive analysis of the problem statement. This analysis highlighted the importance of allowing users to order food without specifying particular ingredients. Next, I researched competitors to identify areas for improvement and new features. Based on the research findings, I created low-fidelity wireframes to gather feedback on the user experience, which was crucial for individuals with dietary restrictions or specific ingredient preferences who want to order food.
How it starts
At the beginning of the Google UX design course, I had to choose a project to work on. One of the choices was a food-ordering app for modern restaurants. The idea sounded exciting but also presented some challenges.
I realized that the app needed to be unique while also remaining practical and beneficial for users.
Idea behind Relish
About 60%.
That is the percentage of consumers in the EU who try to eat healthily, according to Statista data. Statista, Food trends Furthermore, according to Statista's global research results, the online food delivery trend is growing. Statista, Online Food Delivery
No matter what health problem people have, their background, or demographics, they all want to have freedom and enough options to choose the best food according to their personal preferences.
Considering all these, ordering food, especially the menu and choice of dishes, needs more customization.
Dividing the menu into groups like vegetarian, vegan, or gluten-free was not enough anymore.
That was the starting point of the 4 D’s Discovery phase.
Project overview
The product:
Relish is a food-ordering app with diverse food categorization. It allows users to avoid specific ingredients by filtering the menus according to their needs, making the food search process simple, efficient, and helpful.
Project duration:
April 2024 to June 2024
Project overview
The problem:
The menu structure of most food-ordering apps limits custom choice with an overly broad menu.
The goal:
Relish provides users with a simple but detailed way of filtering food, making it more personalized and helpful for their needs.
My role:
UX designer, designing a food ordering app called Relish from conception to delivery.
Responsibilities:
Conducting interviews, paper and digital wireframing, low and high-fidelity prototyping, conducting usability studies, accounting for accessibility, and iterating on designs
Understanding the user
Steps:
User research
Discover: Conducting interviews & Surveys
Personas
Problem statements
User journey maps
User research: Summary
I conducted user interviews, which I then turned into empathy maps to understand the target user and their needs better. Also, according to the three central hypotheses, I designed a problem-solution-expected result loop.
User research: Pain points
-
Time
Problem: The food ordering process takes too long, which many users can't afford.
Solution: Create an app that allows users to browse the menu and order food in fewer steps.
Result: Reduce the time spent in the food ordering process.
-
Experience
Problem: The filter options are not efficient enough to narrow the menu to the preferences of users' needs.
Solution: Provide filter options that are detailed enough to make the food menu personalized for each user.
Result: A rise in the number of users who will want to use filter options, making the menu more personalized.
-
Navigation
Problem: Because of the overcrowded design, browsing the menu becomes more complicated, especially for people with limited digital
literacy.
Solution: Prepare a simple menu with clean food categories, an understandable design, and a call to action button.
Result: Make the application functional for all users.
Discover: Conducting interviews & Surveys
Research goals:
Define a typical potential user of the app: demographics, behavior, food habits, and their reasons.
Test the central hypothesis and determine how fast participants went through the app, where they needed help personalizing the food menu, and using a call-to-action button.
Map the emotions and reactions of participants browsing the food menu and finding the food they want to better empathize with the users.
Discover: Conducting interviews & Surveys
Interview Questions
How many times per week are you using the food ordering App?
Many users today need help and more time to navigate due to an overcrowded food app. How do you feel about it?
What could have made the whole experience better?
Considering your previous experience, how much did you miss a more efficient method for filtering the food menu closer to your needs?
In your opinion, how much would food filter options improve the user experience?
Would you consider using these food filters in your future orders?
Looking back, how often do you read the description and other details about the meal?
What is your primary reason for reading the description or other details about the meal?
How would you feel if the menu you are looking at didn't include any ingredients or types of food you have to or want to avoid?
Would excluding these ingredients make choosing the meal easier? If yes, how?
Discover: Conducting interviews & Surveys
Main findings
During the research process, I concluded that the central user group consists of users who are not only busy working people but also pay attention to the food they eat. To them, the food ordering process should be easy, relaxing, and efficient. However, with the limited filter options, narrow food categorization and selecting the food takes too long. Everything becomes more challenging, and the users feel frustrated and stressed.
Limited filter options, narrow food categorization, and taking too long to select the food seem to be the most challenging steps, and that is where the focus should lie.
Affinity map
An affinity map helped me to get a better overview of collected feedback.
Problem statement:
Olivia is a busy freelancer who needs a food app with more detailed and personalized food categorization because she has to be careful with certain ingredients since she suffers from chronic bowel disease.
Age: 36
Education: Philology
Hometown: Antwerp, Belgium
Family: Husband
Occupation: Freelance translator
“ I have to follow the deadlines in order for my job to be done. As a person with a busy schedule I want to enjoy more in my free time.”
Goals
Finding a food ordering app that is simple and easy
to use.
Narrowing the food menu precisely according to personal preference.
Frustrations
She has difficulty finding suitable foods to eat due to her condition.
Lack of personalized food categorization in existing apps.
"There are too many diverse food menu options which are not giving precisely what I need."
Problem statement:
Tobias is an active student who needs a food app with fast and efficient checkout because he wants to order food in just a few steps since he is trying to reduce screen consumption.
Age: 28
Education: Master’s student in Statistics
Hometown: Berlin, Germany
Family: Girlfriend
Occupation: Studying
’’Life is a journey, and learning new things is just one part of it. Improving the quality of it is at the core of everything. ’’
Goals
To successfully complete his Master's program and pursue a career in data analysis.
He would like an app with user-friendly checkout with minimum effort and steps.
Frustrations
He is annoyed by how much the checkout process wastes time.
He is often feeling overwhelmed by screen time.
Struggles to balance his academic commitments and personal well-being.
User journey map
Olivia's user journey map helped me identify pain points and improvement opportunities.
Based on the pain points, I came up with a couple of HMW questions:
How Might We enhance user customization options within the menu structure of food-ordering apps?
How might we increase user satisfaction by providing a more tailored menu selection process?
Starting the design
Steps:
Paper wireframes
Digital wireframes
Low-fidelity prototype
Usability studies
Paper wireframes
Making iterations of each app screen ensured that the elements that made it to digital wireframes would be well-suited to address user pain points.
For the home screen, I prioritized making browsing through the menu simple and easy, with an option to customize.
Digital wireframes
As the initial design phase continued, I made sure to base screen designs on feedback and findings from the user research.
Digital wireframes
The app needed an option to avoid ingredients by user choice. Providing them with a reduced menu with simple steps makes the process much easier.
Low-fidelity prototype
Using the completed set of digital wireframes, I created a low-fidelity prototype. The primary user flow I connected with was choosing the meal from the home page or reducing the menu by clicking the customize menu button and choosing between ingredient options.
Usability study: parameters
Study type:
Unmoderated usability study
Participants:
5 participants
Length:
45 minutes
Location:
Germany, remote
Usability study: findings
I conducted two rounds of usability studies. The first study's findings helped guide the designs from wireframes to mockups. The second study used a high-fidelity prototype and revealed which aspects of the mockups needed refining.
Round 1 findings
Users wish the Customize menu button had better visual appeal for easier recognition as primary CTA’s.
Users want a clear and understandable layout on the Filter Your Search page.
Users wish that the ‘′Add to cart′′ icon was visually more apparent.
Round 2 findings
Users have requested that the Customize menu button be emphasized on the Main dish page.
Refining the design
Steps:
Mockups
High-fidelity prototype
Accessibility
Mockups
It was essential to distinguish the Customize menu button from the rest of the environment. Locating it in the upper area of the page makes the primary CTA immediately visible and takes the user to the indicated functionality.
Before usability study
The majority of the participants had trouble identifying the Customize menu as a CTA.
After usability study
The food counter and customized menu must be more prominent, and the color contrast needs to be changed for low-vision users.
After usability study
It becomes immediately more visible and takes the user to the indicated functionality.
Mockups
The more apparent food selection and simplified layout make navigation easy and understandable.
Before usability study
Browsing was confusing since the list of ingredients was too long, and they needed to be categorized.
After usability study
With precise and color-highlighted food categorization, the first-time app user can immediately identify purpose and functionality.
Mockups
Additionally, rearranging the page enabled users to select ingredients by tapping instead of scrolling.
Before usability study
After usability study
Mockups
Before usability study
After usability study
Polished prototype
High-fidelity prototype
The final high-fidelity prototype presented cleaner user flows for food ordering. It also met users' needs by making the customized menu button more accessible and simple.
Accessibility considerations
Provided access
to users who are vision impaired through adding alt text to images for screen readers.
Pay attention to the fact that the app has proper text contrast on all the pages.
Going forward
Steps:
Takeaways
Next steps
Takeaways
Impact:
The app gives users what they need simply and easily.
One quote from peer feedback:
′′As a person who is paying attention to the ingredients used for the food I am eating, I felt over-excited when I finally found the app that fills all my needs.′′
What I learned:
I learned that minimal changes in the design can significantly impact users. Each user has their own opinion. During the research phase, I should focus on it, leaving my voice behind because the research is for them, the users, not myself.
Next steps
Providing more images, especially for the ingredients users want to avoid.
Making the ordering process even faster by putting the ingredients users choose to avoid in history, which will automatically ask if they want the same to be avoided in the following order.
Conduct another round of usability studies to validate whether the pain points users experienced have been effectively addressed.
Let’s connect!
Thank you for taking the time to review my work on the Relish Restaurant ordering app! If you’d like to
get in touch, my contact information is provided below.
bojana.cudomirovic@gmail.com