Authentication redesign

Team

Kevin McNall | Senior DirectorJustin Lowery | Frontend Architect

Role

UX/UI Designer

Timeline

2 Months

Overview

Our previous sign-in/up process redirected users to a different page, disrupting their shopping experience. This occurred on product listing pages, detailed product pages, and during checkout. Recognizing this, I redesigned the system to let users sign in from any page without losing their place on the site. Now, customers can shop without interruption, and we've seen an increase in sign-ups since implementing this change.

Highlights

New sign in screens

Problem

Turning Obstacles into Opportunities

One of the main problems with old sign in / sign up experience is that users would constantly be pulled away from their current page to sign in, making them lose where they were.

Old vs New sign in experience

Analysis

Identifying the Problem

Our analytics showed that users were getting stuck on the login screen, leading to a high exit rate. This was especially prevalent on mobile devices, where 82% of our traffic comes from.

Users are getting stuck on the login screen

We've identified significant user friction during the cart sign-in process. The diagram reveals that customers are being repeatedly redirected to the login page, creating a frustrating experience.

Key

Cart

PDP

PLP

Home

Exit site

signin path methrics

Exit rate chart

Goal

Goals Beyond the Benchmark

Creating a seamless experience that doesn't interrupt the user has always been our priority. We aimed for users to sign in from anywhere without worrying about losing track of the product they were viewing.

Increase sign-ups by 20% within 3 months

Decrease exit rate by 10% within 2 months

Increase user satisfaction by 15% within 3 months

User Flow

Sign up / In Journey

Signin flow

Signup flow

Entering checkout flow

Usability

Easily reachable

Mobile devices drive 81% of Rackroom's traffic, making thumb-friendly button placement essential. Our sign-in and registration interface needs to prioritize comfortable thumb zones, with prominent touch targets and a streamlined authentication flow that feels natural on smartphones.

Mobile Accessibility

The new sign in / up experience needed to be optimized for mobile. I made sure that the new design was accessible and easy to use on a mobile device.

The use of a bottom drawer allows the user to have context of where they are.

Inputs and buttons placed in optimal thumb position.

This modal pattern allows users to sign in anywhere on the site without losing their place.

Testing

Learning from the Users

Auth iteration

Results

Validating improvements

Loyalty Enrollemt

New loyalty enrollment over the last 3 years

Loyalty shoppers

Percentage of loyalty shoppers over the last 3 years

More Work

Effortless checkout

Rackroom Shoes

Sass marketing site

tru Strength Relization

Dress Code Design System

Rackroom Shoes

America's best ghost tour

Witch City Walking Tours