Challenge
In 2021, Grubhub expanded into grocery and convenience ordering, which required drivers to shop in-store for items. However, the inventory data we received didn’t update in real time, so items listed as available were frequently out of stock by the time drivers went to find them.
Compared to restaurant orders, these new order types saw 3x higher rates of missing items, cancellations, and customer support contacts.
Customers were receiving incomplete orders, drivers were losing time and money coordinating with customers and support to make substitution decisions, and Grubhub was absorbing the cost of refunded items.
Objective
To ease frustration, reduce support costs, and prevent delays during shopping, we wanted to give customers a way to proactively set substitution preferences so drivers would know what to do when items were out of stock.
Approach
I was the sole designer of the customer-facing experience across iOS, Android, and Web, working with partners from UX research, UX writing, product, and engineering across our customer and driver teams.
I designed a flow that…
Offered optionality without causing decision fatigue
Made it clear to customers what they would receive and how much they’d be charged
Impact
50% reduction in cancellations
Within six months, cancellations for grocery and convenience store orders were cut in half
$622K annual savings
Reduced cancellations and refunds saved the company an estimated $622,000 per year
STEP 1
To help familiarize myself with the space and understand what mental models may already exist for managing out-of-stock items, I began with a competitive audit of similar grocery and food delivery services.
Pre-checkout
Substitution preferences were usually selected at the individual item level, as items were added to the cart
Most default preferences were designed to save the order and reduce contacts when possible (i.e. choose best available)
During shopping
Shoppers relied on in-app messaging to confirm what action should be taken, regardless of preferences set before checkout
Post-shopping
Only some of the services provided an alert or notification when items were unavailable, leading to surprises once orders arrived
None of the receipts did a good job of showing the replacement items that were purchased, which led to confusion over the final order total
My findings stressed the importance of removing unnecessary interactions and making final order details clearer.
STEP 2
My next step was planning and facilitating a cross-team mapping workshop where product, design, and engineering partners worked together to align on an ideal end-to-end flow: from the customer building a cart, to the driver shopping for the order, to the order being received.
Our UX research team had already conducted interviews with both customers and drivers, and two specific insights guided our flow:
Customers tend to “set it and forget it”
Many don’t keep an eye on their phones after their order’s placed, and they often miss communication from drivers
Drivers fear making a wrong choice
They worry that picking a substitution the customer doesn’t like could lead to lower tips or a negative rating
With this in mind, our flow was designed to:
Capture preferences during cart creation
Ensure preferences were accessible and visible throughout the ordering flow
Remove the need for drivers to contact customers during shopping or make choices on their behalf
STEP 3
Both the consumer and driver teams walked away from the workshop feeling confident in our vision, and I was excited to begin design exploration. But as we moved forward, a number of constraints emerged that challenged our assumptions, pushed us to adapt, and led us in a new direction.
Profitability was a top priority for the business, and there was concern that this feature would add friction to checkout and increase dropoff rates.
To eliminate the risk of conversion loss, product leadership decided that, at least for the initial release, substitution preferences wouldn’t be introduced until after an order was placed
The ability for customers to search for specific items as replacements wouldn’t be available for launch due to the back-end engineering resources required.
This meant we would need to find the right balance of surfacing relevant recommendations without causing decision fatigue.
I revised the user flow based on these decisions and determined which interaction patterns would best guide customers into the post-checkout experience and make it easy to select their substitution preferences.
STEP 4
Two key areas I focused on were:
Structuring and presenting the top-level “replace vs. refund” decision clearly
Leveraging existing item card selection patterns to maintain consistency and minimize engineering effort
As part of this work, I collaborated with the design systems team to introduce a new segmented control component, which streamlined the interaction and made it easier for users to toggle between options.
To avoid overwhelming customers with too many decisions at once, I also wanted to include default substitution options (i.e., Grubhub recommendations). Customers could quickly opt in without selecting specific replacements for every item, and item previews still provided transparency. Framing them as Grubhub’s choices also helped set expectations and eased pressure on drivers.
STEP 5
After weeks of work, including usability testing and design refinement, we were finally able to incorporate real, back-end data to our internal test site.
The results were… disappointing. And we were hit with another constraint.
Despite our dependence on recommendations to encourage item replacements, resourcing constraints meant we could only generate basic recommendations based on item name category vs. having a smarter engine that could incorporate item-specific criteria (e.g., fat percentage for milk vs. strength for medication), order contents, or past purchases.
We knew this wouldn't be ideal, but we didn’t realize how few recommendations it would actually yield.
After presenting and discussing options with product and design leadership, we made the difficult decision to include a “contact me” option, prioritizing business needs while giving drivers the ability to offer in-store alternatives beyond our in-app recommendations.
STEP 6
Alongside stakeholder reviews, I built interactive prototypes and ran multiple rounds of user testing to validate usability and comprehension, refining the content and flow along the way.
STEP 7
Creating a seamless entry point and keeping customers engaged
Customers are prompted to set preferences immediately after their order is placed and before order tracking is accessible, to make it feel like the next step in the checkout process.
Providing optionality that encourages replacements, without overwhelming
Customers have the option to approve specific replacements, request driver contact, or receive a refund for each individual item.
Up to three recommended replacements are provided per item, so the customer has multiple options to choose from but doesn’t feel overwhelmed by choices.
Eliminating guesswork on order receipts
Customers receive a notification once the driver has finished shopping, at which point they can view their order receipt and easily see any substitutions or refunds that were made.
This flow successfully reduced cancellations on grocery and convenience store orders by more than 50%, and led to an estimated annual savings of $622k due to lower refunds and support contacts.
Continued learning
Updates to this flow were deprioritized given its overall success, but in continuting to monitor the data it became clear that there was room for improvement.
Low interaction rates
19% of customers didn’t engage with the flow, highlighting the need to be more proactive in its introduction
Contacts lead to cancellations
33% of customers requested driver contact for every item, which led to a higher chance of a cancelled order
If I had the opportunity, I would want to test a variation of the flow that brought customers directly to the substitution preferences page after checkout, instead of relying on them to click into it.
This was my first time designing and QAing an entirely new flow across multiple platforms, and the design documentation and engineering handoff were a huge effort. It was also a reminder of the importance of presenting work early and ensuring alignment with leadership from the start. But I’m proud of my adaptability and ongoing collaboration with the driver team to create a cohesive end-to-end flow that balanced the needs of both user types.
Want more details?
Curious to see more of the explorations? Or how I built the prototypes for user testing? Or my beautifully meticulous design documentation?
Please reach out! I’d love to share more.
Other featured work
Redesigning order tracking to build clarity and trust
I led the redesign of Grubhub’s order tracking experience, creating a strategic, data-informed framework to rebuild customer trust and reduce support contacts, with the potential to save over $1.5 million annually. This work is currently in progress
