YOUR WAY
A native app that helps people adapt their food orders to their specific needs.
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.
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?
"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.
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.
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.
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.
Users found the two-screen menu selection process confusing / unclear
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
Users need to be made aware of the Serving Order functionality / Users need confirmation of their actions
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
Users want more information about the portion size / Users want calorie information
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
(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.
