I designed the 2016/2017 updates to Sephora's checkout, including the integration of Apple Pay into mobile web and Sephora's native iOS app. My role included designing the interactions, information architecture and user flow of the experience; as well as running a research study to validate hypotheses and test usability.
Design Execution & Communication
I designed across three platforms - desktop, mobile web, and native iOS - and partnered with 3 product managers to translate the designs to the context of each platform. I created sketches, user flows, wireframes, and prototypes to communicate the design and get buy-in from team members and leadership. The tools I used were Sketch, inVision, and Omnigraffle.
Research & Customer Insights
I partnered with a researcher to design and execute usability studies to test our hypotheses and validate our design. I analyzed research results to make product recommendations and communicated findings to my team and leadership. I implemented design changes based on user feedback from research.
We had 2 major challenges:
We were tasked with creating a framework for 3rd party payments that was scalable - something that didn't need to be rebuilt when additional payment options were inevitably added in the future. Our challenge was to build something with durability and longevity in mind.
We were working with a legacy checkout model that did not include guest checkout, and we did not have the scope to build this capability as a part of this project. Due to legal requirements with Apple Pay, the ways we could surface the experience were significantly constrained without guest checkout capability. Seamlessly adding Apple Pay into the checkout flow without adding guest checkout was one of our major challenges.
- increase new client conversion
- increase acquisition and retention of new clients
- lay foundation for future payment technologies
- increase the speed & ease of my checkout process
- don't make me learn something new
- reduce the number of annoying tasks (like entering form fields) I have to do!
"I'm a returning client to Sephora. Make it even easier for me to replenish my go-to products or buy something new. I have an iPhone and Apple Pay already has all of my information saved."
"I'm a new client to Sephora. Make a good impression on me by making it easy for me to checkout!"
Give me one thing to do at a time.
User testers didn't want to be distracted by multiple actions calling their attention per page. If it was necessary to have multiple actions, we learned it was important to clearly communicate through our designs which actions were primary and which secondary.
Show me the information when it's relevant to me.
Similar idea to number one - we learned not to bombard our users with too much information at one time, especially if the information was not immediately relevant. Displaying content as it became relevant and hiding it until that point became a guiding design principle.
Don't show me a lot of forms or make me do things twice!
This almost goes without saying, but it was helpful to have research to back this up with our stakeholders. Limiting form entry as much as possible or improving the perception of speed by reducing the height and length of forms visually vastly improved how efficiently clients were able to complete the checkout flow.
After working with a UI designer on the team, we finalized the experience. There were many different variations of the flow and below are a few examples of the final product for the iOS app.
The Process of Getting There
Because of time pressure, sketching became more important than ever. I sketched multiple ideas for each experience requirement - and only digitized the best solutions.
I was responsible for wireframes for all flows across desktop, mobile web, and iOS app. This included all main flows plus minority use cases, error handling, and other variations. Below are an example of the wireframes delivered on this project for the iOS platform.
Rapid Prototyping & User Testing
With a combination of a remote tester panel on UserZoom and InVision prototypes, I built and deployed several different iterations of the test every day for about a week - rapidly iterating as feedback from users and stakeholders rolled in. The below are videos of my iOS and Mobile Web wireframe prototypes - each with about 7 different use cases catering to the following questions: is she a new user? is she an existing user? is she 'recognized' on the site? does she have Apple Pay enabled on her phone? has she used PayPal in the past? does she have Touch ID enabled for sign in?
What I Learned
Whenever you touch checkout, you're bringing the whole company to the table
I've never been more up close with terms & conditions and legal constraints than I was while working on this project.
Artifacts are important for alignment
Being lean or agile is cool, and frequently useful. However, foregoing documentation in the name of speed can bite you in the butt. Sometimes hunkering down and making sure you have artifacts to show your work are really helpful when you are working with a large, oftentimes dispersed team. While not super sexy, user flows are incredibly useful in keeping everyone on track.
Users don't really care, as long as it works
Our client wasn't looking for the snazziest checkout experience - in fact, she probably wanted to have the least amount of interaction with the flow we created as possible. It was important for me to remember this during the design process.
The addition of alternative payment types Apple Pay and PayPal have already increased incremental revenue for clients looking for efficiency and are slated to continue to grow the business.