DSW: Buy Online Pick-up In Store (BOPIS)

In 2015, DSW kicked off a site redesign that would include making the entire site responsive. At the same time, we were launching our largest product feature since the original site launch, Buy online pick-up in store (BOPIS).
The solution we created for BOPIS would have to work in both our non-responsive current sites, as well as the yet-to-be designed new experience.

Storyboards

The first thing we set out to understand was how someone would experience the full on and off site touchpoints of this program. We created storyboards to explain the most impactful moments of the customer journey.
Once the high-level experience had been expressed, we set to work on understanding the on site implications of integrating BOPIS into the product.

Product Screens Mapping

Original Screens that would affected

 
While there were many opportunities identified to highlight local inventory throughout the site experience, the scope of the project kept the execution focused on the product detail and checkout screens.
Product design then set to work on detailing out the module-level interactions on these key screens.

Product Details Screen Feature Flow

Location/Inventory Module Wireframes

As soon as we had something close to a clickable prototype, research with buyers kicked-off. We talked to users as they went through the entire customer journey, making changes to the product flow and in-store signage as needed.

User Research Scripts

While the current sites were not responsive and the flows of the mobile experience were different than desktop, the product design team approached the visual and interaction design as if the site was responsive. This would make BOPIS flow more easily integrated into the new site when it launched.

Visual Design Elements

Product Listing Screen

Check Inventory Modal

 
The extent to which we could modify the checkout experience was limited to UI modifications and enhancements. However, before BOPIS functionality launched, just the UI clean-up contributed to a decreased bounce rate and higher conversion rates on every type of purchase.

Cart Screen

Order Review Screen

Order Confirmation Screen

 
Two years after we completed our work, the site redesign launched. Almost every aspect of the site was reconsidered, but one of the few things that largely remained in tact was the original product flow for buy online pick-up in store. This is a testament to systems thinking.

2017 Redesigned Product Details Screen