Shop My Store

Shop online as you were at a Kohl's store

October 2015 - Feburary 2016 | Experience Designer | Omni-channel

From October 2015, I started dedicatedly working on Buy Online Pick Up in Store (BOPUS) program across mobile, tablet, desktop platforms and in-store experience at Kohl's. That was only about 4 months after Kohl's launched BOPUS options to customers. It's very convenient for customers who shop online and want to get the merchandise without waiting or paying for delivery. However, the BOPUS option was hidden deep in the user flow and easily ignored.


At that time, the challenge for BOPUS at Kohl's is to increase its visibility through user interactions, bring earlier BOPUS awareness in a more intuitive online shopping experience.


1. Previous Design Evaluation

Previous BOPUS omni-channel work flows

This is a map of the previous best practice work flows of how a user places a BOPUS order on different platforms. Compare to a regular online order, user has to apply a specific filter to find a BOPUS eligible merchandise. Sometimes even if the user finds one, it might not be in stock in the store loction expected. This user flow is especially complicated on mobile platform because the filter is too hidden.

Screenshot Desktop Filter
BOPUS filter on Kohl's search result page
Screenshot Desktop Filter
BOPUS option and store selector on a product page

Because of the limited space on mobile platform, the filters are not displayed directedly. Applying a BOPUS filter would usually take a user at least 4 taps.

Screenshot Mobile Filter
BOPUS filter on Kohl's native app

2. Usability Test of Previous BOPUS Experience

We have dedicated research team worked on the usability test of previous BOPUS workflow. However, I also went to Kohl's stores and grab random customers to do usability tests to get some first hand data. Some finds related to BOPUS are:

  • The top reason given for usage of the Pick Up in Store filter was preferring to avoid shipping costs and the wait for a shipment delivery.
  • Other noted benefits of picking up in store included being able to see and touch the product before bringing it home and ease of return.
  • 15% of those who indicated they used filters in general used the Pick Up in Store filter.

Customer feedback highlights:

"I wanted to have the item for store pick up. Was told the item was unavailable. Upon switching to delivery to my home it was available. $8.95 for delivery. Seriously rethinking my love of Kohl's"

"With the advertising for being able to pick up in store, it would be nice to actually find something that is available to pick up. I have not been able to find one item that is available to pick up at store. I wanted to use my Kohl's cash without having to get to the store. Unsuccessful, $10 in the trash."

3. Competitive Analysis

Our retailer competitors also have similar "Pick up in store" filter. We found a few of them started implementing a preferred store location as a filter option. This inspired me to explore further on this design opportunity.

Competitive Analysis
Competitive Analysis on BOPUS filter

A summary chart for the compatitive analysis

Competitive Analysis
Compatitive Analysis Chart on Major Retailers BOPUS

Research Takeaway

One key problem we found that affects BOPUS online shopping experience is INVENTORY VISIBILITY when searching for target items. It happens that merchadise could be in stock in some stores but out of stock in some other stores. Using the “Pick up in store” filter doesn’t assure the product is available at the store customer wants to go. The user either need to find another store to pick up, or give up the merchandise and choose another item.

Bad Experience
User experience when target item is not available at preferred store location


Based on the research, some design opportunies were identified.

  • Noticing BOPUS as an option on the site while searching or browsing for a product can lead to a decision to use BOPUS.
  • A desire to save time and costs paired with the pre-existing knowledge that there’s a Kohl’s store nearby leads to a decision to use BOPUS before exploring the Kohl’s site... as long as there is an awareness of or expectation of the availability of BOPUS.
  • There are other noted value-adds that would require a separate In-Store filter: checking whether merchandise available in nearby stores, researching a planned in-store purchase in advance.


BOPUS awareness can be brought as early as when user searches target items. Either a BOPUS search query or BOPUS toggle can help user see the inventory in user's prefered store.

Brainstorm Design
BOPUS Intergrated Search Exploration on Web
Brainstorm Design
BOPUS Intergrated Search Exploration on Mobile

Store Filters also provide users with the inventory visibility of nearby stores. It assures users what they see will be in stock in store and available for pickup on the same day.

Brainstorm Design
BOPUS Store Filter on Search Result Page


There are many design variations and iterations around the concepts of integrated search and store filters. I did test with customers in store. Most feedback are positive. However, when it comes to a releasible design delivery, there are many constraints implementing the "ideal design". For example:

  • Integrated search on Web was conflicting with another project we were doing.
  • Store filter on the search result page has page performance issues that current technology could not solve. So I have to reduce the stores displayed by default.
  • Big changes on the page layout to fit new design elements is not doable, because it will trigger redesign of a lot more elements. Thus I got too limited space to "dream bigger".

So, some ideas were moved into backlog. Some ideas need to compromise. However, design is never wasted. When the business value is big enough to initiate bigger redesign, or when we have less technology constraints, a better user experience will be delivered to our customers.


We believe the Store Filter will help users find their BOPUS eligible products more easily omni-channel

Desktop Web Store

At, a preferred store is set either by the user or geo-located based on user location. We call it "My Store". By selecting "Pick Up in Store" filter, it will automatically select the preferred store to filter down search results. User can also load more nearby stores to see more product options.

Store Filter is special enough to be displayed on top of other filters.

Deliverable Desktop
Store Filter Desktop Web
Deliverable Desktop Filter
Store Filter Interaction Details

Tablet Web Store

Kohl's web store is taking an adaptive approach to fit different device sizes. All filters on Kohl's tablet web store are grouped into a FILTER button. We believe the store filter deserves its own button that user can easily see and use.

Deliverable Tablet
Store Filter Tablet Web

Mobile Native App

Mobile Phone platform has smaller space that can fit a list of store filters. A toggle switch is used to easily filter the search results by preferred store inventory.

Deliverable Mobile
Store Filter Mobile Native App

Mobile platform has smaller space that can fit a list of store filters. A toggle switch is used to easily filter the search results by preferred store inventory.


With store filters. new flow is more linear when user searches BOPUS eligible products.

Deliverable Tablet
New user flow

The store filter was realised shortly after I left the company. Mobile Shop-My-Store toggle was realised a bit later. There has been a great increase on BOPUS orders. BOPUS orders are now 15% of Kohl's total sales.