Role UX UI Designer
Timeline 80 hours
Tools used Figma, Photoshop, Illustrator
Company Background
DoorDash was founded in 2013 by a group of Stanford students in Palo Alto and backed by Y-Combinator. They offer logistics that connect hungry customers, on demand delivery drivers, and restaurants together. Currently, they are available in over 4000 cities spanning across the US, Canada, and Australia. They are currently one of the top 4 on demand food delivery service apps along with GrubHub, Uber Eats, and Postmates.
Problem
When users order food for delivery using any of the major apps, they can only order from one restaurant at a time. Sometime, the customer may want to order a specific item from one restaurant and another item from another restaurant. Currently, in order to order 2 different restaurants, you would have to create 2 separate orders. Also, this creates additional overhead, requiring 2 different drivers to deliver the 2 separate items. If the user had the ability to add a second restaurant to their order, then the orders could be combined and the driver resource could be simplified to 1 driver. Obviously, there will be additional logistics to consider so implementation is dependent on things like distance, price, and time.
Project Goals
•The goal of my project based on my problem statement is to:
•Research and confirm if users want the ability to order from a second restaurant within the same order
•Implement adding 2nd restaurant order to main DoorDash app through mockups and wireframes
•Confirm implementation of feature through usability testing
Design Process
EMPATHIZE
Market Research, User research, Persona
To understand a problem and its solution, I have to empathize with the users’ behaviors, feelings, and thoughts when they encounter that problem. Once I understand this, then I can go about figuring out how to address those issues.
Market Research
I researched the market for on demand food delivery apps and summarized the most important information related to use, cost, time. I also researched info related to customer’s preferences to the delivery process to make sure the implementation is realistic. After doing the research, I learned:
•54% of users look for a restaurant first, then look for it in the app
•86% of consumers use food delivery services at least once/month
•Most customers are willing to wait around 40 mins for an order
•For delivery drivers, they will accept jobs when it meets a minimum target of $1.00 per mile based on the time
User Research
Creating standard interview questions allows me to compare and contrast the differences between users when asked the same questions. I can then evaluate this information to make informed decisions on how to implement my UI design.
After completing the 1:1 reviews, I learned the following:
•Every user has used at least one of the food delivery apps. If they had the option, most would also have their food delivered due to convenience.
•Users would also be willing to pay more for the ability to order from 2 restaurants in the same order
•Every user cited concerns with delivery time and the high delivery fees
•Participants ranged in their use of delivery apps. Some used them almost every day and others used it occasionally, like once weekly or once a month
Persona
After finishing all the user interviews, I created the following personas. I believe these best represent the target user’s feelings, behaviors, wants, and needs when it comes to wanting to order food from multiple restaurants using delivery apps. Creating a persona helps me to figure out how I need to design in order to meet this imaginary user’s needs.
DEFINE
User Flows
Once I know what causes the user pain and frustration, I can begin to create the requirements which specifically address those pain points. I learned I have to identify at a very high level what functionality and features my solution needs to solve the users’ problems.
User Flow
Here, I started mapping out the basic flow chart for how adding a 2nd restaurant to your order would fit into the flow of the core DoorDash app. In summary, the process itself is very straightforward requiring only a decision point. Most of the processing would have to happen in the back end and logistics. The app would have to coordinate finding the right driver and guiding them the most direct route from their current location to picking up 2 food orders.
IDEATE
Wireframes
Ideation allows me to brainstorm all the specific details to address the issue and not judge them right away. I learned not to immediately judge ideas when coming up with them in order to maximize my ability to choose the best design.
High Fidelity Wireframes
My high fidelity wireframes fill in the details not specified in my low fidelity mockup. Things like colors, button sizes, position, fonts, images, etc. have been further defined to match based on the DoorDash design language.
PROTOTYPE
Prototyping
Once I have all my ideas, prototyping to create a functional example of my ideas is very important. It is this first time where I get to see my idea behaving in an actual usual form and I can quickly see how my idea came together
Prototype
Once I defined the wireframes, I needed to build out a functional prototype to observe the actual behaviors I specified made any sense. The Figma helped me build a basic prototype to mimic the typical user flow of the DoorDash app.
TEST
Usability Testing, Test Interpretation & Prioritization, Iterated Prototype
Finally, I need to test my prototype to make sure the design behavior is what I expected. It is here where I learn if the choices in my design are correct or whether I need to revise the design.
Usability Testing
When I completed my prototype, I created a script for my test subjects to follow when running my usability tests. I also prepared a set of questions to learn their thoughts when using the prototype and if they found any difficulties with using my design.
Usability Test Results
•My female test subjects preferred searching for restaurants using the search box first instead of looking for them on the map. The male subjects used the map function just fine.
•The process of ordering food was straightforward in both instances of ordering from the first and second
•1 of the participants highlighted that the 2 and 5 mile buttons were redundant in the map function. The map should automatically filter the available restaurants in the background. Removing the button would also clean up the screen from having too much clutter.
•1 of the participants recommended changing the “Add a Second Restaurant” button to a solid color rather than a white button with border to better match the design language. They also recommended changing the font size to be a little bigger.
Affinity Map
Once I completed my usability tests, this affinity map helped me to map out the successes, struggles, and other feedback regarding my design. I used this information to understand what I did well and what things to improve upon in my next version of the design.
Updated Design:
Based on the feedback, I’ve updated my design to incorporate all the changes I believe made the most sense to address the frustrations my test users found during the user test studies.
Conclusion:
This project showed me that not all users want the same thing when it comes to delivery app features. However, there are a few core principles that users expect when ordering online like keeping delivery costs low and focusing on reducing delivery time whenever possible. Also, I learned that DoorDash’s core ordering process has been refined very well so adding my “2nd Restaurant” design following their process was straightforward to add.
I just had to justify the need for users to ordering from a 2nd restaurant through tons of market research and user interviews. On the other hand, the ability to add the feature to order from a 2nd restaurant requires more work on the back end. This may be the reason why DoorDash chooses not to implement this feature now. Regardless, my project has showed me that design alone doesn’t make a good app. Tons of research and iteration are needed to support the design.
