Designing the Buy Online, Pick Up In Store Experience at Saks OFF 5TH

Problem Statement

In response to the COVID-19 pandemic, Saks OFF 5TH wanted to implement a ‘Buy Online, Pick-Up in Store’ (BOPIS) feature to all their digital channels, and offer customers an additional form of order fulfillment, drive in-store foot traffic and connect their offline and online presence.

The Challenge

The goal was to allow customers to shop online for items they wish to pick up in store. We believed this would:

Increase store traffic and revenue by driving in-store purchases from pickup orders.
Increase conversion adding a delivery option at checkout and eliminating shipping cost for customers.
Improve customer experience and customer satisfaction by making their shopping and pickup experience easy and convenient.

My Role

Product Design Lead

Feb 2021 — Aug 2021

I was tasked to design the end-to-end experience across all digital channels at Saks OFF 5TH. This included the website, the iOS app and the Android app, and all transactional emails.
‍
My responsibilities included:

Conducting UX research and competitive analysis.
Gathering business requirements with the product team.
Creating wireframes, mockups and prototypes to communicate interaction and visual design.
Leading design review sessions to get alignment across multiple stakeholders.
Validating designs through user testing.
Conducting visual QA during development.
Prioritizing UI defects for launch.

Competitive Analysis

I sought inspiration from best in class retailers in the market and benchmarked their digital experience against our peers. I was able to identified key features that we could consider implementing to remain competitive.

I then met with product, business and engineering partners to calculate impact, level of effort and cost for each of these features, and determine which ones would be part of our MVP given our limited resources and timeline.

We determined that Curbside Pickup, Ship to Store Option and Time Stamp for Same Day Pickup will be out of scope for MVP.

Curbside Pickup

I consulted with product managers, tech leads and store associates to create a Service Blueprint. The goal was to understand how the service would look like from the customer and store associate perspective, as well as the design, technical and operational requirements needed to support this service.

After sharing the Service Blueprint with the business and stores team, and calculating the impact, level of effort and ROI for this feature, we decided to leave it out of scope from our MVP. The cost and level of effort needed to implement on our site was too high for the estimated inventory eligible for curbside pickup at launch.

Scenario: Pickup Order via Curbside

Usability Tests

I performed 3 unmoderated usability studies to analyze the newly designed BOPIS experience at Saks.com. Each test was shared with approx. 18 participants and distributed evenly between mobile web, desktop web and iOS app devices.
‍
My goal was to identify and understand existing pain points on the customer journey, and discover opportunities for improvement to apply at OFF 5TH.

Most of the pain points we found where in the Product Array page, Choose a Store panel, and Cart page. The two biggest insight were:

Some mobile participants couldn't find the BOPIS filter.
It was frustrating to check if an item was available for pickup on the Bag page because they had to tap each item individually, and tap their zip code to find out.

Example of a spreadsheet used to analyzed the results from one of the three studies.

Wireframing

I mocked up wireframes that captured all the functional requirements collected during business meetings. They were used to gain alignment across all stakeholders and conduct effort, resource and cost estimation. Designs were provided for mobile and tablet/desktop breakpoints, as well as iOS app.

From the user tests, I learned that I had to:

Expose pickup toggle outside Filter panel on Product Array to increase discoverability.
Allow for easy change between ship and pickup option on Bag.
Display when item is not available for pickup on Bag without needing extra action by the user.

Wireframes for iOS app on Product Array, Bag, and 'Choose a Store' panel.

Prototype Testing

I created high-fidelity prototypes for user testing. The design for the Product Detail Page (PDP) was the area that received the most feedback:

It was not intuitive to everyone that the store name was tappable, and that tapping it allows them to change their store or find nearby stores that has in-stock availability.
Some people still tried to tap on the Pickup radio button even though the text was grayed out and the message said 'not available'.

In response to the feedback on the original design, for the first iteration:

I changed the styling for the store name: from Bold treatment to an Underline Treatment to make it clearer that it is tappable.
I added a diagonal line to the disabled pickup button to increase visibility that the button is disabled.
Added nearby stores availability message for customers to decrease disappointment for customers when an item is not available for pickup, and encourage them to tap on the store name to change their pickup store.

After testing this first iteration, I noticed:

People understood that the store name is tappable to check on the store information and change their store.
People were tapping on the message area as opposed to the Store Name to see the list of nearby stores.

For the second iteration:

I changed the styling of the nearby availability message, and made the number of stores tappable.

PDP first design and subsequent iterations on iOS app after Prototype Testing

The MVP and MMP Release Strategy

In order to meet our Aug 16 deadline, the team decided to launch our product in 2 phases. The first one, also known as MVP (Minimum Viable Product) was released to 8 pilot stores with core features. This would allow the digital team to test the product with early adopters and beta testers, and for store teams to do a soft-launch and train their store associates.

A month after the MVP launch, we released our second phase, also known as the MMP (Minimum Marketable Product). It included bug fixes and all the 'Must-Have' features identified by the Product Team. This was released to all customers and made available to all stores just before the Holiday season.

I listed all the detail scenarios and edge cases in a spreadsheet, and organized them in Phases. This allowed project stakeholders to stay informed and referred as needed.

Final Designs

Core MVP Features

Product Detail Screen: Display Pick Up In Store option.

Product Detail Screen: Display nearest availability message when item is not available for pickup.

Choose a Store Screen: Ability to select pickup store using geolocation or manual search, and check inventory for select item across all stores.

Bag Screen: Ability to combine shipping with in-store pickup items in one order.

Checkout Screen: Ability to add an alternate pickup person to the order.

Email Notifications: Notify customers when their order is confirmed, ready for pickup, item has been picked up or cancelled.

Added MMP Features

Product Array Screen: Display ON/OFF toggle to filter by in-store pickup.

Checkout Screen: Ability to opt-in for text updates during checkout.

Text Alerts: Ability to receive text messages when order is confirmed, ready for pickup, picked up or cancelled.

Results and Next Steps

Initial Results

The MVP was released on August 16, 2021. The pilot stores reported an increased in store traffic and impulse buys from pickup orders, as well as an increase in revenue by store.
On September 13, 2021, an additional feature was released to early adopters and beta testers. Customers were now able to filter by items available for pickup in all Product Arrays. We also expanded the BOPIS feature to 9 additional store locations. As a result: conversion increased 2.6x, revenue increased 3.7x, and purchased units increased 4x.
On October 18, 2021, the text alerts functionality was enabled. This marked the official release of our MMP to all store locations. As a result: conversion increased 4x, revenue increased 2x, and purchased units increased 2x.

Next Steps

Implement Ship to Store: BOPIS inventory is very limited on the site. A Ship to Store feature will allow online products to be shipped to a nearby store and increase stock availability for pickup.
Implement Curbside: the majority of our competitors offer Curbside pickup. This could be developed after Ship to Store functionality is implemented.

Pickup counter at an OFF 5TH Florida store.

Designing the Buy Online, Pick Up In Store Experience at Saks OFF 5TH

Other Projects