Makiko Harris
UX Designer, Artist, Musician
Artboard.png

Sephora Omnichannel Buy Online Pickup In Store

One of Sephora's key competitive advantages is its huge store fleet with thousands of highly skilled Beauty Advisors, and customers are busier than ever; expecting convenience & service.

To supercharge this store advantage and also reach parity with the competition, the company decided to pilot a Buy Online Pick Up In Store feature in the iOS app.

Home

Home.png

Product

Ppage.png

Basket

Basket.png

Confirmation

Order Confirm.png

My Role

william-iven-19843.jpg

I was the UX designer for the Sephora Buy Online Pickup In Store project.  My role included designing the interactions, information architecture and user flow of the experience.

Our team:

  • 1 UX Designer (me)
  • 1 UI Designer
  • 2 Product Managers
  • 1 UX Copywriter 
  • Many tech partners
  • Vendor integration team
  • Business stakeholders (marketing, store operations, merchandising, logistics) 

My responsibilities:

  • Sketch, wireframe, and prototype the experience using Sketch and inVision
  • Create user flows in Omnigraffle 
  • Bring the above artifacts to meetings with the vendor & business stakeholders to align & get buy in

Goals

Business Goals

User/Client Goals 

  1. I want my products faster (I don't want to wait for shipping) 
  2. I want shopping to be more convenient (I don't want to mill around the store finding things) 
  3. I want to be efficient in my day because I'm busy  
  1. Increase conversion 
  2. Increase foot traffic to stores 
  3. Increase client interaction with in-store Beauty Advisors and Cast Members 

 


Our Client

tanja-heffner-155367.jpg

Busy, Efficiency-Oriented Client

"Sephora is my go-to store for makeup and hair products but I don't have a lot of time to shop. I need a fast and easy way to replenish my favorite items today. I don't want to have to remeber to allow time for shipping and I don't want to browse around a hectic store. "


Constraints

ion-sephora-9.jpg
DSC_8630.jpg

We had 2 major constraints: 

Omnichannel Logistics 

We wanted to create an experience that did not overburden the store Cast Members and Beauty Advisors, but blended seamlessly with their current workload.                                                                                                                                    

Tech Requirements  

Because we were tasked with launching a pilot with 6 stores prior to rolling out the feature to the entire fleet, we had some limitations to how we could build the feature from a technical perspective. We were required to use a vendor solution and partner with them on integrating it into the Sephora iOS app.  


Initial Concepts 

IMG_5251.JPG

I played around with many ideas, including: 

  • Tabbed navigation 
  • Modal vs paging 
  • Exposed search bar vs filtering
  • Segmented controls - Shop & Account 
  • Different placements for the basket, help, account, and stores 

 

Based on client's needs, the key design principles I kept in mind: 

  1. Differentiation - Ensure the experience is intuitive yet distinctly different from the rest of the Sephora iOS shopping experience to prevent confusion
  2. Wayfinding - Provide an ever-present but unobtrusive way of reminding the client that they are shopping the inventory of one particular store, not all inventory available at Sephora 
  3. Right amount of information - enough detail for a client new to the experience to have the confidence to buy, but no so much information that might result in information overload and reduced conversion 

User Research

I put together several prototypes and used UserZoom to write a screener, research script, and launch remote user testing. Below is a highlight reel of key learnings that we used to modify the design. Play around with the prototype here or watch the video highlight reel below. 

Research Description

UserZoom study with 13 participants that tried Buy Online Pickup In Store checkout on an InVision prototype

  • 10 women, 3 men
  • 6 existing, 7 new users

Buy Online Pickup In Store Prototype User Testing

How Research Impacted Design 

What did we learn? 

  1. Messaging and copy strategy is king. Succinct messaging throughout the flow of which store's inventory the user was shopping was necessary.
  2. Participants didn't understand why some items were available for pickup in store while some were not. 
  3. Users wanted flexibility and options, specifically when selecting samples at the end of the checkout flow. 

How did we change our design based on research?

  1. We decided to add the store name next to the basket, both of which were on an ever present sticky bar at the bottom of the page. 
  2. We reduced the complexity of messaging by only showing available items instead of both available and unavailable items. 
  3. We added messaging throughout the experience touting the benefits of buying online and picking up in store (free consultations and samples), and added categories to the sampling section to show more breadth of choice.

View complete research results here


System Map

After collaborating with the vendor, business stakeholders, and tech partners - this was the flow we landed on for the pilot of this project. While our user testing informed us that this flow was not the most optimal, due to technical constraints we determined this flow would be the best foot forward within the given constraints and would give us the opportunity to learn in the field how the experience performs. For the full rollout, the UX recommendation is to more closely integrate the vendor solution into Sephora's iOS checkout.

Screen Shot 2017-10-06 at 12.13.42 PM.png

Final Product

Due to the technical constraints of this project, we ended up designing an app-within-an-app experience. While we would have preferred to build a more integrated solution, we determined this approach would give us the learnings we would need to launch this to the entire store fleet next year. 

Watch below for an end-to-end purchase flow.


Learnings 

Projects are never done 

While this project is set to launch in a few weeks, there are so many optimizations and improvements to the flow that I'd like to make. This project is on the roadmap for the next several years to continue iterating and expanding. 

Scope creep can be good...? 

Initially this project was supposed to be a small pilot test. It turned into a design project that had the scope of basically designing an entire app from scratch. I had the opportunity individually to expand my skillset and really think about the entire app ecosystem as a whole due to the expanded scope of the project. 


Archive

Competitive Benchmarking 

Buy Online Pick Up In Store is not new among retailers - so it was important for us to understand the implementation of this feature across the industry. Macy's Nordstrom, and Walmart flows shown below. 

Wireframe Archive 

The design process included a lot of back and forth with our vendor team to see what was feasible within the package they had available. We worked hard to get the best flow possible within the constraints given. We landed on an app-within-an-app approach for this pilot.