top of page

DoorDash Case Study

Extending DoorDash for dietary restrictions

Purpose

To make doordash more accessible to people with dietary restrictions

Role

UX Researcher, UX/UI Designer

Tools

Figma, Procreate

Collaborators

Keri Chen

Pavit Saluja

Duration

7 weeks

Jan 2023 - March 2023

iPhone 13 Pro-2.png
iPhone 13 Pro.png

Background

Food delivery has become popularized over the past few years with the rise of different online ordering apps and as technology continues to grow and expand. Not to mention the ease and convenience of having food from your choice of restaurant delivered right outside your door with just the tap of your finger. While there are many different food delivery apps, my team decided to focus on Doordash — the current food delivery app with the majority US market share at 57%, and has around 20 million monthly users (including international markets: Australia, Canada, and Japan). With many users of varying needs, it is difficult to cater to everyone, and functionalities of the app are generalized. 

However, while it relatively easy to order food in general, we have found from personal experience and user interviews that it is difficult to order food with restrictions like low -sugar, low-calorie, or other allergen/dietary restrictions due to the lack of information and filtering ability on Doordash. We believe that by adding these additional features and extending the existing Doordash app, it will not only benefit users with these types of restrictions but it will also help users in general to make the healthiest choice they can due to the additional information that they are able to access. With these changes, people with dietary restrictions should be able to more efficiently and effectively choose the food they need, allowing them to maintain healthy lives.

Research 

Methods:

We decided to conduct interviews to gain a more in-depth understanding of the experience that users with dietary restrictions or users who order for people with dietary restrictions have when experiencing food delivery apps and what they would change about the apps or additional features they may want to add to the apps. We interviewed 10 people who either have dietary restrictions or order for people with dietary restrictions. In addition to collecting regular background information (name, age, occupation, etc), we also asked about their frequency of ordering, the app they used, their general interactions with the app regarding dietary restrictions, and if they are able to communicate effectively with the restaurants regarding their dietary restrictions.

Interview Questions:

  1. What is your name?

  2. What is your age?

  3. What is your ethnicity?

  4. What is your current occupation?

  5. How often do you use food delivery apps?

  6. Which food delivery apps do you use primarily?

  7. Do you or anyone you order food for have any dietary restrictions? Please elaborate if you have any.

  8. Have your dietary restrictions ever influenced how you’ve interacted with these apps?

  9. Do you find that you can find food in food delivery apps that match your dietary restrictions? 

  10. Do you find that food delivery apps have enough features that help you communicate your dietary restrictions to the restaurant you are ordering from?

  11. What changes/features would you like to see in these apps with respect to food restrictions?

Findings:

Frame 2.png

8/10 users expressed difficulty in finding a restaurant that meets their dietary restrictions. 

In our interviews  8/10 users expressed difficulty in finding a restaurant that meets their dietary restrictions. Our users would have to do their own "digging" to find restaurants that meet their needs. This meant that they would do background research looking at the restaurants menu outside of the app, call restaurants ahead of time to confirm certain items don't contain their allergens, stick to restaurants that were familiar rather than trying a new place on the app, or opt to make their own food

“Sometimes my dad will opt to just not order food because making his own food is easier than ordering from these restaurants”  - Female, 24, orders for father with diabetes

9_10.png

9/10 users expressed that they would like additional features on Doordash to help support their dietary restrictions 

9/10 users wanted additional features. Users suggested filters to make it easier to search for food on the Doordash home page or throughout each restaurant's menu and icons next to food menu options so that they can efficiently scrolling through the menu without having to open each food description.

How effective the comments/special preferences section is on the Doordash app remains inconclusive. 5/10 users said that the section was enough for their needs. However, 1 user said that they never really consciously tried using it, and the other 4 users said it was still lacking, hard to use, or hard to know if the restaurant had even read it their comments.

Problem Statement

People with dietary restrictions need to be able to efficiently order food that matches their food restrictions in order to nourish their body within their busy life.

 

How Might We:

  1. Help people with dietary restrictions identify items that match their dietary restrictions.  

  2. Help people with dietary restrictions communicate their dietary restrictions to the restaurant, so those ingredients can be excluded from their order.

  3. Help recommend food that matches the dietary restrictions of these people.

User Personas

UX Flows

Based on our two personas, we created 2 UX flows to cater to their different needs.

Esha's Flow:

Patrick's Flow:

patricks.png

Lowfi Prototypes

Both of our lowfidelity prototypes are designed based on a UX Flow that combines the 2 UX flows from above

Final UX Flow:

lowfi prototype flow.png

Prototype A

prototype a.png

For Prototype A, we chose to place the filter next to the other gray filters on the Doordash screen in order to keep consistency for the user.

Prototype Home Screen vs Doordash Home Screen

Home Screen v Doordash Home Screen.png

We decided to divide the filters into allergens and diets in order to minimize scrolling when filtering out dietary restrictions. For the both allergen and diet filters on the home screen we used a pop up menu in order to display the filter information without disrupting the currently open home page. For this prototype we used checkboxes to display the restrictions in a small amount of space so users can quickly input their dietary needs. On the restaurant menu view, we placed the filter next to the search bar inspired by how Airbnb places their filter next to the search bar.

Prototype Filter Icon v Airbnb Filter

Prototype A Filter v Airbnb Filter.png

After an item is selected, the user can then request to exclude certain ingredients in the item by selecting their allergens in checkboxes. This affordance appears on the item description pages as users are already customizing their order on that page. 

Prototype B

Prototype B.png

Like Prototype A, we chose to place the filter next to the other gray filters in order to keep consistency for the user. However, this time we condensed the dietary restrictions into one filter so that the user can filter to minimize unnecessary time navigating to different screens.

Prototype A Home Screen v Prototype B Home Screen

Prototype A Home Screen v Prototype B Home Screen.png

For Prototype B, rather than using checkboxes or a pop up menu to filter out allergens, we used separate screens for the filter and used big pictures to indicate the different diets and allergens.

Prototype A Filters v Prototype B Filters

Prototype A Filters v Prototype B Filters.png

This way the prototype is more visually engaging and easier for the user to find their food restrictions.

User Tests

Methods:

For our user testing, we each interviewed one person that we knew that had dietary restrictions or ordered for someone with dietary restrictions because these features would be the most beneficial to them, so it is important to get their general thoughts in their interactions and how they use it. We found our users from our past interview sessions or were people that we knew in general that used Doordash and had different allergens/restrictions. Our users were college students or recent graduates with their ages ranging from 21-24 years old.

User Test Questions:

Demographic Questions:

  1. Gender

  2. Age

  3. Ethnicity

  4. Occupation

  5. Food Restriction

 

For both Prototype A & B:

  1. Can you locate the filter to recommend restaurants based on your dietary restrictions

  2. Can you filter out items in the restaurant menu with nuts

  3. Can you exclude nuts from the item you’ve selected

  4. Can you walk me through how you would order your food based on your dietary restrictions?

 

Post Task Questions:

  1. What did you like most about each prototype

  2. Which prototype did you prefer, why?

  3. Is there anything you are confused about?

Results:

In general, all 3 of our users found the prototypes to be very straightforward and had no issue in figuring out where the filters were on the home screen and restaurant menu and how to correctly use them, as well as how to exclude certain items during the food selection process. 

For Prototype A, ⅔ users enjoyed the icons next to the food items that allowed them to get an overview of what different foods had; ⅔ users also enjoyed the pop-up menu since that helped them know they were on the same screen. For Prototype B, a feature that was universally liked by all users was the way in which the filtering screen was presented with the picture icons as it provided users a visual representation of the allergen/dietary restriction as well as allowed for text on a bigger screen. However, 1 user did enjoy the checkbox way of filtering instead.

While the filtering process was generally very straightforward and most users could navigate it, all of the users we talked to did find the process to be a little repetitive due to how they have to filter through each part of the process from the home screen, restaurant menu, and food selection in both prototypes. One thing that one user found confusing in Prototype A was the sugar slider as it indicated low-high sugar level, and they felt that it didn’t accurately represent what the sugar slider would be for, and also that it had a negative connotation with ‘high’ sugar. On the other hand, one thing that another user found confusing in Prototype B was the similarity between screens 2 and 4, which made them feel like they were filtering the same section again, but it was for a different part of the process. Overall, all users preferred Protype B because it was more consistent with Doordash and they liked the pictures associated with the different food restrictions. However, many users also suggested implementing different features from Prototype A like the icons and pop up menu to blend into Prototype B.

High Fidelity Prototype 

Rationale:

From our user testing, we found that our users prefer a UI that aligns closely with the Doordash that they already know. In addition, we’ve concluded that our users like to see larger pictures and fonts so that they can quickly look for their dietary restrictions, rather than a checklist. This aligns with the feedback where all our users preferred the big pictures and fonts from Prototype B as well as the icons in Prototype A that indicate the different allergens. All our users found that filtering at multiple sections feels redundant, so we decided to adjust the user experience by making the filtering section for the items a part of the item adjustment section rather than a whole page dedicated to the inputting the allergens to exclude from an item. 

Based on this, we decided to blend some of the features from A with B for our high-fidelity prototype since we found that while users enjoy Prototype B more, they also liked using some of the features from Prototype A like the icons next to the food menu items and a pop-up screen. We kept the underlying format of Prototype B and then added in the pop-up menu screens for filtering and icons next to the food items. Additionally, in our pop-up menu we decided to use the existing format with the selection-circles with pictures and larger font, and in the second pop-up menu in the restaurant selection process to have a checklist to help differentiate the two screens. In regards to the sugar management slider, we changed it from low-high to 0%-100% to give users a better accuracy in selecting their sugar.

Home Screen

Pop up Menu

Restaurant Filter Selected

Restaurant Selected

Hifi Prototype 1.png

Food Item Filter

Personalized Restaurant Menu

Item Selected

Added to Cart

Alternate Screens:

In addition, we made alternate screens for "Restaurant Filter Selected" and "Personalized Restaurant Menu" 

Original Restaurant Filter Selected v Alternate

Restaurant Filter Selected.png

For the Restaurant selection screen after the filter has been applied, we created an alternative screen where rather than going to a separate page, it stays on the home page. This way, the other filters are more easily accessible if the user wants to add any, and it is consistent with Doordash’s current design that stays on the home page. For this alternate screen, the users are ensured that their filter has been added because the dietary restrictions button has changed its color. We wanted to see if the users prefer the more personalized original screen that says “Restaurants for you” or if they like the alternate screen that is more consistent with Doordash’s current layout.

Original Item Filter Selected v Alternate

Item Filter Selected.png

The next alternate screen we have is the Food Item Selection.  In the original screen, we can see that it looks very similar to the look and feel of the regular Doordash App. Except at the top we have added a search function as well as an option to add/remove filters. Additionally, at the top of the screen we can see that there is a title bar with “Food Items for You” which helps to indicate that the filters have been applied and show a list of possible food items you might enjoy excluding the allergen/dietary restriction. In the alternate screen, after applying filters we can see that the screen takes you to a new page which helps to show that it is a different menu. There is also a customized search text which helps to remind you what filters you have applied as well as the search menu and filters option. The menu design is very similar to the original Doordash menu except with the exclusions and the added allergen icons.

User Feedback

Next, we showed our high fidelity prototype to 3 users with varying dietary restrictions (diabetes, vegetarianism, nut allergy). From their feed back we gathered that:​

3/3
preferred the Alternate "Restaurant Filter Selected" Screen

Users found it easy to access  other categories since it stays on the same page

2/3
preferred the original "Item Filter" Screen

Users appreciated how you could see the delivery and pick up time options 

2/3
liked the "Show results for" in the alternate "Item Filter Selected" Screen

Users felt assured that the filter was applied

2/3
felt that the Restaurant Filter Selected" Screen was cluttered

Users felt overwhelmed with the additional advertisements

Final Changes:

With this feedback in mind, for our final we decided to:

  • Change the "Restaurant Filter Selected Screen" to the Alternate Version

  • Alter the "Item Filter Selected" Screen by

    • Adding "Show Results for " for personalization​

    • Taking away ads to reduce clutter

    • Adding icons to show possible allergens and support the user's search in finding an item that matches their dietary restrictions

Final Prototype

Home Screen

Pop up Menu

Restaurant Filter Selected

Restaurant Selected

Final Prototype.png

Food Item Filter

Personalized Restaurant Menu

Item Selected

Added to Cart

Before and After Stories

Restaurant Filter Selected

A Restaurant Filter Selected.png

Because 3/3 of our user feedback indicates that they prefer the alternate restaurant selection screen, we changed the restaurant selection screen to the alternate version. Users preferred the alternate version that stays on the home screen because it is easy see, change, or reset the filters applied because they are easily accessible on the same page. In addition, users appreciated that the after screen was consistent with Doordash’s current filter features that also stay on the home page after the filters are selected on the gray tabs.

A Items Filter Selected.png

In our new version for the Item Selection Screen after the filter is selected, we took away the advertisement on the screen as the ⅔ of the users indicated that they thought the screen was cluttered. We also added a “Showing results for …” above the Food Items for you, because one user indicated that they liked this personalization feature from the alternate screen we presented. In addition, we also added icons to indicated potential food allergens to assure the user that they are picking an item that matches their restrictions.

Reflection

If I had the opportunity to revisit this project again, I would do a more thorough job on the user testing especially on the high fidelity prototypes to get more perspectives on how intuitive our design is. This would be done by user testing more people with varying demographics and dietary restrictions.

As someone with dietary restrictions myself, this project was particularly meaningful to me. I'm very pleased with this project and would love to see Doordash and other food delivery apps implement something similar to be more accessible to people with dietary restrictions. Eating should be easy. Everyone deserves that. 
 

bottom of page