Online Grocery UX: 3 Ways to Make Setting Grocery Substitution Preferences Easier

Key Takeaways

  • On grocery sites, users are often asked to select substitution preferences in case any items are unavailable at the store
  • In practice, selecting substitutions can be time-consuming, especially when users must make selections item-by-item (e.g., “don’t replace any out of stock items”)
  • Finding ways to make the process of selecting substitutions easier — from setting a single global preference for all items to preemptively asking users to select a substitution only for items at risk of being out of stock — helps keep users focused and minimizes unnecessary and time-consuming interactions

During our UX testing of online grocery sites, navigating grocery substitutions was among the most fraught scenarios, with 76% of users experiencing at least some difficulty.

One of the most common issues occurred when users were forced to select substitution options for each individual item in their cart, a tedious and time-consuming process that took upwards of 10 minutes for some to complete.

In reality, some users will decide it’s not worth the effort and abandon the site rather than risk getting undesired substitute items.

In this article, we’ll discuss some of the key test findings from our research on online grocery UX, including:

  • Why the demanding process for selecting grocery substitutions is necessary to begin with
  • How sites can streamline the process of selecting substitutions by providing a single shortcut link
  • An additional way sites can reconsider the need to ask for comprehensive substitution preferences

Selecting Substitutions Is a Necessary — but Often Demanding — Part of Placing Online Grocery Orders

“This is a lot…I like having that control, but having to mentally go through what I would rather them get for me, when no one even knows if they’re out of that or not yet, is a lot, especially if I had my whole grocery list here.” This user on Shipt’s mobile site was overwhelmed at the prospect of selecting substitutions for every item in her cart. While acknowledging that she could leave items with the default, “Contact me”, she admitted that ignoring the invitation to make selections induced anxiety: “To be honest, this would make me not wanna use this service in the future, even if everything else was perfect.”

“Because I am a little bit particular about it, I do kind of go through item-by-item, which is really time-consuming to go through, but I don’t know what a better option is…I don’t want them to guess for me. So okay, eggs, do I need eggs? Yeah, I need eggs. So, which eggs do I prefer? Well, now I’m just shopping again.” Another user on Amazon Whole Foods’s mobile site didn’t trust the site to select the “best available” substitute, but the prospect of making selections for every item in her cart was overwhelming.

For standard retail orders, users can often safely order items that are currently unavailable for future delivery with a lengthened delivery timeframe, which is good out of stock UX — effectively “preordering” the item for fulfillment once the product is back in stock.

However, this increased time frame for delivery doesn’t work for online grocery orders, where users require often-perishable items fulfilled quickly — as soon as immediately — from their local store. In practice, many users will want any unavailable items to be replaced with a close substitute rather than be left without necessary grocery staples.

At the same time, users often require additional control over the specific substitutions for out of stock items, whether due to allergies and food sensitivities, or simply personal preferences, and in testing online grocery sites often resorted to elaborate interfaces allowing users to select substitutions on an item-by-item basis.

“Is there a ‘do not substitute all’ button? Yeah, I don’t see anything where you can. It’d be nice to be able to check one [box] and then ‘select all’ because going through each individual thing is kind of annoying…because now I have to scroll all the way and say, ‘do not substitute’ for every single item, which is pretty time-consuming.” Concerned with food allergies, this user shopping on Shipt’s mobile site preferred not to have any substitutions for her selected items and spent over a minute painstakingly changing each item in her cart from “Contact me” to “Do not substitute”. For users with particular preferences, making item-by-item selections is burdensome and slow.

However, despite offering users more control, the process for selecting substitutions often resulted in frustration and difficulty for users, who were often overwhelmed at the prospect of “shopping all over again” for substitutions.

In reality, many users are interested in either substituting all items or not substituting any items — some users will be less picky about their items, and thus be willing to accept a substitute, while others will not want any item they didn’t select themselves.

Practically, selecting substitution preferences quickly becomes unwieldy when users are forced to select, for example, “do not substitute” (or consider individual substitution suggestions), for each individual item in their cart.

While users may be willing to set preferences for individual grocery items for small grocery orders (e.g., less than 10 products), this quickly becomes more and more tedious as the size of the order grows.

“I just said ‘do not replace’, but it looks like I would have to do that on every item, which would not be preferable.” This user shopping on Instacart preferred that the site not replace any out-of-stock items, but specifying this preference required selecting “Preferences” in the cart, “Other Options” on the “Preferences” subpage, and finally “Don’t replace this item” for each individual item in the cart (as the default action was to replace with “best match”), demanding much time and effort. Requiring users to navigate 3 levels of the cart for each item they want to replace will become a roadblock to some users completing their order.

“I guess the reason that I am frustrated is that this part is pretty time-consuming, and I feel the need to go through.” Another user on Amazon Whole Foods’s app was similarly intimidated by the substitution step of checkout. Considering some of her options, she continued, “See, this is a hard decision, which salsa do I want instead?…To do all my shopping and to feel like I’m done and then get surprised by having to go shopping a second time is a lot.”

Indeed, whether presented in the cart or later in the checkout process, users in testing were often daunted at the prospect of selecting substitutions on an item-by-item basis.

In practice, users who have navigated to the cart or begun the checkout process have likely already mentally “moved on” from the product-exploration phase and are instead more focused on completing the checkout process. Requiring them to reorient themselves from checkout details — delivery or pickup information, billing and payment — back to considering product details will for many users feel like they’re being forced to “tell the site twice”.

Consider Asking Users to Select Substitutions Only When Items Are Truly at Risk of Being Unavailable — or Actually are Unavailable

“Ooh, I like that. Okay, it tells me that it’s running low. I can go ahead and preapprove a placement just in case.” This user on Instacart’s mobile app appreciated being notified, after adding an item to her cart, that it was low in stock, and that she had the option to approve or select a different substitution. Substitution preferences are only relevant when items are out of stock or low in stock, so it makes sense to collect a substitution preference from users for individual items only when items are at risk of being unavailable.

Considering the time and effort it takes users to consider grocery substitutions, it’s worth reassessing the value in asking users for their preferred substitute for every item in their cart.

As another user from testing stated, “I make enough decisions in my life. I don’t need to make 17 hypothetical grocery decisions when I don’t know [if they’re out of stock]”.

Naturally, this input only becomes valuable when the user’s original item turns out to be unavailable — in the more likely scenario that it is, in fact, in stock, this information will go unused, making its entry an unnecessary requirement.

“I like that this one shows me ‘low stock’ on the yogurts because that tends to be something that I end up having to have substituted.” This user on Shipt’s mobile app added an item to his cart and was notified that it was low in stock. He happily selected a substitute, preventing him from potentially receiving an unwanted substitution.

In practice, grocery sites can consider alternatives that require this information of users only when truly necessary.

For instance, before users get to the cart in preparation of finalizing their order, sites can ask users if they’d like to substitute for an item while they’re shopping — but only when the item is known to be low in stock at the user’s selected location.

In doing so, sites can prevent users from becoming overburdened when they get to the cart to finalize their order.

Of course, this solution requires integrating real-time (or near real-time) store stock updates with the site’s online ordering system, which can be a sizable investment.

Another possible solution is to only integrate the substitution approval postcheckout, corresponding with users if their items turn out to be unavailable while their order is being fulfilled.

While not verified in testing, many users volunteered a preference for this option when it was presented alongside others.

For instance, one shared her past experience with another grocery delivery service: “When they’re out of [an item] they call me when my pickup is ready, and then they tell me what they’re out of, and I can just tell them what I need them to substitute.”

Postponing the decision of selecting an individual substitution prevents users from getting sidetracked during checkout and only requires their input when it is truly required.

Streamline Grocery Substitutions by Allowing Users to Set a Global Preference

On Erewhon’s mobile site, users are invited to select their preference for handling substitutions using a single global option presented at the top of the cart, or they can opt into substitutions for only some items.

Another solution to save users the effort of making the same selection for each individual item, sites can allow users to make a single global selection to apply to all items in their cart (e.g., “do not substitute anything out of stock”), along with allowing users to choose substitution preferences on an item-by-item basis.

This addition allows users maximum flexibility in selecting substitutions, whether they want them only for certain items or for all (or none) of the items in their cart.

“Oh, wait, there’s a button right here!…I didn’t see that though. Why didn’t I see that? It seems pretty obvious now that I’ve seen it. You know, I would like that to be up at the top, like this. I just didn’t see it, it just blended with the ‘Continue’ button.” After selecting “Don’t substitute” for every item in her cart, this user scrolled to the bottom of the page to discover a checkbox that had just appeared for selecting “Don’t substitute” for the entire cart. In fact, the checkbox only appeared after users had changed their substitution preference for at least one item. Users who want to apply this option to their entire cart waste time and effort doing so on an item-by-item basis.

Additionally, while some sites during testing provided an option for making a global selection, it wasn’t easy to find — in fact, on Amazon Whole Foods the global substitution checkbox only became available at the bottom of the page after users selected “Don’t substitute” for at least one item.

In practice, most users only noticed the checkbox after it was too late and they had already made item-by-item changes. Such a frustrating experience — hiding a desired option that would save much time and effort — will for many users be enough for them to reconsider using the site to place the order, or will negatively influence their perception of the site.

Therefore, this option should be immediately visible by default rather than, for example, appearing only after changing one or several items from the default, or being placed in an inconspicuous location that will be easy for users to overlook.

Selecting Grocery Substitutions Doesn’t Need to Be a Burden

Despite being a unique and potentially fraught part of ordering groceries online, sites have significant opportunities to streamline the process of selecting grocery substitutions.

To begin, grocery sites should evaluate how often substitution preferences are actually used and consider ways to ask for this information only when it will likely be needed — such as when a product is known to be at risk of being unavailable, or even contacting users during the physical shopping process if a product turns out to be unavailable.

For users who prefer the same selection for their entire cart — or simply don’t want to consider each individual substitution option — sites should always allow users to select a single global selection for substitution preferences (e.g., “don’t substitute any unavailable items”), and present this option prominently presented in the cart.

By streamlining this tricky aspect of online grocery shopping, sites can keep users from getting bogged down in minute decision-making and help them get through checkout more quickly and easily.

For inspiration on other sites’ implementations and to see how they perform UX-wise, head to the publicly available part of the Grocery benchmark. Here you can browse the Grocery implementations of 5 benchmarked sites.

Getting access: all 383 Grocery UX guidelines are available today via Baymard Premium access. (If you already have an account open the Grocery Study.)

Authored by Kathryn Totz on January 18, 2022

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

User Experience Research, Delivered Weekly

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

A screenshot of the UX article newsletter