Julep Beauty
Checkout with Apple Pay
Consumer Product Design, E-Commerce, UX, UI, Mobile | Fall 2017
Julep is a beauty brand, selling skincare, cosmetics, and nail products. A majority of their business is done via e-commerce.
Julep’s e-commerce business was made of beauty and skincare consumers, typically value-oriented women in their late 20s to mid 40s. They shop primarily on mobile.
As Julep’s sole UX/UI designer, I led the design for this project, including research, wireframing, prototyping, and user testing. I worked alongside a copywriter and project manager, with direction and input from e-commerce and engineering stakeholders.
The Problem
We don’t support Apple Pay, but we’d like to.
Constraint: To enable Apple Pay, Apple requires that e-commerce sites allow a user to check out as a guest, without forcing account creation. However, technical constraints stop the Julep site from supporting guest checkout.
Project Goals
Incorporate Apple Pay into Julep’s checkout flow
Change the checkout flow slightly, to allow for a guest checkout option only when users are paying with Apple Pay
Encourage guest checkouts to create an account
Research
Competitor Research
Examined guest checkout flows on other e-commerce experiences, looking for cues and patterns shoppers may already be familiar with
User Metrics
Reviewed data on user devices. An overwhelming number of users shopped on an iPhone or iPad. Very few shopped on an Apple Pay compatible Mac
Conclusion
Current priority is to implement Apple Pay for mobile only
The Old Experience
The existing checkout experience consisted of two pages:
A cart page, where items can be added or removed, and gift cards and promo codes can be applied (see below)
A checkout page, where the user enters their billing and shipping info and submits their order
Julep’s old checkout mobile cart page. Users need to scroll to find Checkout button. (right)
The location of the checkout buttons — sandwiched between the subtotal and a selection of recommended products — was concerning. More than a few items in a cart would push the button off of screen view on most phones. The user would have to scroll to find it, and could easily scroll past it. Adding a new Apple Pay button to this same location didn’t feel very easily discoverable.
Proposed Solution
Checkout Flow
There would need to be multiple checkout paths:
Apple Pay checkout (on compatible mobile devices, for logged in account holders and guests)
Traditional checkout (on all other devices, for account holders only, users must log in or sign up)
Flowchart proposing new Apple Pay, guest checkout, and account creation paths (above)
Users are shown a new Apple Pay option on the cart page if their device is compatible. They can choose to pay with Apple Pay, or to proceed to the traditional checkout page.
To increase visibility of the checkout buttons, and help users discover Apple Pay as a new option, the buttons were moved to a sticky footer at the bottom of the screen. They always remain in view, for fast and easy checkout.
A business goal was to convert Apple Pay guest checkouts to returning users with accounts. To aid with this, the user is prompted to create a password for their account on the order confirmation screen after their Apple Pay transaction is completed. An email is also sent, enabling the user to create an account later.
Initial screens proposing new checkout button placement, Apple Pay inclusion, and guest account creation (left)
Stakeholder Feedback
Differing calls to action: promo and gift card codes are featured in the old layout, vs prominent checkout buttons in the new version (right)
A selection of stakeholders from the e-commerce team were concerned by the suggestion to move the checkout buttons.
Their previous placement was in proximity to the fields to enter promotional discount codes. Julep’s value-oriented customer base almost always makes use of a promo code during a transaction; one of customer service’s most frequent requests was to add a promo code to a customer’s order after they’d forgotten to do so themselves.
The e-commerce team worried that moving the checkout button away from the promo code field would cause users to forget to enter a promo code more frequently, and would create more work for customer service.
Revised Solution
Final checkout UI, featuring a sticky footer with two checkout buttons and an auto-scroll link for promo code input (right)
A link prompting users to enter a promo or gift card code was added to the sticky footer, beneath the checkout buttons. When clicked, it auto-scrolls the page up to the promo and gift card fields. I experimented with including the fields themselves within the footer, but it took too much vertical space on smaller devices.
The user now has an easy way to access the promo and gift card fields, as well as an ever-present reminder to make use of them.
The change to the footer was tested on internal colleagues from other teams.
After positive feedback, the project was approved. The new cart footer included two versions, for users with and without Apple Pay.
Alternative footer for devices without Apple Pay (above)