YOUR WAY
A native app that helps people adapt their food orders to their specific needs.
Embedded Files
My role
UX Designer from conception to deliveryResponsibilities
UX Research, Usability Testing, Wireframing, Prototyping, IA, UX WritingProject duration
August - September 2021CHALLENGE
The prompt for this Google UX Design Certificate project was to design a food order customization app.
SOLUTION
Your Way is a food order customization app for an Italian restaurant located in a urban area which can be used for home delivery, pickup and in-house orders. It allows users to customize their food based on their tastes as well as dietary choices and needs.
USER INTERVIEWS & SURVEY
Ordering food online is a common activity and gained even more traction during the COVID-19 pandemic when this project was carried out. In the Empathize phase, I carried out in-person interviews with 5 participants from the Berlin area to capture their needs, behaviors and motivations. After identifying some issues I hadn't initially thought of (e.g. allergies/intolerances), I also added quantitative data from an online survey to try and make the results more statistically relevant.
Note: I asked participants to give answers based on a normal situation (without COVID-19)
KEY INSIGHTS
Most participants (79%) had already used online food ordering services, which they generally considered helpful and convenient. However, participants were less satisfied with the customization experience and some (38%) missed crucial options, such as the ability to modify ingredients, order smaller/bigger portions, and get information about allergens and calories. Vegans and vegetarians reported they could easily find suitable options.
Key results
When you order food, do you ask for changes in it?
What do you normally want to change? [multiple choice]
32% Remove what I don't like
28% Remove what I don't eat
22% Remove what is bad for me
20% Size
14% Remove things I don't feel like in that moment
11% Add extra ingredients
Why do you order food?
[multiple choice]
61% I don't have time to cook
32% I don't want to cook
27% I can't cook
23% I want to treat myself
6% To cater for larger groups
2% I want to test new restaurants
Do you have any food allergies / intolerances / hypersensitivities?
Participant quotes
"When I order online I can take my time and change my mind. In restaurants I feel pressured to decide fast."
"There's no staff to ask questions to when you order through an app."
"I don't want to seem weird asking all those ingredient questions when I'm out with people."
PAIN POINTS
Limited customization
Users were frustrated they were usually only offered a small set of (or no) options to customize their food.
Lack of information
Nutritional and allergen information was difficult to access or incomplete on platforms for ordering food and needed to be checked for each food, resulting in a time-consuming experience.
PERSONAS & USER JOURNEY MAPS
After analysing the interesting and numerous insights from my research, I defined 3 personas to reflect the main needs and pain points of the identified target group (middle-class Generation Xers and Millennials) and their corresponding user journey maps.
Personas
USER JOURNEY MAP
UJM for Onie D. Metcalf
HOW MIGHT WE
Based on the insights and pain points from my previous research, I formulated an overarching How Might We question to guide me further in the design process.
How might we allow people to adapt their food orders to a large variety of specific needs in the most streamlined way possible?
COMPETITIVE AUDIT
I conducted a competitive audit to assess what kind of food order customization competitors offer and the user experience related to this process.
The direct and indirect competitors I considered were Subway - an international sandwich chain, Chipotle - an international Mexican food chain, and Wolt - a food ordering app that delivers food from a large number of restaurants.
KEY INSIGHTS
The main weaknesses I identified was that allergen / nutritional information was often not readily available during the item selection process, but shown separately, so that users either needed to remember it or interrupt the user flow to check it. A lack of specific focus on food allergies and intolerances during the customization process was also an issue. In most cases, only a limited number of products could be customized. On Wolt, a delivery aggregator, the availability of nutritional information was not consistent across restaurants, making it difficult to find for users.
Therefore, the user experience could be improved by allowing users to adapt the food composition to their specific needs (e.g. vegetarian, vegan, allergies, intolerances, etc.) in a clear and consistent way within the screens of the ordering user flow.
Competitor logos
TASK FLOWS
Next, I created storyboard for the different use cases and laid out the task flow for three different scenarios of use: ordering in-house, ordering pickup and ordering home delivery, which can be selected in the first screen of the app.
In the following prototyping phase, I focused on the in-house ordering process.
SToryboards
Big-picture storyboard for persona Onie D. Metcalf ordering home delivery
Close-up storyboard for persona Onie D. Metcalf ordering home delivery
TASK FLOW
Final task flow for ordering food in-house (after usability testing)
USABILITY STUDY
I conducted two rounds of usability studies. Findings from the first study helped guide the designs from wireframes to mockups. The second study used a high-fidelity prototype and revealed what aspects of the mockups needed refining.
PROMPTS
The tasks participants were asked to complete in the low-fi prototype
AFFINITY DIAGRAM
Affinity diagram based on the low-fi usability test
KEY InSIGHTS
Users found the two-screen menu selection process confusing / unclear
Before the usability study, users had to select the type of menu they wanted to see and could tap an Info icon to receive information about each menu. In the following step, they had to select any food allergies or intolerances they had.
After the usability study, the whole process was simplified in one single screen with chips that allow users to select all of their preferences at once. From here, users can also change the delivery option (home delivery, in-house or pickup).
The words "allergy" and "intolerance" don't appear anymore, as users might want to exclude certain ingredients for other reasons.
After the usability study, the whole process was simplified in one single screen with chips that allow users to select all of their preferences at once. From here, users can also change the delivery option (home delivery, in-house or pickup).
The words "allergy" and "intolerance" don't appear anymore, as users might want to exclude certain ingredients for other reasons.
Users would like information about when their order will be served
A progress bar indicating the approximate waiting time was added to the order confirmation and order overview screens to reassure users that the order is being taken care of and give them something to look at while waiting.
Users need to be made aware of the Serving Order functionality / Users need confirmation of their actions
I added an info box at the top of the menu screen to let users know they could change the order in which single items are served later on in the ordering process.
This accommodates both users who want to receive different courses at different times to follow the typical structure of an Italian meal and users who have different eating habits.
I added a feedback message confirming an item has been added to the cart. The cart icon also changes and displays the number of items added.
This accommodates both users who want to receive different courses at different times to follow the typical structure of an Italian meal and users who have different eating habits.
I added a feedback message confirming an item has been added to the cart. The cart icon also changes and displays the number of items added.
Info box
Feedback message
Users cannot easily recognize how to change ingredients
During usability tests, the Pen/Edit icon proved to be the most readily recognized affordance to signal the ability to change an ingredient.
Users want more information about the portion size / Users want calorie information
The actual size of portions was added, as well as calories and the option to double the quantity of a specific ingredient.
USER INTERFACE DESIGN
The Your Way app color palette is dominated by earthy brown shades reminiscent of warm baked food, complemented by a contrasting green to symbolize freshness. Both the typefaces and UI components have rounded corners for a friendly, approachable appearance. Drop shadows are used to suggest elevation and interactivity.
UI COMPONENTS
INTERACTIONs
Change ingredient interaction
Change size swipe interaction
(tap is also possible)
(tap is also possible)
LIGHT AND DARK COLOR SCHEME
ACCESSIBILITY & INCLUSIVENESS
In the design process, I took care to consider accessibility and inclusiveness to make sure the Your Way app can be enjoyed by the highest number of users possible.
1.
Provided access to users who are vision impaired through adding alt text to images for screen readers
2.
Used a navigation drawer that is screen-reader friendly
3.
Ensured all color combinations are WCAG 2 AAA compliant
4.
Minimized small texts
5.
Used plain, inclusive language to avoid any negative or judgmental connotations, e.g.:
The small-portion menu is not called 'Kids Menu' because adults might also want to use it if they are on a diet or for other reasons
I ditched the words 'intolerance' and 'allergy' and simply added 'No fish', 'No milk', etc. options, so that it feels more like a choice than a limitation
The ingredient list is introduced by a simple 'Contains' rather than 'Ingredients'
(Final) Prototype
Click on the image to see the (final) Figma prototype of the Your Way app MVP.
GOING FORWARD
Going forward, it would be very interesting to bring this project to the real world and adapt it to the requirements of real stakeholders.
For example, I accommodated the usability study participants' wish to pay after the meal when they order in-house. This, of course, would need to be checked against real business policies, as restaurant owners might want to have customers pay beforehand to avoid the risk of them leaving the restaurant before paying :)
Another aspect that could be examined in more depth is the kind of dietary allergies and restrictions that exist to offer a menu that is as inclusive as possible.
WHAT I LEARNED
This project showed me the importance of user research. I loved to hear about what users needed and why, and identify issues and pain points I didn't consider in the first place.
I also had the opportunity to realize how designing for people with special needs (dietary requirements, in this case) can help come up with options that benefit everyone in the end.
Google Sites
Report abuse