UX/UI DESIGN
ACCESSIBILITY DESIGN
ECOMM
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.
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
MEET THE PRIMARY AUDIENCE
the taylors
Age
30-38yrs
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
RESEARCH RESOURCES
I researched Baymard Institute's cart and checkout usability studies. Articles like The Current State of Checkout UX and Cart & Checkout Usability Research provided me with key insights for cart and checkout best practices.
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.
USER FLOW
MOBILE 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. To view the mobile experience, press the play button on the video demo.
VIDEO DEMO
UI COMPONENTS
FINAL DESIGNS