DURATION

Jan 17 - Jan 31, 2019 (2 weeks)

ROLE

Visual Design

Interaction Design

Motion Design

TEAM

Solo Project

TOOLS USED

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.

PROBLEMS AND SOLUTIONS

Five major problems and solutions in the DoorDash ordering experience.

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

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.

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

Existing home page

Proposed home page

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

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

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

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

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

• 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

Existing section navigation

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 adding an item interaction

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

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

Existing checkout interaction

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.