Checkout Flow

Team

Kevin McNall | Senior DirectorJustin Lowery | Frontend ArchitectAgiet Tanyingu | Senior Frontend DeveloperJason Watkins | Frontend seo Developer

Role

UX/UI Designer

Timeline

6 Months

Overview

The goal of this project is to improve Rack Room's checkout flow by addressing key pain points, such as sign-in interruptions, autofill issues, and limited ability to review/edit information. We aim to streamline the process, reduce clicks, and enhance user satisfaction to increase conversions and lower cart abandonment. Transitioning from a multi-page application (MPA) to a single-page application (SPA) will provide a faster, more responsive, and seamless experience by loading only necessary content. SPAs improve speed, interactivity, and reduce friction, leading to a smoother checkout process and better user engagement.

Highlights

Improved address confirmation

Modular checkout blocks

Problem

Turning Obstacles into Opportunities

Rack Room’s checkout has a few issues that disrupt the user experience. Users are often asked to sign in mid-checkout, causing them to lose progress. The address type-ahead is frequently overridden by autofill, leading to mistakes, and customers can’t easily review or edit their info. These pain points make the process feel disjointed, increasing the risk of cart abandonment and making it harder for customers to complete their purchase.

Customer feedback

Key problem areas

Type-ahead dropdown is obstructing the ability to enter the address manually.

Dropdown is blocking the shipping options.

The dropdown gets over taken by autofill and then blocks the UI so you cant see what is happening.

Research

Learning from our users

We conducted user interviews, surveys, and usability tests to understand the pain points in the current checkout flow. We also analyzed the competition to identify best practices and opportunities for improvement.

Competitive analysis

Paint Points

Identifying key pain points

By systematically mapping user pain points based on my research and analyzing existing workflow inefficiencies, I identified critical areas for improvement that could streamline the purchasing experience and potentially increase conversion rates.

Distance between clicks is a reach and there are too many.

Some steps showed miss leading information until other data was entered.

Losing progress when navigating back a step

Current address capture is obstructed by autofill

Problem Statement

How can we create a single page checkout experience that easily defines the steps to checkout with the least amount of clicks and flexibility

User Flow

Mapping out edge cases

Our checkout has a lot of edge cases that need to be accounted for. We need to make sure that the user can easily navigate through the checkout process without any hiccups.

100%

Design

Final Designs

Mobile checkout screens

Desktop checkout screens

Place order screens

Testing

Always room for improvement

Iteration is the key to success im always looking for a way to make minor improvements. Over time these small chagnes make a huge impact to the overall user experience.

Address validation revision

Results

A year in review

We launch our new checkout experience on January 1st of 2024 here is what we learned over the past year

21%

Orders

12s

Avg duration

9%

Avg order value

15%

Bounce rate

11%

Conversion rate

35%

Issues reported

Checkout Funnel

2023 vs 2024 bounce rate

More Work

Seamless auth while shopping

Rackroom Shoes

Sass marketing site

tru Strength Relization

Dress Code Design System

Rackroom Shoes

America's best ghost tour

Witch City Walking Tours