Case Study
Every checkout is unique: E-commerce checkout UX
Create one-page checkout experience to improve conversion rates
My role
UX design
UI design
My team
Leo M., PM
Jason L., Developer
Time
2 weeks
Tools
Figma
Adobe suite
Google analytics
E-commerce checkout is where the money is at. The following presentation shows how I designed a Checkout UX in 10 days to improve the sales and conversion rate for a responsive website - Ainidoll.com. Click "+" on each day to view my design process and details from scratch to final delivery.
Challenges:
There are four major challenges to the current checkout process.
The checkout abandonment rate is over 75%.
Customers take a long time to finish order after entering the checkout funnel.
The current paid Checkout template can't match the style and didn't work with Paypal well.
Customers concern about the payment security of the website.
Let’s get started:
Day 1: Kick-off Meeting
What are the project goals?
- Solve the current problems in checkout performance.
- Enhance customers' shopping motivations.
- Reduce the number of clicks in the checkout process.
- Emphasize the legitimacy, security, and privacy of the payment process.
"I want to optimize the checkout process; the customer can purchase our products more easily. So the conversion rate will increase." From the PM.
Who is the customer?
The customers are youthful (45% are 25-46 years of age); 75% male and 25% female. The majority of customers (75%) live in the US and Canada. Regarding payment, 65% of customers pay through mobiles and 30% through desktops.
What is the timeline?
10 business days.
What is the project scope?
The focus was litmited to optimizing the checkout process and improving the UI of the checkout pages. The final deliverables included hi-fi design (Zeplin files), design assets, and new screen flow. The shopping cart page and log-in/sign-up page are not part of this project.
Day 2: Metrics Analysis
I analyzed the checkout page, in which only 21% of the traffic proceeded to buy. If we could increase that to 40%, it would result in 4 more orders per day and an additional $20,00 per month—30% revenue growth.
Google Shopping Behavior Analysis: See Large View
"How do we get more people to go through our checkout flow and complete purchases? "
My Design Hypotheses:
I believe that the "One-page checkout" layout can accelerate the customers' checkout process, leading to improve the sales and conversion rates.
The Current checkout user flow: See Large View
Day 3: Brainstorm
I created three concepts of the "one-page" checkout layout： C1:Three-section Layout; C2: Classic Layout; C3: Compact Layout.
Day 4: Wireframes
After interviewing with stakeholders and conducting a heuristic analysis of the current pages, I created the low-fi wireframes based on C2: Classic Layout.
Desktop:
Mobile:
Day 5: Low-Fi & Prototyping
I created the clickable low-fi prototypes and had the team try them on Figma, which resulted in positive feedback.
Desktop Version:
Mobile Version:
Day 6: User Testing
I conducted guerilla user testing with three participants, using the prototype on desktops and mobiles. All three felt the checkout flow is better than the old one, especially on mobile devices.
Day 7: Create Design Guide
Day 8: High-Fi & prototyping
I finished "One-Page" Checkout and confirmation Page.
See details on figma file.
Hi-Fi Prototyping
Desktop:
Mobile:
Day 9: Final Tweak & Checkup
Spacing checkup
4px grid check
Content and Spelling check up.
Day 10: Design Handoff
Screen Flow
Design Files Zeplin file.
Design Assests Zeplin file.
Results and Takeaways
The design received positive feedback and the average checkout duration reduced 25%. In retrospect, I might have started the design guide and created the component library earlierin order to generate consistent styling pages.