DoorDash Redesign

A case study on how to make food ordering simpler.

cover_image
OVERVIEW

The first online food order was a pizza from Pizza Hut in 1994 and since then consumers have shown a growing appetite for ordering via an app and eating at the comfort of their own homes. The market is growing at such a rapid pace that UBS forecast delivery sales could rise an annual average of more than 20% to $365 billion worldwide by 2030, from $35 billion.

Predictably, growth in market size has also led to a growth in a cutthroat competition. We can now order food via a number of services like Grubhub, Uber Eats, DoorDash, Caviar, Postmates, etc. While an increase in competition means more discounts for consumers, it has created a wartime scenario around the entire food delivery space where every difference matters.

With this project, I suggested some changes in DoorDash’s app that focuses on increasing the conversion rate by decreasing the number of interactions and making the interface more intuitive to use.

DURATION

Jan 17 - Jan 31, 2019 (2 weeks)

ROLE

Visual Design

Interaction Design

Motion Design

TEAM

Solo Project

TOOLS USED
doordash_tools
PROJECT GOAL

Increase the order conversion rate by decreasing the number of interactions and making the interface more intuitive to use.

RESEARCH

Contextual inquiries with 3 different users.

To start off, I conducted contextual interviews with three different users to understand the challenges that they face inside the app. I have used these interviews throughout the project to guide my design decisions.

users
PROBLEMS AND SOLUTIONS

Five major problems and solutions in the DoorDash ordering experience.

target_pain_points
target_pain_points
target_pain_points

The biggest challenge of any redesign is the lack of user research and quantitative data and thus I held myself back from introducing any standalone features in the app. Instead, I primarily focus on interviewing certain users and observing their behavior with the app. From my interviews, I found following pain points and later ideated the solutions:

1. Ineffective Home and Category Page

doordash_home-page_@

The biggest problem that I discovered with the home page is the inconsistent real estate distribution between different restaurants because some restaurants have food photos while others don’t. In the above situation, I observed that all the users completely skipped ‘Kin Da Restaurant’ because it tends to get lost between two restaurants with big photos.

categories

Existing categories flow

  • The categories section takes a lot of valuable real estate.
  • The categories section does not show basic information for a restaurant like ratings, cost, and cuisine. Without this information, users found it really difficult to make a decision about that category and dive right into it.
  • ‘See All’ button on the category section is at the very bottom and is only visible when the user scrolls to the very bottom of the section.
  • The categories page does not have an option to sort or filter the list. This especially proves challenging for a user when the list is really long.

Solution

home-page

Existing home page

home_redesign

Proposed home page

restaurant_card_changes

Key changes and rationale:

  • I revised the design of restaurant cards by shifting the image to left. It resulted in less real estate consumption and easy scanning of information when presented in the form of a list.
  • I have changed the UI of the category section on the home page so that a user can scroll horizontally to get a glimpse of restaurants in that category. Further, the restaurant display is consistent with other restaurant cards and shows needed information such as ratings, cost, and cuisines. Also, I changed the position of ‘See All’ from bottom to top-right as users are more familiar with this placement.
  • Introduced sort/filters option on the category page so that a user can easily discover a restaurant without the need of going through the detail of every restaurant.

2. Inaccessible filters

filters

While I like the fact that the sort/filters are displayed as quick actions on the app where a user can directly tap and implement it, but I also found some limitations to it.

  • Sorting has only two options: Delivery Fee and Default and does not support other use cases such as sorting by Delivery Time, Ratings and Cost.
  • Cuisine filter does not let you select multiple cuisines at the same time and does not support the case where a person might be interested in exploring restaurants with Vietnamese or Thai cuisine.
  • Sort/filter option gets completely hidden on scrolling down(right image) and a user needs to scroll all the way up to update it.

Solution

existing_filters

Existing filters

filter

Proposed filters

Key changes and rationale:

  • Introduced more sorting options such as Delivery time, Ratings and Cost as it will help in the quick discovery of restaurants.
  • Multiple selections of cuisine will further allow the users to apply filters effectively and find a restaurant quickly.
  • On the scroll, sort/filters now stick to the top bar allowing users to access it from any point of the page.

3. No vegetarian filter

no-veg-filter

While the DoorDash app supports a user like Rohit on the restaurant discovery phase by giving him a vegetarian filter, it hardly does so in the food selection phase. During the interview, I found Rohit going through the description of every dish to make sure they don’t contain any meat. This disrupts the whole food ordering experience for vegetarian users and is a big pain point.

Solution

veg-before-and-after

Key changes and rationale:

Introduced a Veg only switch after the basic restaurant information. On activating the switch, only vegetarian options will be shown in the menu. This will allow user groups like Rohit to quickly find vegetarian options for any restaurant.

This will give an edge to DoorDash over other food delivery companies as it will drastically reduce the order time of vegetarian people and improve their overall experience.

4. Opportunity for a better food selection experience

selecting-food
  • A restaurant menu in DoorDash is divided into different sections with their own individual pages which makes the entire ordering process too lengthy. Imagine for a second that you need to order an appetizer, an entree, and a dessert. To achieve this task, a user needs to navigate back and forth between 4 different pages to make a selection which slows down the flow and increases the cognitive load.
  • Certain items in a menu support customizations that require a new page for selection but it also opens a new page just for adding an item with no customization.
  • No feedback on the menu page for which item has been added to the cart. If a user needs to change the quantity of an item, he needs to first open the cart -> select item -> change quantity. This takes the user away from the menu and breaks the flow.
  • No indication of the total cost of items on the cart button. This is annoying for a budget conscious user like John who keeps on switching between menu and cart just to see the total cart value.
  • Most of the items on the menu lacked photos. This is especially a turn off for a visual being like Sarah (prefers eating at restaurants) who decides items based on photos and not the description.

Solution

Section Navigation

section-navigatio

Existing section navigation

menu-1

Proposed section navigation

Key changes and rationale:

  • I have changed the layout from a closed menu to an open menu where the user can directly dive into the menu by scrolling down.
  • Introduced a menu button which lets a user to quickly jump between different section without navigating between different pages.

    This completely removes the back and forth actions to navigate between different sections and reduces the cognitive load on a user.

Adding an Item

existing-add-item

Existing adding an item interaction

add_item-1

Proposed adding an item interaction

Key changes and rationale:

  • Changed the layout of the customization page to a modal. This lets the user feel that he is still on the same page and makes the overall navigation simpler. The user can further dismiss the modal by a simple swipe down instead of reaching all the way to the top left cross icon.
  • Introduced a ‘+’ button directly on the menu. So instead of directing a user to a new page, a user can directly add/remove an item from the menu. It further leaves visual feedback on the menu about which items are present in the cart. For items with customizations, the customization modal will open after tapping on the ‘+ button’. This reduces the number of steps to add an item and thus also improve the conversion rate.
  • Removed the bottom toolbar to give more real estate to the menu page.
  • Added total cart value in the ‘cart button’. This will help a budget-conscious user like John and let him know the total cart value without the need to actually visit the cart.

5. Accidental checkout prevention

checkput

Have you ever been in a situation where you accidentally transferred money to someone? How did you feel? Frustrated, right? I noticed the same frustration when one of my interviewees accidentally ordered because all it needs is a single tap. Fortunately, he was able to cancel the order before the restaurant accepted it.

This could be a major setback for a user like John who is budget conscious and goes an extra mile to save money.

Solution

checkout_2

Existing checkout interaction

checkout-2

Proposed checkout interaction

Key changes and rationale:

Revised the payment process trigger from tap to right swipe. This will prevent accidental order placements and will lead to better user experience. Further, I introduced a subtle animation that will inform the user about the interaction.

CONCLUSION

What I learned from the project

I am sure that the good folks at DoorDash must have spent countless hours creating what we see now. They have access to a huge amount of data gathered from a number of qualitative and quantitative researches and know better about user behavior and their goals.

Because of the lack of access to DoorDash’s user research, I held myself back from introducing any new features. Instead, I focused on improving the existing design based on user interviews.

The vegetarian filter introduced in the restaurant page will vastly help user group like Rohit. Images for every food item will augment the ordering experience for visual users like Sarah. Further, the cart value on the cart button and the swipe checkout will help DoorDash to cater to budget-conscious users like John.

Additionally, the design optimizations by reducing the number of steps in the section as well as item addition phase should increase the conversion rate of the DoorDash app and give it a necessary edge over its competition in this wartime scenario surrounding the food delivery space.

What’s Next?

The amount of research that was done by me was very limited because of lack of time and thus a lot more research and usability testing need to be done to prove the viability of my designs.

Anyways, I had a great learning experience while working on this project. I got to deeply observe the various UI elements and interactions in the app and appreciate what the current design team has already accomplished. Further, I had a blast exploring the Principle for interaction design.

Other Works

StardogProject type

DocOn TVProject type

TargetProject type

Lift AcademyProject type

DoorDash RedesignProject type

RootsWeb Design