Doordash Redesign
This video tells the story of how I arrived at my solution.
Roles:
Needfinding, User Interviews,
User Flows, Wireframing, Vector Animation, Video Editing, Scripting
Timeline:
2 weeks
Tools:
Figma, Final Cut Pro, Adobe After Effects
Context:
This is my submission for the Kleiner Perkins Design Fellowship Program. The prompt was: "Redesign a feature from any of the companies in the Kleiner Perkins portfolio". I wanted to redesign the Doordash Dasher app, because my first job was as a Doordash delivery driver, so I really relate to the perspective of the user, and it's a problem space I'm passionate about improving.
Problem Statement:
How might we make accepting/declining orders on the road safer and less stressful for dashers (Doordash delivery drivers)?
Solution:
Dash Assistant: a hands-free voice command and audio notification system that reads out incoming order requests for dashers to verbally accept or decline and also allows the dasher to use "Hey Dash" voice commands to interact with the app while they're driving.
Empathize:
To understand my user and the problem space, I've conducted interviews with every dasher I know: my friend Ethan (who I actually introduced to Doordash in 2020), Carl (Ethan’s dad), and my girlfriend Melanie. Each conversation lasted about 30 minutes, and I got to learn about their perspectives and how much Doordashing has changed since I last did it a few years ago.
Ethan and Carl
Melanie
I also redownloaded the Dasher app and delivered three orders myself, just to empathize more with the user’s perspective and to gather some insights of my own. From these experiences, I compiled a list of 32 insights that I gained, and from those insights, I generated 28 “how might we” statements to start thinking about what problem I could pursue.
Define:
The statement I found most interesting was: “How might we make accepting or declining orders on the road safer and less stressful?”
Why is accepting or declining an order so stressful on the road?
As soon as a dasher receives an order notification, the dasher must parse through 10 identifiable factors and perform a quick cost/benefit analysis to decide if it’s an order worth accepting, all while a loud ringtone goes off and a timer counts down from 45 seconds. These are just a few of the questions a dasher asks themselves when they are analyzing an order:
What’s the dollar to distance ratio for this order?
Am I delivering for a fancy restaurant that could equal a bigger tip?
Am I delivering a lot of items that could translate to a bigger tip?
Is the delivery address in an affluent area that could equal a bigger tip?
Is the restaurant in a cluster of other restaurants, which would increase my chances of getting a double order?
If I’m delivering a double order, are the restaurants close together? Are the two dropoff locations close together?
Am I driving too far away from my starting location?
Is this restaurant usually early or late to prepare Doordash orders?
Is this a busy time for the restaurant?
Is the dropoff location near a good area to get orders?
If the dasher happens to be driving during this pandemonium, it’s always a stressful user experience, and more importantly, a dangerously distracted way to drive.
If there were a way to alleviate the stress and danger of this experience, then dashers would be safer, the roads would be safer, and there would be less liability for Doordash in terms of satisfying their customers and paying for accident insurance coverage. Almost every stakeholder involved would benefit greatly from solving this issue.
Ideate:
Inspired by the HMW, I created a POV (very much inspired by Carl) to guide my future ideas and design decisions.
Then, I jumpstarted my ideation process by using the crazy 8s method to come up with 8 quick ideas in 8 minutes. I listed out all the ideas on Figjam, and added some ideas I came up with later.
Out of these potential solutions to my problem statement I chose to pursue the voice command and audio notification ideas, because they seemed like the most realistic and effective solutions to my problem statement.
Back in my user interview with Melanie, she mentioned that her little sister would often sit in the passenger seat and interface with the Dasher app while she drove, which completely solved the stress of using the app on the road. Throughout the rest of my process I aspired to match the user experience of having someone in the passenger seat to use the app for you.
I researched voice command features for apps similar to Doordash and I was only able to find articles from 2018 about Uber releasing a voice command feature for navigation and accepting rides. Despite the articles, I couldn’t find any pictures or videos of the feature, or any documentation about how the feature specifically worked. Because Uber is a major tech company, I think that the online absence of their voice command feature likely suggests that they removed it or never fully launched it in the first place.
The closest thing I found to a working voice command feature for delivery drivers was
a reddit post of someone who programmed special tap sequences in the iOS accessibility settings to decline orders through a custom “hey Siri” voice command. Dashers loved the post and gave it 99% upvotes. The fact that people are willing to jerry-rig their iPhone settings just to get a voice command really shows how valuable this feature could be.
Prototyping/Testing Dash Assistant v1:
For my first prototype I wanted to create an audio notification that could read order notifications out loud and let dashers accept/decline them by voice command. I made a user flow chart to flesh out how dashers would interact with the system I would later name Dash Assistant.
The flow chart shows that when the dasher gets an order, the app tells you the price of the order, restaurant, and distance (which are the most important pieces of info according to my interviews). In the case of a double order (two joint deliveries in one order notification), or a Red card (a Doordash credit card) order, Dash Assistant would also include this essential information.
Dash Assistant then prompts the dasher if they want to accept the order and if they want to start navigation to the restaurant or drop-off address.
My main goal with the user flow was to avoid creating an user interaction similar to the frustrating automatic voice response systems often used by banks, hospitals, and customer service lines. These automated systems are usually extremely slow and overly concerned with confirming every input. Dashers deciding if they want to accept an order are faced with ticking countdowns and the possibility of missing out on other orders, so a fast paced, responsive user interaction is imperative. Also, if a dasher responds incorrectly to a voice command prompt, it’s not the end of the world, as they can easily pick up their phone and rectify the input.
Because speed is such a factor, what the audio notification feature does NOT say or do is just as important as what it does. Thus, my user flow does NOT prompt verbal confirmation for every user input, require lengthy responses, or prompt any of the inputs that dashers would not do on the road (confirm pickup, I’ve arrived at customer, complete delivery, payment confirmation). Reducing clutter throughout the user flow is key.
I tested my user flow chart by Doordashing and having Melanie read the order notification script word for word while I drove and responded to her prompts.
To turn on the audio notifications, I made a large toggle switch that can be accessed on the main home screen at all times. It’s especially prominent and accessible because dashers are often walking around restaurants, listen to music while they wait for orders, or just not on the road in general, so it’s important to make sure the audio notification feature can be easily turned off.
Original Home Screen
Prototype v1 Home Screen (toggle off)
Prototype v1 Home Screen (toggle on)
I decided to make the button always visible on the bottom right side of the screen, replacing the “map zoom out” button. I replaced the map zoom out button because it's a seldom used feature, and having all three buttons would just make the screen aesthetically claustrophobic.
When the audio notification is toggled OFF the toggle button is grey, and when it is ON the button turns red. I wanted this drastic color difference to provide the user with clear visual feedback on the audio notification status.
Original Order Notification Screen
Prototype v1 Order Notification Screen
I also added a countdown ring around the countdown timer on the accept button to create some subtle visual feedback for how much time the user has to make a decision. As time expires, the white ring decreases proportionally.
I had some of the people I interviewed try out my figma prototype and I used their feedback to move forward with my next iteration.
The video below is a quick walkthrough of a Doordash session using prototype v1.
Prototype v1 Demonstration
Prototyping/Testing Dash Assistant v2:
My biggest takeaway from my user flow test with Melanie was that although interactive audio notifications for orders were great, I still had to pick up my phone in the car to navigate, text the customer, remind myself about order instructions, and much more. To further eliminate such instances of distracted driving, I added a voice command feature that functions like Siri or Alexa, but just within the Dasher app. The feature is activated by saying "hey Dash", and the Dash assistant can respond to a variety of requests outlined in the chart.
The most common feedback I received about prototype v1 was that there was no visual feedback for when the audio notifications were playing. Ample feedback is important for any interactive system, and in this case, a lack of visual feedback could allow missed orders if there’s anything wrong with the phone or car's audio. I fixed this problem by adding a pulsing red gradient at the bottom of the screen to indicate when the Dash Assistant voice was speaking. My first prototype of this visual was a Siri icon ripoff that I placed in the top left corner of the screen. It informed my final visual because I realized it cluttered the screen, so I would have to come up with a more subtle option at the bottom of the screen.
Flashing Gradient
Although it would be great if dashers never looked at their phones on the road, the reality is that quick glances at the screen will likely still happen, especially to look at the map or to remind themselves about the order info. To further reduce this screen time, I made the font more legible for key information on the order notification screen, and also added a $/mi calculation so dashers don't have to be more distracted doing the math in their head. Someone also suggested that I put an text below the toggle for further clarity on whether the feature was on or not, so I also added and ON/OFF label under the toggle switch.
Prototype v1 Order Notification Screen
Prototype v2 Order Notification Screen
Prototype v2 got great feedback, so I had to ask my interviewees lots of questions to find ways to improve it for the final product.
The video below is a quick walkthrough of a Doordash session using prototype v1.
Prototype v2 Demonstration
Final Product:
The improvements I made for the final product were mainly focused on aesthetics. The original toggle button color seemed a bit off to people, so I experimented a bit and settled on a red that matches more with the app's color scheme.
Prototype v2 Order Notification Screen
Final Product Order Notification Screen
The pulsing red gradient also didn't provide enough information as it could have, so I changed it to an audio waveform so that I could indicate both when the Dash Assistant is talking and when it’s listening for a response.
Listening Mode
Speaking Mode
There was also a question about whether the "hey Dash" function could be used without the audio notification feature, so I created a separate toggle for the voice command feature in the settings page. This toggle switch is much more hidden, because there are no significant consequences if it is left on or off on accident.
Dash Assistant Description:
Dash Assistant is a voice command and notification system that makes using the Dasher app on the road safer and less stressful. When a dasher gets an order, it will read out key information to the dasher so they can simply accept or decline it with their voice. Navigation, texting the customer, reminders about the order details, and even calling emergency support can be done by saying “hey dash” and making a request. It’s just like having a friend sitting in the passenger seat to use the app for so the dasher can stay safe and keep their eyes on the road.
Final Product Demonstration
Reflection:
This project was a complete crash course in learning by doing. In terms of technical skills, I taught myself a lot of wireframing techniques on Figma, I learned Adobe After Effects when I realized I wanted to animate audio waveforms, and I had to really lean on my Final Cut Pro skills to get the video done on time. On a more macro level, I was reminded to trust the user's insights to show me how to move forward in the design process.
I'd like to thank Melanie, Ethan and Carl for lending me their insights, and thank YOU for reading!
The End!