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.
- 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)
- 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
- I want my products faster (I don't want to wait for shipping)
- I want shopping to be more convenient (I don't want to mill around the store finding things)
- I want to be efficient in my day because I'm busy
- Increase conversion
- Increase foot traffic to stores
- Increase client interaction with in-store Beauty Advisors and Cast Members
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. "
We had 2 major constraints:
We wanted to create an experience that did not overburden the store Cast Members and Beauty Advisors, but blended seamlessly with their current workload.
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.
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:
- Differentiation - Ensure the experience is intuitive yet distinctly different from the rest of the Sephora iOS shopping experience to prevent confusion
- 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
- 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
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.
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
How Research Impacted Design
What did we learn?
- Messaging and copy strategy is king. Succinct messaging throughout the flow of which store's inventory the user was shopping was necessary.
- Participants didn't understand why some items were available for pickup in store while some were not.
- 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?
- 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.
- We reduced the complexity of messaging by only showing available items instead of both available and unavailable items.
- 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.
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.
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.
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.
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.
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.