/Case Study · 03

Fulfillment & E-commerce

Moving ZIP code, store and fulfillment mode to the start of the shopping journey

Role: Product Designer, end-to-end ownership (about 90% of the design)/Company type: Large-scale B2C ecommerce retailer

+20% completed purchases

HEADLINE IMPACT

+20%

Completed purchases

Measured across 10,000+ real transactions after rolling out persistent fulfillment context.

-38%

Cart abandonment from stock issues

Sharp reduction in drop-off previously triggered by last-minute inventory surprises at checkout.

65%

Early-journey adoption

65% of active users set their ZIP code and fulfillment mode within the first 30 seconds of browsing.

80%

Post-purchase satisfaction

8 in 10 users confirmed they clearly understood where, when and how their goods would arrive.

Tested with 15 users in usability sessions; 80% found the new experience easier to understand.

/01 // The Problem

The problem

Users reached checkout before finding out a product wasn't available in their preferred store or fulfillment mode. The problem wasn't a missing selector. Fulfillment context showed up too late in the shopping journey.

Header with ZIP code and location selector, empty state before customer establishes shopping context.(Viewing: Empty Location State)

/02 // Research

Evidence

Behavioral data, customer feedback, usability interviews and a competitive benchmark all pointed the same way. The benchmark showed that major retailers already treated ZIP code, store and fulfillment mode as part of the shopping context from the start, not a decision at checkout.

/03 // Ownership

What I did

I led the process end to end: benchmarking, flows, wireframes, UI and prototypes. I worked with UX Research, the Core/Header team and Engineering through implementation. The Core team built the header component. The rest of the design was mine.

Header with store and fulfillment mode selected — locking location and fulfillment window across all product browsing.(Viewing: Store Selected (Oak Park))

/04 // The Shift

The architectural shift

Before (Friction at Checkout)

Search → Product → Cart → Checkout → Store / fulfillment

After (Upstream Context)

ZIP code → Store → Fulfillment → Search → Product → Cart → Checkout

A new header widget lets users set their ZIP code or location, pick an available store, choose pickup, delivery or in-store, and start shopping with that context already set. The context carries through the rest of the experience.

Listing page showing availability for the chosen mode

/05 // Technical Realism

Designing for imperfect data

Inventory availability couldn’t always be confirmed in real time. Instead of hiding that, I designed the cart to say it: available in the selected mode, available in another mode, out of stock, or different availability by store.

Cart showing the availability states: transparent multi-mode and stock resolution

/06 // Principles

Three decisions, not fifteen

01.

Move fulfillment upstream, from checkout to the start of the journey.

02.

Make fulfillment context persistent. It follows the user through browsing and isn’t a one-time choice.

03.

Design for imperfect inventory data. Show the inconsistency instead of pretending it doesn’t exist.

Cart with the conflict resolved cleanly without forcing full abandonment

/07 // Measured Outcome

Impact

I ran usability testing with 15 users, and about 80% found the new experience easier to understand.

+20% completed purchases, measured across 10,000+ real transactions.
-38% cart abandonment from stock issues. A sharp drop in checkout abandonment caused by availability friction or store changes.
65% early-journey adoption. 65% of active users set their ZIP code and fulfillment mode within the first 30 seconds of a session.
80% post-purchase satisfaction. 8 in 10 users said they clearly understood where, when and how they'd receive their order.

Checkout with split fulfillment and the final order: clear pickup slots and delivery windows

/08 // Learnings

Takeaways

Move critical decisions upstream.

Setting location, store and fulfillment mode before browsing protects purchase intent from the first search and avoids disappointment at checkout.

Design for the system you have, not the ideal one.

The interface should handle imperfect or outdated inventory data transparently without breaking user trust.

Context has to follow the user.

Fulfillment isn’t a one-time modal. It shapes search results, catalog listings, cart states and the final order.