Payless shoes arranged on a warm neutral background

Payless ShoeSource

Building Buy Online, Pick Up In Store

Building a research-backed ordering and pick up experience

2017 0→1 Design

  • Design Lead
  • UX Strategy
  • Research
  • Prototyping

Overview

Introduce Buy Online, Pick Up In Store (BOPUIS) to give customers the flexibility to shop for same-day in-store pick up

The feature created a much more complex UX problem than simply adding a new fulfillment option. Product availability varied by SKU and store, customers could enter the experience with or without a preferred location, and Payless's first-phase fulfillment rules did not allow products with different delivery methods or pickup stores to coexist within a single order. The experience also needed to bridge the gap between ecommerce and the physical store, including pickup timing, identification requirements, alternate pickup people, order communications, and returns.

Working at Blue Acorn, I approached the project as an end-to-end service experience. I combined competitive analysis, real-world BOPUIS purchases, journey mapping, and desktop/mobile user testing to identify failure points before designing the feature. Those findings became the foundation for detailed prototypes and an experience specification covering the journey from product discovery through store pickup.

Results

0→1

Delivered an end-to-end experience specification spanning PLP, PDP, cart, checkout, confirmation, and order status.

The Opportunity

Create a new level of convenience for customers while maintaining a traditional ecommerce experience

BOPUIS introduced convenience for customers, but also introduced failure points across nearly every stage of the shopping journey.

If store selection happened too late, customers could browse or configure a product only to discover that it wasn't available nearby. If fulfillment choices were disconnected from Add to Bag, customers could unintentionally add an item using the wrong method. And once products reached the cart, Payless's first-phase technical constraints meant customers could not combine shipping and pickup—or even pickup from two different stores—within one order.

The physical pickup experience added another layer of complexity. Research showed that customers needed clear expectations around when an order would be ready, which store to visit, what identification to bring, who was authorized to retrieve it, and what to do if something went wrong. Even seemingly small omissions such as hiding the store phone number or alternate pickup-person details created unnecessary uncertainty.

Instead of treating these issues as edge cases to resolve after the core UI was designed, I used them to define the experience from the beginning.

The Solution

Researching the buy online, pick up in store experience beyond the web

Journey-mapping research in progress

I began with a competitive audit spanning retailers including DSW, Target, Kohl's, Sears, Best Buy, Walmart, Macy's, Home Depot, Foot Locker, Toys “R” Us, Nordstrom, and Dick's.

The audit revealed several competing approaches to BOPIS: some retailers surfaced pickup as early as the PLP, some attached it directly to Add to Cart on the PDP, while others deferred the decision until cart or checkout. The strongest experiences consistently made location, availability, and fulfillment intent visible earlier in the journey.

We then went beyond interface analysis by placing actual BOPIS orders with Target and DSW, following each journey from browsing through physical pickup. I mapped the two experiences across browsing, purchasing, email communication, customer service, and in-store fulfillment to identify both digital and operational pain points.

Detailed BOPUIS customer journey map

The journey map exposed issues that screenshots alone would have missed: pickup-person verification, locating order numbers in email, finding store contact information, understanding pickup timing, return eligibility, and knowing where to go once inside the store.

We supplemented this with user testing across desktop and mobile, focusing separately on upper-funnel shopping behavior and checkout/alternate-pickup-person interactions.

Testing reinforced three major findings:

  • filtering needed to account for product variation-level inventory, not just the parent product;
  • repeating fulfillment information in cart and checkout reduced backtracking and increased confidence;
  • showing pickup timing and direct store contact information made the service feel more dependable.

Key Design Decisions

  1. 1

    Move availability upstream

    Ensure customers understand realistic item availability before investing time in browsing and purchasing.

  2. 2

    Preserve fulfillment intent

    Selecting BOPUIS on the PLP influenced the PDP - fulfillment method and store info remained visible and editable through cart and checkout.

  3. 3

    Plan for failure states

    Multiple stores, incompatible products, missing geolocation, unavailable inventory, store closing times, and mixed fulfillment were explicitly mapped and prototyped as core flows.

  4. 4

    Design the digital and physical experience together

    Information critical to pick up was considered part of the UX because the customer's experience continued long after checkout.

Payless BOPUIS experience shown across desktop and mobile devices

Bringing store availability into product discovery

Research showed that asking customers to choose a store too late created unnecessary backtracking, so BOPUIS was introduced directly on the Product Listing Page. Geolocation could identify a nearby store, while pickup filters reflected store and variation-level availability across color and size, with inventory cues such as All Sizes, Limited Sizes, or Only A Few Left.

Customers could change stores or search by ZIP code, city/state, or current location, with recovery options when availability was limited—moving the question “Can I actually get this product near me?” to the beginning of product discovery rather than the end.

Payless product listing with store availability controls
Payless product detail page with fulfillment controls

Connecting fulfillment intent directly to Add To Bag

Research showed that BOPUIS was easy to miss when fulfillment choice was separated from the purchase action, so I integrated Shipping and Pick Up In Store directly above Add to Bag on the PDP. Pickup intent carried forward from a BOPUIS-filtered PLP, while availability and timing updated dynamically as customers selected product options.

The experience accounted for same-day pickup, ship-to-store, BOPIS-only and shipping-only items, alternate-store availability, and store-closing cutoffs, while letting customers compare nearby locations by distance, address, phone number, and pickup timing. This also replaced the existing Find In Stores interaction, reducing confusion and keeping fulfillment decisions within the primary purchase flow.

Designing recovery for complex cart states

The cart was the most complex part of the experience because Payless could not support mixed fulfillment methods or pickup from multiple stores within a single order. Rather than exposing those constraints as dead ends, I designed recovery paths that helped customers consolidate pickup at a single eligible store, switch the order to shipping, or remove/save incompatible items for later.

The experience accounted for same-day pickup, ship-to-store, mixed pickup and shipping carts, multiple-store conflicts, and BOPUIS-only or shipping-only products, turning complicated fulfillment rules into clear, actionable choices.

Payless cart recovery states
Payless checkout pickup details

Influencing the experience through checkout and in-store

Research showed that the BOPUIS experience needed to extend beyond checkout, so I designed pickup as a dedicated step where customers could review store details, pickup timing, ID requirements, and the assigned pickup person, with the option to add an alternate.

Order review and confirmation then reinforced the information customers would need later treating post-purchase communication as part of the core product experience rather than an afterthought.

Designed while working at Blue Acorn

Back to Portfolio