Articles

3 High-Level UX Takeaways from 1100+ Hours of Testing Leading Food Delivery and Takeout Sites

Key Takeaways

  • Our new research has uncovered 600+ usability issues specific to food delivery and takeout sites
  • The research has resulted in 372 guidelines that describe the issues, as well as design patterns verified to perform well for users
  • In particular, the research provides insights on the content and features food delivery and takeout sites need to provide users to ensure they’re able to make a purchase decision

At Baymard our research team has just spent 1100+ hours usability testing and researching online food delivery and takeout website features, layouts, content, and designs — leading to our new study on Food Delivery & Takeout UX.

The research is based on more than 90 qualitative user/site usability test sessions following the “Think Aloud” protocol (1:1 remote moderated testing).

The test sites spanned both individual restaurant sites and apps (Starbucks, Chipotle, Domino’s, Panera Bread) and aggregate third-party restaurant delivery sites and apps (Doordash and Uber Eats).

During testing, users at these sites frequently ran into issues that severely disrupted their ability to efficiently order food for delivery or takeout.

Indeed, during testing the users encountered 600+ medium-to-severe usability issues. These issues have subsequently been analyzed and distilled into the 372 UX guidelines found within our Food Delivery & Takeout UX research study (all of which are available as part of our Premium UX research).

The 372 guidelines cover most aspects of the online ordering of food delivery and takeout, at both a high level of general user behavior as well as at a more granular level of specific issues users are likely to encounter.

In this article we’ll introduce 3 high-level UX findings for online food delivery and takeout sites:

  1. Selecting a suitable meal order can be a friction-filled experience
  2. Sitewide UX issues can lead to abandonments
  3. The progress to finalizing fulfillment can be halted by several common pitfalls

1) Selecting a Suitable Meal Order Can Be a Friction-Filled Experience

Many users at food delivery and takeout sites are returning to reorder from their favorite restaurants — and thus often know exactly what they want.

However, finding their preferred meals can be surprisingly difficult — making what should be a quick ordering experience into a longer slog through the site.

In particular, users testing food delivery and takeout sites looked to the homepage as a logical place to help them quickly begin the process of ordering their previously ordered food.

“Right away, I don’t see anything. I will have to search for that a little bit.” This user on UberEats struggled to find restaurants she had ordered from in the past, which were not displayed on the homepage. For industries where returning users are likely to reorder items they have gotten in the past, the homepage is a common place to look for this functionality.

At Doordash, this user quickly located restaurants he had ordered from in the past by using the “Order Again” feature on the app’s homepage.

Yet some sites prioritized featured meals or adlike content instead — missing out on an opportunity to personalize the experience for the returning user, and making it more difficult than it should have been for the user to quickly get to the checkout process.

Moreover, once users eventually settle on a meal order, upon arriving at the beginning of checkout some users decide they need to make changes before proceeding.

For example, users placing a coffee order might choose to have cream, sugar, or syrup added to their coffee; users placing a burrito order might choose to have no beans, extra beans, guacamole, etc.

However, during testing many sites didn’t make it easy to change meal preferences once they had been selected — leading to user hesitation at a crucial stage of their ordering process (i.e., right at the beginning of checkout).

Indeed, if there’s no easy way to make changes to meal orders in the cart, many users will assume that, in order to update the item, they must remove it from the cart entirely and customize it from the beginning — causing many users to reconsider whether the order is worth the bother.

For instance, one user, finding no way to adjust her complex meal customizations in the cart, shared, “Probably I would have to remove the item and start over…This stuff’s supposed to be very simple. It’s annoying to have to delete it and then do it again. I might just abandon it and then go somewhere else”.

Chipotle provides a clear “Edit” link in the cart for each item being ordered, making it easy for users to quickly adjust what can be complex meal orders.

Therefore, food delivery and takeout sites should ensure that users in the cart can quickly edit or change meal preferences — or face a higher cart abandonment rate as some users simply give up on completing the checkout.

2) Sitewide UX Issues Can Lead to Abandonments

Sitewide UX issues can torpedo even the best user experience.

Over the course of hundreds of tests sessions we’ve observed abandonments resulting from such sitewide issues — for example, issues using the “Back” button, performance-related issues such as laggy UIs, overly aggressive “Install App” ads, issues specific to the mobile interface, or general layout bugs.

If a site doesn’t seem to be performing on any one of many sitewide UX aspects users are quick to give up — maybe to try again later, but often to simply not place the order or place it on a competitor’s site.

“I wanna do ‘Menu’…it’s hard to see it.” A user at Panera, building a takeout order on Panera’s mobile site, found it difficult to navigate with the “Install App” banner crowding the mobile viewport (and didn’t immediately think to close the ad).

“Okay, it doesn’t save. All right, so, I don’t know if it’s something on my end or not…I mean, it makes me think about it…if the delivery driver just thinks to leave it at the door…they might just leave it by the front gate.” A user at Doordash updated delivery instructions and tapped to save them, but there was no response from the site. He zoomed in and tried again multiple times before giving up. UX issues such as these can leave users stuck at a UX dead end.

Furthermore, users on takeout and food delivery sites have often invested a good amount of time customizing their order — for example, adding all the toppings they want for a pizza, or scheduling a pickup at their nearby Starbucks.

Thus, sitewide UX issues can be even more frustrating when experienced on a takeout or food delivery site compared to when shopping on a more general e-commerce site such as Amazon.

While it’s likely not possible to ensure that these issues never occur for any users, it is possible to invest the resources to continually test and monitor the site for issues such as these to limit their occurrence.

3) The Progress to Finalizing Fulfillment Can Be Halted by Several Common Pitfalls

Once users have selected their meal and made their customizations, they’ll need to progress to checkout and eventually finalize their order.

Yet during testing we observed that on takeout and food delivery sites there are several pitfalls that delay or stop users’ progress toward completing their order.

“The latest you can pickup is…Oh, wait, hold on. Not tomorrow.” On Doordash’s mobile app, this user scrolled to the bottom of the listing of available pickup times, not realizing that they had transitioned into future dates. Simple lists without any visual hierarchy make it difficult for users to easily understand the relationship between available dates and times.

“I’m going to say that I wanna pick it up tomorrow.” This user on Walmart’s mobile site easily scheduled her grocery pickup for the following day by using the layered date and time selector, first picking the date (tomorrow) and then browsing the available times. (Note the inclusion of additional information for specific time slots; e.g., “At-risk only” for the 7am–8am time slot.)

For example, despite the necessity of scheduling a pickup or delivery date and time, several takeout and food delivery sites provided users with a suboptimal fulfillment-scheduling feature, such as one long list of dates and times, a “double scroll wheel” UI, or a simple drop-down menu — rather than a calendar-type selector, which testing showed to be much more intuitive for users.

“All right, so I could enter my phone number, and then what I want to know is, is this person gonna call me or text me?…If they need to contact me for everything as they’re filling the cart, I don’t wanna take three phone calls about this.” This user checking out on Instacart’s mobile site worried about the type and frequency of communication to expect from their shopper, particularly with regards to substitutions. Without further details on what to expect postcheckout, some users may hesitate to move forward.

“Okay so it says, ‘Grab your order from our pickup shelves’.” This user checking out on Chipotle’s mobile app quickly noted the instructions for where to find her pickup order.

Additionally, users picking up their food or getting food delivered often need additional instructions regarding the final fulfillment of their order — for example, where to park for pick up, how they can communicate with their delivery person, or how to track the order’s status.

Yet many sites during testing failed to provide this necessary information — leaving users hesitant about continuing to finalize their order.

“Okay, here it is. So, the tip…” Meanwhile, on Panera’s mobile app, this user was not able to see the dollar amount associated with each tip option — only the percentage. While the total below updated to reflect the included tip, users must do their own math to determine the actual amount they are paying in tip.

“Okay and then it gives you the option to tip. I’ll do 20%.” On Shipt’s mobile site, this user easily compared tip options by referencing the included percentages and associated dollar amounts.

Another common pitfall identified during testing was related to tipping — a common feature for many takeout and food delivery sites.

Several sites either displayed only the percentage of the tip (e.g., “20%”) or the dollar amount (e.g., “$4”) — forcing users who preferred the option that wasn’t available to determine for themselves the missing information.

While some users will quickly make the necessary calculations themselves, others will go backwards in the checkout process, potentially leaving checkout entirely — increasing the possibility that they won’t finalize their order.

Give Your Users What They Need to Quickly Order Their Food

“Chipotle’s nice because I order pretty much the same thing every time…When you first log in to Chipotle, it just gives you the option to add it immediately.” This user on Chipotle’s mobile app appreciated how easy it was to add her regular order to the cart, as it was prominently displayed on the homepage. With fewer items in an average order, displaying only one or a handful of “Past Purchases” on restaurant sites helps users quickly add their desired meals.

Ordering food online may be a new experience for many users, who are more used to shopping traditional e-commerce sites.

Thus it’s critical that new users are supported by a high-performing UX — as many will otherwise simply give up on ordering from a particular site.

Furthermore, during testing, even repeat customers of sites faced UX issues, which often derailed their ordering experience.

In particular, 3 high-level aspects of takeout and food delivery UX were identified during testing as especially important to focus on:

  1. How users select and customize a meal order
  2. Minimizing general sitewide UX issues
  3. The fulfillment-finalization flow, features, and UI elements

Ensuring your food delivery or takeout site performs well across these 3 high-level aspects of food delivery and takeout UX will help your site stand out from the crowd — and will likely result in a better-performing e-commerce conversion rate.

Getting access: all 372 food delivery and takeout UX guidelines are available today via Baymard Premium access. (If you already have an account open the Takeout & Food Delivery Study.) You may also want to visit our audit page page for information on booking an audit of a food delivery or takeout site with a Baymard auditor.

Authored by Edward Scott on March 29, 2022

Share:
If you have any comments on this article you can leave them on LinkedIn

User Experience Research, Delivered Twice a Month

Join 30,000+ UX professionals and get a new UX article every second week.

A screenshot of the UX article newsletter