Saks Off 5th — Danielle Yoon

Buy Online Pick Up in Store for Saks OFF 5th users (2021)

Saks Off 5th - BOPIS

Saks OFF 5th is planning to launch a product/service called BOPIS, Buy Online and Pick Up in Store. Saks Fifth Avenue has already launched the BOPIS product, and it allowed OFF 5th design team to user test with users to enhance experience. I have separated user flows into Finding a Product, Checkout with Shipping Item Only, and Checkout with Shipping Item and BOPIS item. Since Saks OFF 5th has 3 products: Desktop, Mobile, APP, I collected 6 user testings from each flow, total 54 users tested in USA.

Role: Wireframe, User Research, Prototyping

My Role

Created 9 user test templates and tested with 54 users, and delivered user insights

Built wireframe and ideas for product array, product detail page, and choose a store locator

Work closely with engineers to check tech feasibility and implement

Target User

Saks OFF Fifth customers who live near the retail stores located in the North America. Saks OFF Fifth retail stores are well distributed across the country over 100 in North America. Our users can easily approach to the retail stores.

The Goal

To offer a great frictionless customer experience on our digital platforms.

The Problem

Business problem: Because of COVID-19, the retail store foot traffic keeps dropping.

User problem: Users want to receive items today, but don’t want to shop in-store at the same time.

How might we engage customers more to the offline store and unify omni-channel presence?

Process

After I submitted the wireframe designs, Hudson’s Bay Company had big organization change. From the change, I got placed to the Canadian team, The Bay.

User Testing: Product Array

After user clicks the pick up filter on Product Array, user assumes products are available in all sizes on Product Array for BOPIS.

12 out of 12 users

Proposed Wireframe: Product Array

Once user clicks on the filter, it indicates how many items are available for pick up, and also product array page will be reorganized to have only BOPIS items.

Proposed Wireframe: Product Array (Mobile)

Accessibility: Filter tab is hidden. Screen Reader cannot detect the feature.

Simply toggle on and off button for pick up. Once user scrolls down, it’s hidden so that users don’t get disturbed by tapping accidentally.

Final design: Product Array (Mobile)

To keep consistency of the visual design, Pick Up at BROOKLYN has been repositioned to the left alignment.

User Testing: Choose a store locator

“Not Available” tag is not noticeable.

4 out of 13 users

Proposed Wireframe: Choose a store locator

Changing the colors of “Not Available” and “In Stock”, it clearly indicates item is either available or not. Red indicates negative and warning, and green indicates positive, or plus.