In the first days of the COVID-19 pandemic, online grocery stores in the US were overloaded and often failed to meet the sudden demand. People were desperately filling in their carts only to discover that their order could not be delivered or there were no pickup windows available. Those lucky enough to place the order found that many of their items were missing upon delivery.  Grocery stores were overwhelmed, the supply was low (as people were stocking up), and there were too few employees available to deliver the order or help with pickup.

The pandemic was a corner case for a system that was not designed for extreme situations: in typical circumstances,  most stores in the US expect to be able to find a delivery window and to have a stable inventory that doesn’t change from one moment to the next. So, in normal conditions, it may be okay to ask users to select a delivery window or a pickup window during the last steps of the checkout. But, during the pandemic, that proved a big problem. Luckily, some retailers moved quickly, identified the issues, and fixed some of their flow problems.

It is impossible to predict every future emergency perfectly. All we can predict is that there will be emergencies: natural disasters, strikes, import or export bans, wars, product shortages, equipment malfunctions, and the list goes on. Many such obstacles impact ecommerce sites’ ability to deliver as expected and must be reflected properly in the user experience. You can’t design for every eventuality in advance, but, for proper contingency planning, you should develop an understanding of the kinds of things that can go wrong and of your users’ main concerns, and find the best way to clearly explain limiting circumstances and plan your response to fast-changing constraints.

So, what did we learn from the pandemic about designing checkout flows? Here are some lessons that will leave us not only better prepared when the next disaster hits, but will improve the overall user experience of online shopping for food.

Delivery and Pickup

  1. Users should be told if there are any delivery or pickup times available upfront, before they start shopping. This information should be detailed and accessible to all users, whether they are logged or not.

It’s a shame to put in a lot of work to add items to the shopping cart only to find out that the order cannot be delivered or picked up when needed.  The hours available for delivery and pick up should be clearly disclosed on the website. Users shouldn’t have to create an account or log in in order to access this information.

​
Target did not allow shoppers to find if there are any delivery windows available in their ZIP code unless they created an account or logged in. The copy on the site said Same day delivery to 94089 — Get it as soon as 6pm but the ZIP code was not correct and could not be changed. Moreover, Get it as soon as 6pm is not specific enough information about the delivery windows.

Note that vague wording such as Available today is not specific enough — people have various constraints and often will want to make sure that they are at home to store their food safely. Allow users to see the exact delivery windows available in their area in order to be able to make an informed decision before they start shopping.  Even if you have some delivery windows available, keep in mind that people may shop for groceries a few days ahead from their desired delivery date (especially, since, during the pandemic, they learned that they had to plan ahead and it was hard to secure a next-day delivery window).

​
​
Amazon’s Whole Foods advertised that free pickup was available (top), but did not allow users to see pickup or delivery windows before they started shopping.  Users had to add items to their shopping cart and go through checkout (bottom) in order to see if any delivery windows were available. If those windows proved inconvenient, the customer had to either abandon the cart or make arrangements for a different delivery date.
​
Instacart allowed users to see specific delivery times for a store before they started shopping.
  1. Users should be allowed to reserve a time for their delivery or pickup before they start shopping (or at any time during the shopping process).

Scarce delivery windows were a common experience during the early months of pandemic. I have heard many stories of people staying up until 12 am or waking early in the morning to catch a delivery window. It was often the case that, when they had finally caught a window, they remembered that they needed an extra item and left the checkout to add it to the cart. Of course, once they came back, the delivery window was gone!

That is why it’s important to allow users to reserve a window.  That reservation can be valid for a limited amount of time — say 30 minutes. (This approach is already used by event-ticket vendors.)

The step of reserving a window should be possible at any point in the checkout process — at the beginning or later on, after the user has added something to the cart.

​
Safeway allowed users to reserve a delivery time before they started shopping. However, this feature was only available to logged-in customers. Those who did not have an account had to create one in order to see the available delivery times or reserve one.
​
​
Smart&Final: By clicking on the Available in 3 hrs link next to the cart (top),  users could select a delivery window (bottom)  as soon as they added an item to the cart, The design could have been slightly improved by allowing customers to select a delivery window even before they started shopping.
  1. If the user has specified a delivery time or location, check first that the delivery can be made at that time or location. Alert the user if any of these are unavailable as soon as possible in the shopping process.

With DoorDash, a restaurant-delivery application, users could locate a restaurant, set a delivery time, and spend time adding items to cart, only to then discover at checkout that the restaurant was either closed at the desired delivery time or did not deliver to the user’s address. Even though the restaurant page included that information, it was not clear enough and easy to miss. A better solution would have been to alert users as soon as they started adding items to the cart and offer them a suggestion for how to proceed (e.g., tell them that they should switch a different restaurant).

​
Doordash allowed the user to add to cart $167 worth of food from a restaurant that did not deliver at the user’s address (that had been already provided as a first step). On top of that, Doordash did also not provide an easy way of emptying the cart — forcing the user to remove all the items one by one. The restaurant page did state that the restaurant was Unavailable, but that information was unclear (it could have been that it was closed at the time when placing the order) and was ignored.

As soon as the user has added an item to the cart, delivery information and time should be confirmed, in order to make sure that people don’t spend unnecessary effort on an impossible task. If the delivery time and address are not serviceable, alert the user before it’s too late. Offer them alternatives whenever possible (e.g., different delivery times or different restaurants).

​
Yelp: When the user selected an item from a restaurant that was closed at that time, the site alerted the user. It would have been better if the alert had also offered a link to the page where the delivery time could be changed.
​
Smart & Final asked the user to confirm the delivery area when the user added an item to the cart, to ensure that the items could be delivered from the selected store. (Ideally, both the delivering store and the delivery location should be selected in the same step.)

Replacements and Substitutions

Especially during the pandemic, supply chains became overstressed and certain products were available for a short amount of time. It was very common for people to add an item to their grocery shopping cart only to discover that it was out of stock on the day when they received their order and it was replaced for something that was completely useless.  For example, in one of my orders, cleaning vinegar was replaced with organic lemon juice. A friend received beets instead of radishes.

To avoid unpleasant surprises, prepare shoppers for the possibility that an item will be out of stock and allow them to indicate substitutions. And, once those substitution options have been specified, stick with them.

  1. Allow users to specify a replacement for low-stock products while shopping. Make this a part of the flow when ordering the product, instead of hiding it at the checkout.

It’s easiest to select a different product during shopping, so that’s when the user should be prompted for substitutions. But getting asked to select a substitution for every product is tedious — so, instead, do it only for those products whose inventories are running low.

​
Instacart alerted the user that an item was running low and allowed him to specify a replacement during shopping. (Unfortunately, there was no guarantee that the shopper would receive the selected substitution either — if the substitution was also out of stock, Instacart would select another replacement.)
​
DoorDash did a poor job of signaling substitution defaults to shoppers on mobile (left).  On desktop (right), it showed the substitution options for each item at checkout, but the defaults could not be altered.
  1. At checkout, have a dedicated page that allows people to specify substitutions for individual products. Let them to be as precise as possible and offer a no-substitution option.

It’s important to draw attention to the possibility of substitutions, so people don’t end up being unpleasantly surprised when they receive their order. The best way to do it is to have a dedicated step at checkout that allows users to indicate for what items replacements would be okay.

​
Amazon didn’t allow users to specify substitutions while shopping, but at checkout it provided a separate page dedicated to substitutions and let the shopper indicate which products should not be substituted. The separate page is likely to draw shoppers’ attention. However, a global Do not substitute anything checkbox would have been helpful, as would the ability to select specific products for replacements.
​
At checkout, Safeway had a separate step dedicated to substitutions. The user could choose to have the product replaced by one of the same brand in a different size or of a different brand in the same size. (The Customize items link offered these same general options for individual items, but did not allow the shopper to pick a specific product for substitution — which would have been ideal). This policy is, however, meaningless for fruits and vegetables. 
​
By default, Smart &Final did not allow substitutions.
  1. Ask people for their telephone number in order to be contacted for possible substitutions.

A text or a phone call are the best ways to reach someone if a substitution must be made to the order. Ask people to provide this information in the substitution step at checkout, in order to provide the best customer service. Also, accommodate those people who may prefer another contact method, like email, or no contact at all.

In the substitution step at checkout (see above), Amazon showed the on-file phone number for the user and explained she will be texted with a possible replacement that will need approval.

In contrast, Instacart allowed users to add a preferred contact method, but, by default, that method was in-site messaging. The Instacart shopper sent a message through Instacart about one of the items being out of stock, but unfortunately the customer did not see that message. It’s better to explicitly ask users about how they want to be contacted about replacements (instead of relying on a default method). People may not notice that there are several contact preferences or understand their relevance until they’ve shopped.

​
Instacart’s shopper’s messages were sent through the site instead of through text because the user was not asked to specify a contact option and that preference was set to the No Preference default.

Shopping Process

  1. Don’t automatically remove an item that is out of stock from the shopping cart. Instead, mark it as unavailable or out of stock.

In the early days of the pandemic it was common for people to add items to their grocery cart and wait throughout the day for a delivery window to become available. But, because of the time lag between shopping and actually placing the order, often some of the items in the cart became unavailable.  When users finally found a delivery window, they placed the order without realizing that now it did no longer include milk or some other essential item.

In general, when something is not available, it’s best to (a) explicitly say so, (b) if possible estimate the availability date, and (c) offer users the option to enter their email address to be notified upon availability.

Amazon Whole Foods: When the user came back to the cart the second day, the milk had been removed from the shopping cart (see the screenshot above including the items form the same cart), but the user was not alerted. A better design would have simply showed the item in the cart, but marked it as unavailable or sold out.
  1. Indicate any quantity limits on the product page.

To prevent people from stockpiling items or to distribute low-supply items evenly, retailers have put purchase limits on high-demand commodities such as sanitizer, cleaning wipes, or toilet paper. Clearly specify those limits on the product page to prevent futile attempts to increase the quantity of the item.

Smart&Final: The user could click the Edit button to change the quantity of Purell (left), but the plus button (right) did not work. A better design would have clearly indicated the restrictions imposed on the product on the product page. (And the quantity field should have been an editable text box instead of requiring clicks on the Edit button first, and then the stepper to increment the quantity).

Prices, Tips, and Fees

  1. Where applicable, clearly disclose whether the online prices are the same with in-store prices before people start shopping.

Many people assume that in-store prices will be the same as delivery prices when, in fact, that is not necessarily the case. Be upfront instead of forcing users to dig through the site for that information. Transparency is always necessary if you want to build trust and long-term relationships with your customers.

Costco explained the difference between the online prices and the “same-day” grocery prices. Its price limits for delivery were clearly listed.
GrubHub, a restaurant-delivery service, did not indicate whether the prices listed on its website were the same with the in-restaurant prices.
  1. Clearly disclose any delivery limits and tell people if they have added enough merchandise to cart to qualify for free delivery.

When you advertise food delivery on your site, tell people right away whether there is a minimum purchase needed in order to qualify for delivery. For example, Costco was upfront about its $35 minimum for same-day delivery; in contrast, Safeway mentioned this information only on the shopping-cart page.

Safeway told the users that there was a delivery minimum only after an item was added to cart.
Smart& Final indicated that the shopper had to add 19.56 to be eligible for delivery, but this information was only communicated after the user added something to cart and attempted to select a time slot. Ideally, it should have been presented in clear on the home page.
  1. Be upfront about extra costs (service chargers, tips) that the shopper will have to incur.

Often customers have an unpleasant surprise at the checkout when they see the extra delivery and service fees that are added to the cost of their items. If the delivery or pickup incurs extra charges or fees, disclose them upfront, so people know what to expect.

For example, Safeway listed its delivery fees on the Reserve Time page. However, those users who preferred to reserve a time after adding items to shopping cart would have only found out about the extra fee at checkout. Smart&Final had a delivery and a service fee, but that information was only disclosed when the user started the checkout.

Smart&Final disclosed its delivery and service fees only after the user started checkout.

Contact Upon Delivery/Pickup

  1. Allow users to specify a no-contact delivery or pickup option. Make that option the default.

During the COVID-19 pandemic, customers should be given the option to not interact directly with the delivery person.  Moreover, although users should be allowed to switch to in-person delivery, the no-contact option should be the default for all deliveries and pickups.

In the early days of the pandemic, I received a takeout order from a local restaurant through Yelp. I was unpleasantly surprised when the driver rang my doorbell and waited for me to pick up the order, as I would have preferred to not have to interact with him. (Even though it may feel that waiting to make sure that the customer received the order is common curtesy, that bit of customer service may be perceived as against social-distancing rules.)

When I came back to Yelp, I noticed that the site did have a contactless delivery-option, but that was not the default. Since then, Yelp has adapted to the new reality and changed its default.

Yelp: The new checkout form included a default contactless delivery.
Safeway: The user was given the option of a contact-free delivery, but it was not the default (in fact, it could not even be selected). Moreover, the site did not allow users to find any additional details about what the referred “Contact Free” social distancing meant.
  1. If people must sign or receive certain deliveries (e.g., alcohol) in person, be explicit about that requirement during checkout and on the final order-confirmation page.

Normally, the user is required to sign for certain deliveries. The need for a signature should be clearly specified on the place-order page as well as in the final confirmation page, so people will know what to expect.

For example, while ordering wine with Instacart, the user was allowed to specify that the order can be left at the door. However, because the order contained alcohol, the user had to be present to receive the groceries. The final confirmation did not indicate that. (Even though it is custom to ask for ID for alcohol deliveries in the US, some people may assume that the restrictions have been relaxed because of the virus.)

Instacart: The order-confirmation page did specify that the user must have a valid ID, but the delivery option was still Leave at door. This messaging was contradictory and confusing.

Bigger Lessons for Any Ecommerce Workflow

Some of the guidelines in this article are specific to the problems during a pandemic. But many are special cases of general principles of good workflow design that apply in many other circumstances, including normal times. Disregarding them may work when product and delivery availability are high, but breaks the design in extreme situations and uncovers some hidden usability issues. These general principles are:

  • Figure out if you can fulfill the order before the user puts in any substantial work. That means asking for customers’ constraints upfront (delivery area, desired time of delivery) or allowing them to see (and reserve) the available delivery and pickup windows. If it’s not possible to satisfy those constraints, offer alternatives (available delivery windows, alternate stores).
  • Once the user starts adding items to cart, keep those items in the cart, whether they become out of stock or not. Mark those items clearly.
  • Be transparent about minimum-price delivery limits and extra fees.
  • Alert people to possible substitutions, allow them to preset replacements for low-stock items, and do your best to ensure they will see the alerts and have a chance to approve a substitution.

Following these principles will make the ecommerce user experience better not only during emergency situations, but also in normal times.