Product substitutions: a second choice before fulfillment

UX PROJECT: PRODUCT SUBSTITUTIONS

My role

Designed customer-selected alternatives using existing system components.

Collaboration

Product and engineering shaped the planned MVP.

Status

Product-approved prototype prepared for planned Q1 2022 development.

The problem. Online grocery has a perennial problem: the item the customer picked isn’t on the shelf. When the customer asks for the “best comparable,” the personal shopper has to choose for them or stop and reach them. Every out-of-stock slows the order and strains the store.

What we learned. The existing flow dated from the startup years, before Freshop had a design team. I was the team of one, and engineering had added the original substitution feature. We studied how Instacart and others handle it. Their customer side was visible, but their fulfillment side wasn’t, so we interviewed the engineer who architected our version to learn where the guardrails were.

The call. Product wanted an MVP by the end of the quarter. So instead of a new pattern, we used the design system’s existing patterns and components and framed the problem narrowly: fewer options, lower cognitive load, and one optional second choice from the customer. The intent was to give the personal shopper a customer-selected alternative before they needed to ask for one.

The concept prototype shows where we started. The product-approved prototype shows the version intended for engineering to build as a minimum viable product (MVP) in Q1 2022. A recommendation feature was also being developed at the time. The work shown here is the design and planned engineering handoff from that period.

Product Substitutions Component Flow