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%.
The original design was done back in 2013. Most features were from default Magento settings and failed to provide a friendly checkout experience.
Relative low checkout rate
We estimated our mobile users would surpass desktop users in 9 month, however the mobile site checkout rate is only half of desktop checkout rate.
Customer retation
About 80% of our users are first time users which means our customer retation rate is low. We'd like to build a healthier customer base and reward our SEO effort and onlind AD spent.
"The goal is to create a concise checkout flow that builds trust between customers and the business."
Customer Insights
About our customers
18 - 40 years old with moderate and above online shopping experience.
65% male, less price sensitive. Focusing on product legetimation and service.
35% female, focus on price, safety and overall value.
Key Insights
Efficiency
As a customer, I don't like to fill out too many forms and make commitments early.
As a customer, I want to make sure my information is correct and be able to amend easily.
As a customer, I don't like to switch key pad and click on wrong form fields all the time.
Confidence
As a customer, I want to make sure I will be charged correctly.
As a customer, I'd like to know when I'll receive my items.
As a customer, I want to make sure I can get a refund when something goes wrong.
Solutions
1. Optimize content
The first step was to reduce cognitive load. We removed all unnecessary elements and identified confusing contents.
Before - low usage buttons & text input
After - buttons removed
Iteration - better information alignment
Before - overloaded info requests
After - reducing info requests
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.
Before - 6 mandatory steps
After - 4 mandatory steps
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.
Having filled information and order summary always on screen to help final decision making. Added animations between steps for reading guidance.
Before - no context provided
After - context provided
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.
Before - help on a new / separate page
After - help always available in footer
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.