About the Project
Overview: A design proposal for DoorDash’s Order Manager for the iOS that streamlines the experience for merchants to better adjust orders and contact customers while updating the app’s branding to the current DoorDash design. There was no iOS version of the app which upset much of the user base so I saw an opportunity to fill that gap.
Solution: An overhauled iPhone app which improves (1) navigating between different stages of the ordering process, (2) adjusting orders on-the-fly, and (3) contacting Dashers.
Timeline: 3 weeks
(Solo Project) — My Role: Market Research, Wireframing, User Experience Design, Interaction Design
Tools: Adobe XD, Adobe Illustrator, Adobe Photoshop, Pen and Paper
Problem Statement
How can we simplify and streamline the experience for merchants to manage restaurant orders through DoorDash while improving their communication with customers and Dashers?
Introduction
Background Context
Doordash (and it’s competitors like UberEats, Grubhub, Postmates, etc.) is quickly becoming one of the hottest services fueling the convenience economy. Fresh off raising $250 million in a new round of funding — putting its valuation at $4 billion dollars — last August, DoorDash has its goals set on expanding into new cities, partnering with restaurants, and eventually becoming a logistics provider for the entire food production process. While its moonshot investments in self-driving cars and drones are still a ways off, it’s current bread-and-butter is still food-delivery. Therefore, it’s immediate goals to improve customer satisfaction and drive growth come from reducing these two factors: order wait times and delivery prices.
My Experience with DoorDash
To be honest, DoorDash isn’t very popular where I go to school which is in St. Louis. When I do order food, I usually use Postmates because of the aggressive marketing they have been doing around my university, and they often have “Postmates Credit and Delivery” specials which are especially appealing for a poor college student like myself. DoorDash has been responding with their own marketing push and their cheap delivery prices are hard for their competitors to beat.
As a consumer, I’m pretty brand agnostic when it comes to food delivery services. I don’t really care what logo is on the delivery tote bag as long as the food comes to me quickly and at a reasonable cost. I imagine that most people feel the same so that’s one of the reasons the food delivery space is so competitive.
The Business-Side
I’ve been following the rise of online delivery for the past year, but it was after reading a fascinating piece about a talk Tony Xu, the CEO of DoorDash, gave where he broke down the type of consumers who used the service and the complex infrastructure they set up to meet the constituency's needs that I came to appreciate just how many moving parts have to come together for my cheesy garlic bites to arrive on time to my apartment. Essentially, there are three main markets DoorDash must serve simultaneously: consumers (the hungry people ordering food), merchants (who provide the food), and Dashers (delivery people who are the link between you getting your ravioli in 5 minutes vs. 50 minutes). Therefore, the challenge DoorDash face are 3-sided, and all 3 markets have to be served simultaneously for the company to achieve critical mass in an area and gain a competitive advantage. They form the pillars of every feature the company implements so even if one aspect is weak the foundation will topple.
When examining the company, I initially looked at the consumer side because that is what most of us are familiar with when we open up the DoorDash app. It’s the company’s consumer-facing product, so it’s gotten the most attention to detail in terms of having a clean and simple-to-navigate UI, thoughtful micro-interactions, and an attractive overall aesthetic.
These well thought out design choices has led to the app garnering incredibly positive reviews, with people praising the simple and straightforward process of ordering food.
It’s the #1 app in the Food & Drink section on the App Store, so it was clear there weren’t any major issues the service on the consumer-side was facing. There have also been numerous excellent redesigns of the consumer DoorDash app on iOS so I didn’t want to add to that existing list without finding a salient issue that hindered the user experience.
I then started to look at the merchant side of the company, which is less publicized but no less important. I discovered that DoorDash had a merchant app that was pretty comprehensive in its features. The merchant could take in, adjust, and manage orders before preparation, and make changes to their menu that would be reflected on the consumer side of the app. However, I saw that the design was not as robust as their consumer app, and I started to examine those opportunities for improvement and refinement.
My Mission
In the redesign challenge, I am primarily focusing on enhancing the fluidity and experience a restaurant supervisor or employee would have when interacting with the app on a daily basis. The app will not incorporate any new standalone features since I do not know the back-end hurdles of the engineering team nor do I have access to DoorDash’s quantitative data and user research. However, I will be incorporating my mobile development experience into the proposal by ensuring that the designs follow Apple’s Human Interface Guidelines and are labeled accordingly. (To any app developers reading this, I feel your pain if you’re being handed an awesome-looking design but there’s no documentation on how it can work.)
I will also draw from my business experience consulting with restaurants when I describe the insights and challenges of restaurant owners I worked with face. They are the experts, and I will use their stories to facilitate my user journey and workflow. This way, I can ground the app in a real context and find practical solutions to their challenges.
OK, that’s enough of the setup. Let’s start with the redesign!
1 — User Research: Who’s using this anyways?
For user feedback on the state of the current app, I turned to two sources: online reviews of the current app and feedback from restaurant owners.
The Verdict From Online Reviewers: 2.3 Stars, 10,000+ Installs
According to users, the current merchant app has areas it can improve. Users were overall critical of the slow load times, accessibility issues, issues connecting to the printer, and a myriad of bugs. These pain points can be placed into these following buckets:
1: It’s difficult to communicate with dashers, leading to mishandled orders.
2: Landscape view is cumbersome to use and is now the default view.
3: DoorDash’s tablet is difficult to use and buggy.
4: There is no way to pause, cancel, or stop taking orders.
5: Issues connecting to the printer.
Customer Use Cases: Talking With Restaurant Employees
Sonny and Bridgett’s Story: They have owned a local restaurant in Ferguson, Missouri since 2014 that focuses on serving American comfort classics with an upscale twist. The couple emphasizes the sit-down experience and is known for the warm and inviting atmosphere of their restaurant as much as their food, but they appreciate the steady revenue stream DoorDash has given them. It’s also a good way for them to attract non-local customers. The restaurant has a modern Point of Sale system on a tablet to manage daily operations, but Sonny and Bridgett feel the layout and usability of the app is confusing. They didn’t know DoorDash had a merchant app and so far have relied on the phone to contact Dashers.
Victoria’s Story: As a supervisor of a fast-food franchise that has partnered with DoorDash, she is always busy serving the customers at the front and managing online delivery orders at the back. Since it’s located in a school campus, they constantly get large-group and catering orders. Online orders come through a computer at the cashier counter and notify the employees with a loud beep. She works in a loud and busy environment, and there is constantly a stream of students coming in. Therefore, it can be hard to communicate with her co-workers across the kitchen floor. She wishes her current system does a better job of delegating tasks as she has had issues of multiple people making the same order before.
As I talked to Sonny and Bridgett and Victoria, I got the sense that they were not on an island with their problems, and these same problems were experienced by other restaurants that partner with any form of online delivery, and not just DoorDash. My intuition that this was a problem worth solving was also supported by the critical reviews left by app users on the Google Play Store. Identifying these issues gave me the clarity to approach how to find solutions to their problems.
2 — Opportunities to Improve
Opportunity 1: There was no mobile version of the app.
The SDK is only available on tablets, and merchants have the option to download the app to their own devices or get a tablet from DoorDash, which restricts the device’s features to solely using the app.
Mobile POS systems are becoming increasingly popular with restaurants, and trendy spots use tablets as a way to reduce ordering times, cut back on labor costs, and gain valuable insights into data analytics. According to a 2016 Deloitte study, 40% of customers prefer to order food online, and restaurants should have the tools and bandwidth to keep up with this shift in consumer culture. Tablets are more cumbersome and usually bolted into place at restaurants. If restaurant managers wanted to check on orders when they were out, they would have no way of doing so. Having a mobile version would also allow all of the employees at a restaurant to access order information in real-time rather than be restricted to crowding around one tablet at a restaurant. It’s a given that almost everyone will have a smartphone at this point, so expanding this feature to mobile devices will allow multiple employees to work on different orders quickly.
Furthermore, including a mobile version of the app will improve communication with both customers and DoorDash’s support team. Merchants can’t call either party directly through a tablet because they are not set up with cellular functionality. Tablets also require Wi-Fi, so if there is poor connection or if the Wi-Fi temporarily goes out they will have no way of fulfilling those online orders. Connectivity issues were a concern for many users, and using mobile (which almost all have LTE) could be a solution to this issue.
Therefore, this app will be framed around the assumption that DoorDash is changing this portion of the business model to give merchants the option to use their own devices.
Opportunity 2: The visual branding was inconsistent with the main consumer app.
DoorDash recently underwent a redesign last year, with a revamped logo and emphasis on vibrant colors and a playful tone that conveys optimism and balance. The merchant app, by comparison, is darker and more corporate-like. It still uses old branding elements like outdated colors and font treatments.
The dark background in the old version is most likely used so important information and buttons can stand out as bright colors on a dark screen to provide more contrast. However, other important information such as the number of items and time elapsed in the kitchen are harder to see because they are also grey.
Opportunity 3: There’s a lack of clear iconography to provide contextual clues for actions.
Note how the only clickable button is the icon with the three vertical dots (⋮). The icon is vague since it implies there are more options available, but does not reveal what those actions are. In addition, clicking on the button takes the user to a new screen, which is an unnecessary step that only adds to another window the user must navigate through.
Overall, there is a lack of clear, actionable buttons which quickly allows the merchant to make changes to orders or linearly advance the order to the next section.
A Quick Tangent on Minimal Design and Complexion Reduction
There is a trend for apps in the past few years to embrace minimal design which emphasizes functionality and white-space: big, bold headlines, flat, universal icons, and a more monochromatic color scheme. Michael Horton, the co-founder of Bitmoji, coined the term Complexion Reduction to describe those very trends and how apps these days are starting to look the same. The main benefit to users is that a ubiquitous design scheme across all popular apps leads to a familiar experience so almost anybody can learn how to use a new app with less of a learning curve.
As with all design trends — and especially one that almost encourages uniformity — there has been criticism against the norms imposed by Silicon Valley’s design utopia. Nobody wants to read the same book again and again, and nobody wants to open an app and expect the same experiences. With the consumer DoorDash app, however, I saw a case of how the designers incorporated aspects of the “Complexion Reduction” trend while keeping elements of the company’s visual branding so it feels unique.
Compared with the previous examples, there’s a whole lot more color. The pictures and use of illustrations pop out at you, which makes sense considering it’s the visual component of food is so important: we “eat with our eyes”, so to speak. The app also incorporates rounded dividers below the bolded headers to separate it from the content, which is a subtle addition that adds more character to the app.
Opportunity 4: The layout of the app makes it difficult to communicate with a Dashers, customers, or the support team.
Again, important features such as contacting the customer or support require accessing a popup and are not immediately visible to the viewer. If a merchant unfamiliar with the app wants more clarification on an order and quickly wants to call the customer, they may not be able to find it easily. The wording of these actions are also vague as “contact” in both cases can either mean calling or sending a text message, leading to ambiguity.
The Live Chat feature for customer support is helpful for providing real-time support, but the layout of the feature misses the human-interaction element, as if you are not communicating with a real person. The large keyboard and lack of real-estate to display the actual messages makes the overall design feel squished, and it seems as if the merchant is taking notes rather than sending a real message. The purpose of Live Chat is to provide that a human-connection to troubleshooting, yet the design hinders that experience.
Next, I’ll outline my design process.
3 — The Design Process
As I started the process of redesigning the order app for a mobile experience, I thought about how its structure would be different than on a tablet. This presented unique challenges, and I spent a lot of time thinking about how the flow of navigating could be maximized given the constraints of a phone’s smaller screen size compared to a tablet. I knew I wanted to use a tab bar at the bottom so merchants could quickly switch between the integral functions of the app, but I was unsure how to group them together as well as the order of how they should be presented. Therefore, most of my preliminary designs were quick iterations in my notebook to see what layout of the tab bar made the most sense.
Type Considerations
The official font for DoorDash is TT Norms, which is a modern geometric grotesque created by the Russian type foundry TypeType. It’s a neutral font with humanist sans-serif qualities which gives the characters a sense of warmth and personality.
I couldn’t afford to purchase TT Norms from their store so I substituted it with Brother 1816 made by the Uruguayan type foundry TipoType. It’s a sans-serif typeface which combines geometric and humanistic elements as well. For the purpose of the redesign, it’s the closest approximation to the official brand typeface.
I wanted to keep the number of different text weights and sizes constrained both for ease of design and for developer purposes. I went with 4 font weights and five type sizes in the end.
Order Management — Wireframes and Iterations
a: Detailed Order Page
In my initial wireframes, I wanted to focus on order management first because I felt it required the most amount of experimentation to ensure. In terms of layout design, I found myself deciding between a traditional list approach where information about the orders was presented in horizontal rows which stretch to the full width of the screen and separated by dividers, or using “cards” to separate the information. I decided to go with the “full-width list approach” for the following reasons: the structure was more similar to the main consumer app which maintained cohesion, it allowed me to use a vertical hierarchy where the top-level information such as order, quantity, and price is given a higher level of importance, making it easier for merchants to read important information at a glance. When the order was ready for pickup, I wanted the Dasher’s information to be displayed on the screen as well their location on the map.
In these different variations, I experimented with keeping the duotone color scheme from the original order manager app. However, I still wanted the background to be lighter so it’s more in line with the redesigned consumer app. The darker background was used for high contrast buttons, and I experimented with different ways of keeping the headers segmented and easily legible because it contained the most important information, such as name, order number, and estimated arrival time. The original app only used red as an accent color but I wanted to bring in other colors form their palette. I tried yellow as another accent color, which I felt was unconventional and is as bright and saturated as the red. However, because of the context where the app will be used — in loud and busy restaurants — merchants need loud indications to get their attention. As for the buttons, I added drop shadows so they could better stand out from the background. I felt this was a good compromise to fulfilling the need for a darker background in the original app for legibility purposes while retaining the same visual language of the new consumer app.
By clicking on the 3 vertical dots button, the merchant will be greeted with a popup that allows them to pause or cancel the current order. Once a dasher is assigned, they will show up on the map, letting the restaurant know how far away they are.
b: Main Order Page
For the main order page, the main change I implemented is I split up each stage chronologically in order of completion from left to right using clickable segmented controls. This eliminated the long single-column scrolling format in the original tablet version because of the reduced screen size on mobile.
The merchant will also be alerted when the most recent order moves to the next stage of the process.
Inventory Management
a: Out Of Stock Management
The biggest changes made to the inventory system was the inclusion of different options to deactivate orders. Currently in the app, there is only one option for out-of-stock options and that is disabling the item until the end of the day:
However, based on feedback I received from restaurant owners and from the app’s online reviews, merchants found this option limiting because it doesn’t account for other edge cases when they want to deactivate the order for a shorter amount of time. This can be times when the restaurant’s on lunch break, the restaurant is currently swamped with in-store orders and wants to deactivate popular items, or if a restaurant doesn’t have the ingredients to prepare the dish.
Above are a couple of my iterations for out designing out of stock options. Here, I was looking to address the merchant’s issue of not having enough options to choose the length of time when a dish is deactivated while also showing the availability status of the current dish. I was mainly looking at two ways of representing the information: in a list like the order function or through clickable buttons. Ultimately, I chose the buttons because I felt it was more legible; the list and bolded headers could give users cognitive overload from too much data presented.
b: Inventory Home Page
Like the main order tab, the orders are organized in single-column rows. The biggest change to the original design is I split the main headers into out of stock items — which are at the top so a merchant can easily access it — and the rest of the in-stock menu. In the out of stock section, the items are further color coded into long-term(red) and short-term (yellow) out of stock options. The rationale for this was because the new inventory design is created to give merchants more flexibility when deactivating and activating menu items, but the menu page can look easily cluttered if there are items deactivated with various times. Short-term is anything shorter than a day, and long-term is anything longer than that. Clicking on any list item will bring up the option of either deactivating it (if it’s in stock) or reactivating it (if it’s out of stock).
Merchant Support
a: Main Support Screen
Lastly, I revised merchant support so restaurants can have an easier time contacting DoorDash’s customer support team. Again, this takes into account the hectic environment of working in a restaurant so if there is a bug with their app or if they don’t know how to use a feature they may be under high pressure to correct it as soon as possible. The current feature for “Help and Support” is located at the bottom of the sidebar that does not open by default, making it difficult to find. Furthermore, when you click the button you are only presented with three options which may not be relevant to your problem. If you want to call customer support, you are not linked to directly calling the number (because tablets don’t support cellular calling for the most part). The “chat here” link is also written in a small font that makes it easy to miss.
If you have additional questions or learn how to use the app, you are taken to a “Tutorial Guide” which is a Google Slides presentation. This takes merchants out of the experience of using this app because it requires them to exit the DoorDash app and open up an internet browser to look at it.
Taking those factors into account, I revised the layout to make the option of contacting DoorDash support the first option the user sees. This reinforces the human connection of asking for help and there is someone on the other end of the line who can help with the issue. Next, I broke down the issues into categories and the user can click on a row, taking them to another screen with more detailed issues pertinent to that category.
b: Live-Chat Feature
Similar to the layout of chatting with customers, I incorporated a live-chat feature that fits the mental model users have with other chat apps. This is part of the effort to make asking for support with an issue more conversational and easy-to-use.
Recap and Final Thoughts
Whew. I know that was a lot of information, so if you made it to the end, thank you for reading all of that!
Overall, I had a blast with this redesign and trying to revise DoorDash’s order manager on a completely new platform. It was initially challenging with such an open-ended prompt, but I am happy I decided to tackle the challenge from the merchant’s perspective. While it’s not an app that consumers would see every day and not as “flashy” as designing for a consumer audience, good design and usability are just as important. Here’s some insights I learned from this 3-week long project:
Doing your research is crucial: I initially went into this project with no knowledge of how DoorDash’s system worked, and more importantly, how their model was different than their competitors in the food-delivery industry. Therefore, I spent most of my time in the beginning stages learning how their business operated to get a sense of the vision of the company. If I had just started designing with my own assumptions of how DoorDash worked, I would have been in trouble quick.
Making assumptions is dangerous… Going off the first point, it’s easy to make assumptions. All we need is incomplete information and a situation and let our mind fill in the blanks. This was a trap I fell into in the beginning because I assumed I understood the needs of restaurant managers. Even though I have worked with restaurants before, I was still not there managing the day-to-day operations and being there when it hits the fan. It was only after talking to owners and getting online feedback from employees did I start to get a grasp on their situation.
There is no one-size-fits-all solution in design… because we would have found it by now. Product Design is not a graduation robe or a bicycle helmet. When thinking about who would use the app there are so many possibilities because there are so many types of restaurants who all have different needs. Or in jargony terms, there are so many edge cases. When going through the design challenge, it was definitely a challenge making sure that the features I was designing could be used universally by vendors but could also be tailored to their unique circumstances.
Respect the Process: it’s cliché, but hey it worked for the 76ers. Iteration was my best friend when it came to this project. Writing was my second-best friend. It helped a lot that I started gathering my notes and thoughts down early and I wrote this article during the design process. It was unconventional and something I hadn’t done before, but writing out my reasoning for my decisions really allowed me to think critically about what purpose those decisions served.
Thank you again for reading, and please comment below with any feedback, critique, or anything you’d like to add to the project!
Acknowledgments
Here are some of the amazing designers and people I wanted to shout out who volunteered their valuable time and helped me along the way.
Ismael Barry: Your insightful, methodical writing style and structure from your Instacart redesign was fantastic, and inspired how I wrote my article. Thank you.
Rachel He: Your design advice and critiques throughout the process was invaluable, and it was great to have another pair of experienced eyes on my work.
Cody Reppert: Thanks for all of the calls and conversations about design, working in San Francisco vs. New York, and about life in general.
Fin. Danke.
