This past summer, I was lucky enough to wear multiple hats during my internship. I owe it all to my dope manager, Mark, who learned about my hybrid computing and design background and wanted to put my unicorn power to use. I took on the role as lead designer for my team when we restructured from "Internal Tools" to "DoorDash for Business" and then implemented my designs during the last week of my internship.
As the sole designer on the team, I was tasked to create the new "DoorDash for Business (DD4B)" experience. DoorDash for Business differs from the main DoorDash application because it targets a niche audience: companies or businesses that serve corporate meals or need food for meetings, gatherings, or large occasions. Previously, the main consumer application provided individuals with the capability of ordering catering. However, the new DoorDash for Business vision was that it was to be its own standing application, one separate from the main DoorDash website (www.business.doordash.com). Thus, the team was looking for a redesign that was customized more towards the needs of catering user audience.
Previous DoorDash for Business Homepage
As you can see on the left, the homepage was incredibly lackluster. Below, I detail some elements that make the design not very user-friendly nor scalable.
1. "Find Catering" Button Search
The search results for restaurant selection that offered catering was simply the current DoorDash homepage with the search query "catering" pre-populated into the original DoorDash consumer application search bar. Truth be out, the results were also inaccurate as there were technical bugs behind the functionality of this feature.
2. Drop-down Menu
The main intention of the drop-down menu was to target cities that DoorDash was heavily active in. However, the sub tabs were not incredibly useful when the city was not comprised of smaller regions. Plus, the top restaurant options themselves were not clickable which prevented the user from further exploring the store - eliminating the intention of the design in the first place.
3. Find Catering Menus Near You
It appears three times on the one-page scrolling website, eliciting a repetitive layout. The latter two simply just redirect the user to the top of the page where it prompts for a location before performing the actual search.
"Find Catering" Restaurant Selection Results Page
If the user had the intention of placing a catering order, entered in his or her order address, and clicked on the "Find Catering" button, he or she would end up on this page.
As mentioned in the section above, this was simply the original DoorDash consumer web application with "Catering" used a search query. There was no separate experience for DoorDash for Business. It was simply a redirect to the main app.
Additionally, the button filters at the top were incredibly confusing and unintuitive. Unfortunately, you could also only select one active filter at a time and catering itself was already one on its own. For example, clicking on "American" would show all restaurants that served American food, despite whether or not they offered catering.
Learning more about our target user audience
Our team's product manager, Jessie, spent a week in and out of phone calls with business owners to inquire about how they make catering orders. Main points we learned from her interview sessions that were applicable for designing for the new homepage include:
- Restaurant and food item selection take the most time in the entire ordering process.
Business owners and office managers generally know the date and time for the order they want to create. The only decisions left in the order creation process is in the restaurant and order items.
- Pictures are most helpful when choosing between different menu listings.
Reading through descriptions might not always be the most helpful or time-conscious option. Images make it easy to quickly browse and understand a menu's selection.
- Previous success influences a stronger inclination to choose the restaurant.
The overall rating of a restaurant, as well as a former successful past ordering experience, incentivizes a higher chance of the user in choosing that particular selection.
NOTES TO TAKE INTO ACCOUNT
DoorDash for Business, as a new initiative, was scheduled to launch first in the Houston, TX market. I was informed there would only be less than 20 restaurants that offered catering in that city. Additionally, not all restaurants had image assets for their most popular menu items (a feature select restaurants on DoorDash have). Given the timeframe for when we wanted our product to launch, the opportunity for DoorDash to hire photographers for all the catering restaurants and have the image files ready in time was slim.
MAIN USABILITY PROBLEMs
- Current DD4B landing page pushes customers to a cluttered catering search which lacks context and functionality.
From a technical standpoint, the restaurants displayed from the search were most of the time inaccurate in terms of whether or not they offered catering. Also, the button filters at the top make it seem as though they can be applied to the catering options presented, but instead they perform a new filtered search.
- Information contained inside the restaurant cells is limited and not very helpful for catering orders.
The grid layout of the results has a high cognitive load on the user, making it difficult to scan the results from what little information is presented. Order minimums and hours to order in advance requirements are significant pieces of information that should be upfront. Other info such as delivery fee may hold less weight in the catering space.
The main intention of the new homepage redesign is to guide customers in selecting the appropriate restaurant for a catering order. Goals that stem from the usability problems are:
- To display a selection of restaurants that cater in an organized, helpful manner.
- To allow individuals to select a restaurant quickly and easily.
I did some browsing around on what the user experience was like on DoorDash's competitors' platforms.
similarities between the platforms:
- Order creation entry point: entering one's address
Restaurant Selection Page:
- Selectors or input boxes to specify more details about the order (date and headcount)
- Side filters that allow for additional filtering (rewards, price, delivery minimum, rating, etc.)
- Search bar to query for a specific keyword
- Cuisine and meal filters at the top
- Images associated with each restaurant (logo or dish)
There were lots and lots of iterations. Sketch was my best friend for quite some time.
IDEA #1: Slight modifications
IDEA #2: focus on filtering
IDEA #3: MENU PREVIEWS
Focus points for iteration #2:
- More information placed inside of a restaurant cell
- Less emphasis on filtering due to the presence of only 20 stores
- Eliminate cuisine filters due to their disuse on the DoorDash homepage
- Bring greater attention to the order date and time
- Investigate different ways in displaying the menu preview experience (i.e. photographic previews or horizontal cell layout with hover states)
Questions to address in iteration #3:
- What would the experience be like for a restaurant that do not have photographs for their menu items?
- Customizations of certain menu items affect the possible functionality of adding it to a cart. Would it be smart to move away from that design, brainstorm other ideas, or remove them completely from the next iteration?
This follows the workflow for a user that would like to make a catering order. Not shown in this video is the checkout experience that follows adding the menu item to the cart.
- Adding filtering options back into future designs when expanding into more markets.
- Algorithm of which stores are shown first to the user in the horizontal layout format.
- Switching back to the grid layout from a horizontal row layout when more restaurants are added.