Adding allergy-friendly features to Doordash
Role
UI/UX Design
Tools
Figma, Ilustrator, Photoshop
Company
Doordash
Timeline
2 weeks
The Challenge
As someone with a severe nut allergy, I want to be able to order food without having to worry about taking out my emergency Epipen. But Doordash is not the greatest when it comes to this concern that affects not just me, but over 20 million people in the United States alone.
The goal was to add features for a more allergy-friendly Doordash, so that folks like me can stay safe and eat good :)
The Result
Spoiler alert! Witness the allergy-friendly redesign in action. You can see my design journey below to explore how I got here. ↓
Doordash has been criticized for its lack of allergy-friendly UI for years:
The Approach
User Interviews
11 user interviews were completed with age demographic ranging from 20-45 and gaining insights from both consumers and business owners. Here is what I found:
There is no consistent and easy way to indicate a user has an allergy.
“It sucks that I can only write down my allergies in the special requests section, and sometimes restaurants don’t allow you to write anything there.”
There are barriers to communication between customers and restaurant owners, leading to order cancellations and anxiety.
“Most of the time, I end up calling the restaurant to make sure they know I have an allergy, but sometimes they do not answer or there is a language barrier.”
“I run a Thai restaurant and cross-contamination is pretty high so we can’t guarantee anything is nut-free but I don’t know how to tell them.”
Users feel unsafe using the mobile app because there is not enough standardized UI/practices dedicated to being allergen-friendly.
“My friend has a deathly allergy to coconut, and whenever we do group orders, I get worried that I will accidentally order something she can’t eat. I have no way of knowing if something has nuts or if cross-contamination is bad.”
“After an allergy scare, I no longer use Doordash, even when my friends are ordering something for dinner or I am just too lazy to cook.”
User Journey Map
The (Post-Research) Problem Statement
Despite the growing awareness and concern for allergen-friendly dining options, the DoorDash remains limited in proper communication and inadequately transparent in displaying allergen information.
This deficiency in comprehensive allergen disclosure and accessibility poses a serious threat to the health and well-being of customers with food allergies preventing them from confidently and safely ordering meals through Doordash.
The Solution
Evaluating Pre-existing Features
tl;dr With special requests and ingredient listings not able to solve the problem, I delved into wireframing new features.
Before delving into wireframes and new design concepts, I wanted to see if there were pre-existing features on the app that could be slightly tweaked to solve the problem. Sometimes, reinventing the wheel can complicate not only the user’s experience, but also developer and other stakeholder needs.
Imposing mandatory acceptance of special requests in stores leads to two primary concerns: Customers would be required to manually input their allergens with each order, leading to potential inconvenience. Restaurant owners may encounter requests extending beyond allergies, leading to operational delays and complexities.
Requiring restaurants to add allergens also brings up issues: Business owners would have to manually add ingredients for each dish, and edit as menus change. Users may not find their allergy listed if it is more niche.
User Flow
Before developing wireframes and prototyping, I created a user flow that organized how new allergen-friendly features would work within the Doordash onboarding and checkout processes.
Wireframing
Allergen Onboarding: To address the initial challenge of users' inconsistency in noting their allergies—and recognizing the inconvenience of enforcing mandatory acceptance of special requests—I devised a solution of enabling users to specify their allergies within their profiles, seamlessly integrating this feature into both the onboarding process and their account settings.
A quick usability test with 5 participants was completed with these lofi display options to quickly gage user feedback. I measured time on task KPI and discovered that Option 4 achieved the lowest time on task, as users were familiar with the UI (which appears later in the app) and didn’t have to scroll or search repeatedly to complete the task at hand.
tl;dr These are pain points rooted in issues of communication and transparency.
Dedicated Allergy-friendly Section: Drawing inspiration from Uber Eats Canada's approach to allergy-friendly selections, this category aggregates restaurants prioritizing allergy-friendly practices. These establishments, whether certified, offering comprehensive allergy details on their menus, or operating with specialized facilities free from major allergens, are grouped into a singular category. This setup aims to instill a sense of security among users when placing orders, effectively reducing apprehensions regarding potential allergic reactions.
Prototyping
Cross-Contamination Notification: Another pain point highlighted the communication gap between business owners and customers. Implementing cross-contamination warnings directly on the menu page empowers restaurants to proactively inform customers. This approach eliminates the need for customers to call the store before ordering, significantly streamlining the checkout experience.
Allergy Profile Settings: Allergens could be selected in during the onboarding process, as well as updated on your account settings. Users can also turn off cross-contamination warnings that appear for restaurants if they so choose.
Allergy Friendly Restaurants: Users with severe allergies can select from certified allergy-friendly restaurants that have little to no cross-contamination or have a specific allergy-friendly menu available.
Cross-Contamination Warnings: For restaurants that are not certified allergy-friendly, users can receive cross-contamination warnings with varying levels of severity to ensure users feel safe ordering the food they crave.
Learnings
I gained expertise in collaborating with existing design systems, crafting design assets and features that seamlessly integrate with Doordash’s brand identity and information architecture. This proficiency ensures a cohesive and harmonious user experience while aligning with Doordash’s established visual language and structural framework.
Incorporating features tailored for a particular user base taught me the significance of considering broader implications beyond the intended users. When crafting an allergen-oriented redesign, it becomes crucial to anticipate its impact not only on users with allergies but also on restaurant owners, non-allergic users, and internal stakeholders such as engineers and the wider product team. This holistic approach ensures that the redesign caters to diverse needs and minimizes unintended consequences across all involved parties.