DoorDash Customer Experience Redesign
holding-iphone-xs-mockup-2.jpg

Role: UX Research,  Design, Usability Testing

 

Tools: Paper, Pencil, Figma, Sketch

Background

Most people are not able to go out and eat because of  Coronavirus, online food delivery apps have created solutions for people who wants to order food to thier doors.  Given the fact that people are showing apprehension when it comes to going out for fancy dinner dates, family outings, and gatherings, an app like Doordash seems like a great opportunity.  Therefore it is very important to build an app which feels customer needs for a  successful food delivery solution.

As a young man who lucks the ability  to cook, and who is busy in life, it’s hard for me to spend extra time to cook.  Under this circumstance, food delivery/takeout apps become my good friends that helps me to save my time and eat better.

I’ve been using the Doordash app for a while. Most features work great; still, as a UX designer who always keeps an eye on possibilities of leveraging user experience, there's some room for improvement of the app that I’d like to upgrade. 

This redesign project was born from personal frustrations of using the Doordash app where it leads me to make more research on how to improve its overall experience. 

I am happy that i have got some time to redesign it.  I made the entire redesign from scratch after the screenshots I took on my mobile phone for my reference. 

I put a massive effort to improve Doordash customers over all navigation experience in using the app effectively, plus the visual design language evolving it to a warmer and more welcoming inclusive experience.

Understanding the problem to solve

The first thing is to understand & determine the problem that i am trying to solve, the rest comes as the second step in the developmental process of the design stage. By defining the goal, researching and emphatizing i will be able to findout the problrm to solve.

Goal

The goal of this project is to redesign Doordash’s Customer Experience app where customers can have better experience in using the app. To make the app perform better for the customers satifcaction by making it acceseble for all to help users achive thir goal by redesigning the app that fully functions and prforms to users best need.  Moreover the goal of the project is to upgrade the doordash app design so that it can help to building a better comunity.

The design process
5d13724bd6252815b8047622a43180f7.jpg

Empathize - Research, Understanding the problem,Survey, User Interview

Define - Analyzing the data, User Persona, Information Architecture, User Journey, Mapping, User flow.

Ideate - HMW (How Might We), Brain Storming Ideas, Product road map, User flow, Sketches.

Build  - Wireframes, Prototype, Hifidelity Mockups

Test - Usability Testing, Return to users for feedback

 

 

Emphatize

Surveys

I have conducted a survey using questioners with 10 frequent Doordash users using google form. The questions were based on habits, motivation, and challenges while using a Doordash or similar food delivery products, The responses were collected in the form of multiple choice and short answers to get more insights at an early stage.


Interviews

I have also conducted user interviews in order to get more insights into a better understanding of the problem. The interview took approximately 10-15 minutes and included topics to get to the core of what users are trying to do and what problems they face in using the app.


Questions including but not limited to:

What motivates you to use Doordash?
Can you tell me a little bit about your food ordering habits?
How friquent do you order foods using food delivery apps?
How satisfied are you by using the Doordash app?
What are the challenges you face?
Do you prefer to order online using apps or to go to restaurants?

Do you use your phone or computers?

Which time do u usually order using Doordash app? 











 

before competator analysis-2.png
Competitor analysis

To build a successful food delivery solution understanding what other competitors looks like is crucial, how their user flow looks like, whom they are targeting, what are their design strategies, and their customer experiences. This helps me to see the gap and improvement options where i have to work for Doordash.
Threfore i have searched and gatered helpful insigts fom Doordashes compitataors like Uber Eats, Grubhub, and Postmates.

Define 

In this stage i combine all the data that i have gattered during my resrch to combine and look the potencial user problem to solve.

Based on the research I have listed the painpoints are: but not limited to Complex navigation system, Ungrouped information architecture, Hidden fees, Too much footer navigation, Non flexible rating and tip options, Limited accessibility to home made food deliveries, No option to guide drivers parking area, No social connections. 

I strongly believe in understanding my user while designing, hence i have created personas that represents my users for the Doordash app using the above research data. Before going to create wireframes i created Information archtecture, sitemap and user journy to better understand the design process.

Solution

With the help of the combined data, i have crafted a solution to the app's customer experience by creating dropdown menu grouping same elements and features, minimizing bottom navigation icons from five to three, adding features like driver parking guide option, DoordashSocial(where people post their availablity for dining out and make friends), DoordashMusic(where users can listen to a music while enjoying their ordered food), DoordashHomemade(where users can post home made foods and also order homemade foods) and weekly summery of their activities on DoorDash. Designed the rating and tip option based on the customer needs, and removing the hidden fees to show customers what they will pay upfront.

62daa4b2c78832834052517ca39a5e82.jpg
User persona
Frame 7-5.png
Frame 9-4.png

 

Card sorting (categorizing the content)

One way to validate my information architecture and learn about my users is to use a testing technique known as card sorting. This activity allows me to see how users would organize the information that i have, and helps me to see how they would name categories, and if my information matches their expectations. After collecting a junk of information about the app i asked users to group them together in a logical way where that could help me to continue in designing the structure of the app.

Information Architecture (how to organize and categorize the information)
157933972_158774829400668_15521739593351
157997366_1114829722321316_6391531630983
157811451_446081269839730_25653676682597
157664008_871069820412548_50197321676424
157317404_187364673161367_89398575863154
Site Mapping

Site mapping is an important part of developing effective information architecture as part of defining the information of the app design. This is the app content mapped out in a hierarchical fashion to demonstrate the parent / child relationship of content.

site map-2.png
Ideation

The research made it easy to know where i have to focus and where i have to work more. As I feel I am in the middle of the design process It is time to generate a range of crazy creative ideas to create a solution for the problems identified during my research period.
After summarizing the information from user interviews, surveys and data analysis, It was the time to sketching different solutions to help the business and users meet the desired goals.

158891617_467610004592144_66062275749936
159172846_348823873046536_38570096382241
158647242_249782916628658_49751582498995
Build

I Created wireframes based on the sketched that i have done using paper and ink.

wireframes

Sign up.png
Log in-1.png
Sign up-1.png
Log in.png
Address.png
Delivery preference.png
delivery.png
Single retaurant.png
Selection.png
Cart.png
Payment.png
Payment details.png
Thank you.png
Summery.png
Placing order.png
Confirmation.png
Rate.png
Tip.png

Following the Style Guide, I created a UI Kit that would be used to the Visual Design System for Doordash. Ihave also created tactile representations for the ideas that i have been working to build the visual design and user interface. hign fidelity designs and mockups are created to help me see my design in the hansd of users.

VISUAL DESIGN-2.png
Mockups
frame.png
frame-1.png
frame-2.png
frame-3.png
frame.png
frame-1.png
frame-2.png
frame-3.png
frame.png
frame-1.png
frame-2.png
frame-3.png
frame-4.png
frame.png
frame-1.png
Usability Testing


I stronly belive that testing your product by the users hand is a core design process where we designers can collect valuable information to see the difference where we need to go back and adjust what needs to be improved. continouus test and feedback from users helps to adjust and improve the product. Considering the importance of usability testing i build an interactive prototype to see how it feels on the hand of users.

I recruited 5 people to test the prototype. The participants were aged between 25 - 30yrs who are a regular Dordash users and one user who was new to Doordash.

The objective of the test was to know :

How easily users are able to set up the device
How easily users are able to navigate, and use the app without dificulties
How easily users are able to track their weekly usage of their orders
How does the overall experience feel like
What improvements need to be made

Test results

Test Completion Rate: 100%
Error-free rate: 95%

5 out of the 5 participants were able to use device successfully.
5 out of the 5 participants were able to navigate without dificulties and order successfully
5 out of the 5 participants were able to track their orders
4 out of the 5 participants are willing to use these app on a daily basis
4 Participants felt the experience was smooth and easy
All Participants felt the doordashSocial can be a great source for their social interaction to meet new people
All Participants felt the doordashMusic experience can be a great source and addition to their daily motivation.

Learning

I have learnet that more Usability testing, Research, and Analytics would uncover additional pain points and would lead me to make better design decisions. One takeaway from working on this project was understanding the value of user research and planning to synthesize findings in the most helpful way to our users within our constraints.

Chipotle..png
Accessibility

Accessibility is inclusive design. Designing accessibility in mind is the power of better design and it removes barriers to empower all users to be productive and connected. In accessible design whether it is permanent, temporary or situational disability all are experiencing limited mobility. I have put all the necessary effort to make the product accessible by people with disabilities and also by all equally. I have created the design elements and content of the app using the web content accessibility guidelines (WCAG) to the best of my knowledge to make it perceivable where people can see and hear the content, operable where people can use the product by type or voice, understandable where people can get clear and simple language, robust where people can use different assistive technologies. I have used text size, clear color contrast, focus state, grouping similar items, and multiple visible indicators to make the product accessible by everyone. After all inclusive design is simply a good design.

holding-iphone-xs-mockup-2.jpg