INTEGRATING POPULAR PAYMENT METHODS INTO THE SEPHORA'S CHECKOUT
_Redesign the checkout flow for Sephora's native iOS app, mobile web app, and desktop website to increase the speed and ease of the checkout process and to integrate popular payment methods
_Implement style guide for visual consistency and adaptability for future payment technologies across other platforms
_Incorporate Paypal and Apple Pay and adhere to their individual brand constraints
_Increase customer acquisition, retention, and sales conversion
_2017 Webby Award for Best Shopping App
_Fast Company's Innovation By Design Award 2017
Following the redesign of Sephora's native iOS app, the company continued to see an increase in its online sales. In 2016, Sephora hit $1 billion in digital sales. It soon became apparent that technical updates to our checkout process were necessary as the use of alternative payment services, namely PayPal and Apple Pay, increased. User and market research proved Apple Pay and PayPal as the top payment methods used by our demographic. We recognized an opportunity to cater to and offer our clients their preferred payment types while checking out of Sephora.
Seamlessly incorporating two new payment methods into our existing checkout processes was our main challenge. We were also tasked with laying the foundation and designing a scalable model that can easily adapt to the addition of future payment technologies. Partnering with a user researcher, 3 product managers, a team of developers, and an information architect, we designed solutions across 3 platforms - iOS, mobile web, and desktop - which integrated Apple Pay and PayPal into the iOS app's checkout flow.
Using Sketch, Adobe After Effects, and InVision, I sketched, created flows, wireframes, and prototypes, and designed interactions, animations, and UI elements for all use cases to communicate design solutions to team members and executive stakeholders. Consequently, the integration of Apple Pay and PayPal improved check out efficiency and follow-through for our clients, continuing to increase our digital sales revenue.
"I'm a returning Sephora customer. Help me quickly repurchase my go-to's or buy something new. My Apple Pay [or PayPal] already has all my info saved."
"I'm a new Sephora customer. Help me easily discover and buy products with a seamless, hassle-free checkout."
In collaboration with the UX and user research team, we interviewed current and prospective Sephora shoppers to gage their demands for and behavior with checking out. Below are some of our main findings:
1 - "I can't stand long forms or doing something more than once!"
Our clients were delighted when we eliminated long form entries and utilized autofill when possible, allowing them to efficiently complete their checkout. We found that through visual design, we can alter our clients' perception of speed by shrinking the height and length of forms and visually indicating their progress.
2 - "One step at a time, please."
Cluttered checkout screens with multiple sections and distracting features stressed our clients out. We learned that our clients prefer simple flows that gradually progress them through checkout, one step at a time. For design, information hierarchy was key in communicating what actions are primary and secondary.
3 - "Show me what I need, when I need it."
We also learned that our clients don't like being overloaded with irrelevant information, as it made them unsure of what to do next. Contextual UI, or hiding and revealing content as it becomes relevant, was a key design principle used for streamlining the user flows and visual design.
Designing for alternative payments in checkout soon proved to be a matter of answering questions specific to our use cases, such as "Is our client a new customer or returning? Is our client 'recognized' on the site/app? Is there any information we can grab from the cache? Is Apple Pay enabled on her phone? What about Touch ID for signing in? Does our client already have a Paypal account?"
With a set of brand constraints from Apple Pay and Paypal, we first sketched and made wireframes for possible solutions and use cases. These were then converted into high fidelity prototypes, user tested remotely and in-person, reiterated, then finally shipped. Below is a sample of a few flows and mockups across iOS, desktop, and mobile web.