JAMBERRY CHECKOUT REDESIGN

Reducing friction in the checkout flow in order to increase conversion.

 

Overview

Jamberry is a beauty startup that made its name selling nail wraps — heat-activated vinyl adhesives that you apply to your nails to add a fun flair to your look. As a UX designer at Jamberry, I was responsible for the e-comm experience on Jamberry.com (no longer live).

ROLE

Senior UI/UX Designer (lead designer)

TEAM MEMBERS

Product manager, Frontend web engineer

PRODUCT GOAL

Increase conversion

RESPONSIBILITIES

UI/UX design, QA

 

Challenge

Before I joined the team, Jamberry’s priority had been their physical product, nail wraps, which meant that the website had been neglected.

I noticed immediately that one of the main points of friction on the site was its checkout flow. It was cluttered, confusing (although, it did have a progress bar 👍) and generally clunky in design. And at Jamberry, checkout wasn’t just your standard merchandise purchase. There were 4 different flows that functioned separately and uniquely across the site, depending on where you were. Users found this extremely confusing and customer support was constantly inundated with questions about checkout.

ORIGINAL CHECKOUT FLOWS

project_jamberry_checkout_original-join.jpg
project_jamberry_checkout_original-cbs.jpg
project_jamberry_checkout_original-stylebox.jpg
project_jamberry_checkout_original-checkout.jpg
 

Process

Redesigning the checkout flow is no small project for an ecommerce business, so we started slowly and worked out the details one-by-one.

I pored over competitor examples, best practices, GA data from our current checkout, and different user flows, going back-and-forth with our team of engineers to discuss functionality and feasibility for each of our specific scenarios. We outlined two main goals: Standardize all ‘checkout’ flows + Reduce friction and confusion

INITIAL WIREFRAMES

 
 

Solution

Almost 80% of Jamberry users were viewing the site on their mobile devices, so once we determined the best flow for each of the different ‘checkout’ experiences, we needed to make absolutely certain that they would be optimized for mobile. This meant cleaner code, faster loading times, more efficient forms and a smarter layout.

ONE PAGE LAYOUT

Consolidating the full checkout flow to one page (and one template across all permutations of the flow) meant less friction for our users between ‘Add to Cart’ and ‘Place Order’.

REUSABLE COMPONENTS

Creating components that can be reused throughout the site increased consistency, efficiency and made for a cleaner experience, both for our users and engineers.

STORED USER DATA

We hadn’t been saving user data (like payments or addresses) for future purchases, so storing this data allowed existing users to bypass these steps and checkout much more efficiently.

 
 

Results

+3X conversions

We implemented the new flows one-by-one, starting with Consultant Enrollment (Join), which showed a huge jump in conversions in the first 3 months. Because of business priorities, the other flows weren’t implemented before I left the company. Based on the outcome of the Join flow and knowing what I do about the friction in the other checkout flows, I’m confident that we would’ve seen an equal increase there.

 

CREATED USING

Sketch

InVision

Zeplin

Google Analytics

Jamberry users