Image of a woman paying for an online order with her credit card on her laptop.
UX/UI DESIGN

providing

an efficient

way to PAY

MY ROLE

UX/UI Designer

CLIENT

Sleep Number

 
OVERVIEW

Over the years, portions of the Sleep Number website had been updated, but the cart and checkout had remained untouched. This meant that the purchase experience had become disconnected from the rest of the site's branding and was riddled with usability issues. Due to these issues, the cart and checkout were causing a high abandonment rate, so the UX team was tasked to redesign the end-to-end purchase experience.

Image of the redesigned cart page.

CART REDESIGN

1 / 4

 
CHALLENGE

The existing experience was clunky, was missing several key features, and was not mobile-optimized. Shoppers found the experience confusing, and customer service was inundated with requests for order placement assistance. This meant that the redesign needed to deliver a new cart and checkout that was seamless, informative, and mobile optimized. This insight helped us to define the project's success metrics -

1

Effectively increase conversion rate

3

Reduce the time to complete checkout

2

Reduce rate for cart abandonment

4

Encompass the brand’s current digital identity 

Image of a couple that represent the primary audience for the main customers.

MEET THE PRIMARY AUDIENCE

the taylors

Age 
35-42yrs

Earns

$140 -160k

Married
w/ 1 kid

MOTIVATIONS

They prefer to use natural health solutions to improve their lives but embrace new technology that can better their family's health.

CORE NEEDS

Ensuring a healthy lifestyle is key to them, and above all, they prioritize quality family time.

PAIN POINTS

With their busy schedules, it's hard to research devices that will help improve their lives, and there are too many options to choose from.

 
APPROACH

I began the project by gaining a thorough understanding of the existing cart and checkout process. After becoming well versed in the complexity of the existing experience, I conducted a competitor analysis and researched Baymard Institute's checkout usability studies. Research insights informed the user flows, wireframes, and final designs.

RESEARCH METHODS

Competitor

Analysis

eCom Best

Practices

Persona

Development

Information

Architecture

User

Journey

Prototype

Testing

Image of Baymard Institute's Cart and Checkout UX article.

RESEARCH RESOURCES

I researched Baymard Institute's cart and checkout usability studies. Articles like The Current State of Checkout UX and Cart & Checkout UX provided me with key insights for cart and checkout best practices.

Image of 3 website screenshots of the competitor set I created.

COMPETITOR ANALYSIS

To understand what experiences competitors were using, I analyzed 3 key brands: Reverie, Eight Sleep, and ReST. This analysis allowed the team to see which features were common amongst the competitors' cart and checkout.

Image of the resdesigned cart and checkout user flow.

USER FLOW

MOBILE WIREFRAMES

Image of the redesigned cart and checkout wireframes.
 
RESULTS

Once the research and design phases were complete, we began the development phase. Together, the team and I rebuilt the entire cart and checkout experience. We simplified and created an informative experience that includes all essential features. The redesign is also mobile-optimized and is designed to scale to accommodate future features quickly. Within 2 months of launching, the new experience yielded positive results.

17%

DECREASE IN CART
ABANDONMENT

12%

INCREASE IN
CONVERSION RATE

36%

DECREASE IN CALLS
TO CUSTOMER SERVICE

EMBRACING MOBILE FIRST

Prior, the team had not fully embraced a mobile first design approach but committed to it for this project. To align with mobile first best practices, we focused on the mobile layouts and then scaled those designs to fit larger device sizes.

Image of mobile comp for the redesigned cart.

UI COMPONENTS

Image of the redesigned the cart and checkout's user interface components library.

FINAL DESIGNS

Image of final design comps for cart and checkout sign in.
Image of final design comps for checkout's shipping, delivery, and payment steps.
Image of final design comps for checkout's review order, order confirmation, and account created page.