APP DESIGN
TRAVE IT
01
APP DESIGN
DELIVEROO
02
OVERVIEW
For people with food allergies, the best way to deal with them is to avoid the foods that trigger their symptoms. However, this can be tough when using food delivery apps. We have smoothly integrated a new feature that helps you sort safe foods from the potentially harmful ones.
ROLE
As a UX/UI group project, we were challenged to add a new feature to Deliveroo to help people find meals for their food allergies.
Our job was to conduct a research, gather insights, prototype a user flow, test and integrate the new feature without impacting on the current visual identity of the brand.
tools
Personal Interviews
Survey
Prototyping
Usability Testing
Sketch
Principle
DURATION
7 days
expand
target audience
Despite being a well-known food delivery app, there is still a need to improve the experience for those forgotten users with special dietary needs.
1 .comparative analysis
To understand the marketplace, we looked at some food delivery apps. We kept track of each one's filters and content strategy.
2 .user research
To learn about our target audience and their experience with Deliveroo and other food delivery apps, we conducted some forms of research to gather insights.
3 .PAIN POINTS
By observation, understanding and analysis of the target audience's responses and experiences using food delivery apps. We gathered their pain points - few are highlighted here.
4 .PROBLEM STATEMENT
We made a clear description of the issue which also included a vision and methods used to make ways into solving the problem. It was used to center and focus the team from the very beginning to stay on track.
Young adults with allergies/intolerances need a way to easily find their food preferences in the delivery app so that the experience of ordering food will be safer.
5 .USER PERSONA
During the user research process, we built empathy with our target users and identifying exactly what they need from the product we're designing. Nick is our fictional representation of our ideal customer.
6 .design process
Filters' screen evolution
· 4 dietary filters:
organic, halal, vegetarian, vegan and gluten free.
· Not allowed to add a note about allergies. Need to contact restaurant.
· No filters for allergies nor special dietary needs.
· Option to add a note when placing an order.
· 3 dietary filters:
vegetarian, vegan and gluten free.
· Option to add a note when placing an order.
USABILITY TESTING
6
We tested new users and tasked them to order a gluten free meal.
4 out of 6 couldn't find the filter.
INTERVIEWS
7
We tried to reach our target audience in specialized supermarkets and restaurants.
Not delivery apps users.
SURVEYS
31
Any allergy?
What kind?
Used delivery apps?
Was it easy?
If not, why?
THE PROCESS
WHERE IS THE DIETARY FILTER?
Original App
First Iteration
Final Iteration
DIETARY NEEDS ARE NOT IN CATEGORIES?
Original App
First Iteration
Final Iteration
THERE'S A LACK OF DIETARY NEEDS FILTERS
Original App
First Iteration
Final Iteration
We started the design process with low fidelity wireframes and rapid prototypes. This is the way we iterated through many design options quickly.
We conducted 10 usability testings, and based on our users reactions we iterated until we observed they didn't encounter any problem or experienced confusion.
The task given was to order a vegan and gluten free meal.
"I don't have time nor patience to do so!"
Some of the responses we got from the surveys regarding why our audience had an unpleasant experience with food delivery apps, was that the lack of filters made them check meal by meal, ingredient by ingredient to make sure there was nothing it could be harmful.
"I'm concerned about my safety"
In the interviews, we heard first hand how some of our target audience stopped using food delivery apps after a few failed attempts. The lack of filters and communication options, made the experience a completely failure when realizing the app never passed the important note about allergies to
the restaurant.
"Where is the dietary filter?"
During the usability testing 4 out of 6 users couldn't find a way to set their preferences. Surprisingly, after trying to find the dietary needs filters without any luck, most of them ended up typing it on the search field.
Problems
1
We observed most of the users tended to go straight to the search field to type for their preferences instead of looking for the filters.
2
As mentioned before, 4 out of 6 new users seemed to not see or understand the icon as the place where they could set up their needs.
Solutions
1
We added a dropdown menu with the recent searches as an accelerator to speed up the process for those experienced users.
2
We slightly redesigned and resized the filters' icon to give more visibility to it. None of the testers missed it.
Problems
1
Testers' eyes were captivated by 'Categories' assuming the dietary filters would be under this section. They were getting lost scrolling down trying to find their dietary needs.
2
'Dietary' was completely missed by new testers. And when asked, they didn't relate allergies or intolerances with the current wording.
Solutions
1
After many iterations with the 'categories' wording, testers intuitively understood the difference in between sections. 'Cuisines' was the right one.
2
In order to take the testers' eye to the right direction we had to redesign the layout and use proximity to help them understand the relation in between sections.
We also noticed 'dietary needs' was better related.
Problem
1
Users with other allergies or intolerances rather than Gluten, have no way to sort their preferences.
Solutions
1
2
Since we believe all users with any special needs should have a satisfactory experience when using the app, we gave the option to add any other dietary needs the user may have.
We added the most common allergies or intolerances based on the survey's results.
7. TEST TO ENSURE SUCCESS
As we iterated on our wireframes, we moved them into Principle to create a digital, animated prototype. When we saw that several users could accurately interact with the prototype, we knew the feature had the flexibility and usability necessary to be a success.
