The context.

MeasuringU released their 2022 Benchmark Report analyzing the UX and Net Promoter Score of 8 popular grocery websites or apps. Unsurprisingly, the lowest ranking experiences for every single store surrounded users’ satisfaction with their out-of-stock items

The Main Out-of-Stock Flow.

If an item has gone Out of Stock in between the item of building their cart and checking out, there are two ways the user can replace their out-of-stock item. 

Flow 1: The user has an OOS item in the top section → doesn’t interact with it and taps the checkout button → is taken to an interstitial screen which forces the user to replace or remove the item before they can continue → the user taps “Find Substitute” → the user is taken to a screen with three recommended items, or they can search for another desired item.

Flow 2: The user has an OOS item in the top section → they tap “Find Substitution” → the user is taken to a screen with three recommended items, or they can search for another desired item.

The edge case.

The recommended item list screen automatically filters out any low stock or out-of-stock items as well as items that are a different unit of measurement. However, if the user uses the search bar, we don’t filter any of those variables so that there is transparency to the users about the sale and stock status of every relevant item. Meijer has 9 different unit of measurement categories.

Ideation.

1. Develop an algorithm to make assumptions about “reasonable” quantities before they’re added to the cart

   1. Rejected due to timeline and feasibility

2. Leave the responsibility of checking and adjusting quantities to the user

   1. The UX Architect and I agreed that this was the best option and to inform the user of:

      1. the situation, and

      2. of the fact that they need to take further action to check or adjust the quantity

Design 1: Cart Banner

This design was abandoned due to logistics. Meijer’s iOS developers are transitioning our screens from the UIKit framework into SwiftUI. While this banner would notify the user in the least intrusive way, this banner component was built for the iOS developers using SwiftUI. Our cart screen is built in UIKit and will continue to be in UIKit at the time of the Out of Stock feature’s release.

Design 2: Dynamic Alert

This alert would be triggered by the user tapping “Find Substitution” in the cart and selecting an item in the substitution search results list that has a different unit of measurement. If the user tapped “Confirm”, the app would add the new item to the cart. If the user tapped “Go Back”, they could select an item of the same unit if desired. After workshopping the verbiage with our UX Writer and confirming with both iOS and Android devs that the text could change based on the items selected, this concept was rejected due to being too wordy.

Design 3: General Alert

After the rejection of the Dynamic Alert concept, the product team decided they wanted a general alert that would be triggered even when an out-of-stock item is replaced by an item of the same unit of measure.

I assigned the following logic to minimize the intrusion of this alert:

1. When the user has multiple out-of-stock items: trigger the alert during the first substitution but not for the others during this visit to the cart

2. If the user makes a substitution, leaves the cart, returns to the cart, and then re-enters the substitution flow: trigger the alert

Quantity Logistics.

The team considered making a 1-to-1 substitution when able in the instance of mismatched units of measure. However, users are very passionate in our user tests when they feel we’ve unethically increased our sales metrics by sneaking items into their cart. To maintain the trust of our users, all substituted quantities will be reset to 1. While it may be inconvenient for 4 Honeycrisp apples to be replaced with 1 Granny Smith apple, we’d rather do that than have a user accidentally buy 20 bags of apples.