SNEAKERHEAD CHECKOUT REDESIGN

Role: All UX/UI Design & Prototyping

Background

Sneakerhead.com is an e-commerce website specialized in brand name sneakers, targeting both shoe collectors and casual shoppers. In mid 2017, I led the end to end design effort to shorten the lengthy process, display shopping context and provide immediate help to users. During user testing, we successfuly lower the average time spent by 20%.

Try this prototype

Business Problems and Goal

"The goal is to create a concise checkout flow that builds trust between customers and the business."

Customer Insights

About our customers

Key Insights

Solutions

1. Optimize content

The first step was to reduce cognitive load. We removed all unnecessary elements and identified confusing contents.

Sneakerhead Mobile Adding Context
Before - low usage buttons & text input
Sneakerhead Mobile Adding Context
After - buttons removed
Sneakerhead Mobile Adding Context
Iteration - better information alignment
Sneakerhead Mobile Adding Context
Before - overloaded info requests
Sneakerhead Mobile Adding Context
After - reducing info requests
Sneakerhead Mobile Adding Context
Iteration - checkout info only

2. Reorganize information architecture

Took out optional steps from main user flow, combined related information and rearrange checkout step order to optimize checkout process.

Sneakerhead
Sneakerhead Style Guide
Before - 6 mandatory steps
Sneakerhead Style Guide
After - 4 mandatory steps
Sneakerhead Style Guide
Iteration - 3 mandatory steps

3. Revamp UI elements

Cleaned up visual noise and designed a style guide from scratch to improve visual hierarchy, readability, accessibility, and consistency.

View full style guide
Sneakerhead Style Guide
Before - inconsistent UI, no hierarchy
Sneakerhead Style Guide
After - consistent UI
Sneakerhead Style Guide
After - clear hierarchy & background
Sneakerhead Style Guide
Sneakerhead style guide 1
Sneakerhead Style Guide
Sneakerhead style guide 2
Sneakerhead Style Guide
Sneakerhead style guide 3

4. Provide context

Having filled information and order summary always on screen to help final decision making. Added animations between steps for reading guidance.

Sneakerhead Mobile Adding Context
Before - no context provided
Sneakerhead Mobile Adding Context
After - context provided
Sneakerhead Mobile Adding Context
Iteration - improved layout & animation

5. Build trust

Built a in-page help system. Customer service number, shipping, and return information woould be available all time during checkout. No need to go to a separate page and break current shopping journey.

Sneakerhead Mobile Adding Context
Before - help on a new / separate page
Sneakerhead Mobile Adding Context
After - help always available in footer
Sneakerhead Mobile Adding Context
After - in-page help modal

Follow ups

This is the first user centric design at Sneakerhead. During prototype testing, customers finished the checkout process 20% faster in average and felt it's a more controllable, clear and easy to follow process overall. Although unfortunately, it's never had a chance to be in production and validated with real data, this is still a valuable design practice for the company and following designers.