Fabletics, FabKids’s sister brand, gained over 30% on order conversion with the improved checkout flow. We applied their learnings to our checkout flow and did an A/B test by merging the flow from 3 pages to 2 pages.
During the phase 1 test, the new customer checkout flow lost to control; with careful evaluation and UI improvement, the phase 2 new customer checkout re-test succeeded in gaining 5.2% on order conversion and 14.8% on new customer conversion.
The Big Picture
Fabletics, FabKids’s sister brand gained over 30% on order conversion with the improved checkout flow, by merging 3-page checkout to 2-page checkout.
Success Metrics
Increases cart to purchase rate
Decrease in abandoned carts
Increase in usability benchmark
Design Challenge
Redesigned the flow for new customers and existing VIP members to boost their engagement and completion of the checkout process.
Product Goal
Get users to flow through & complete the checkout process. See an increase in cart to purchase and decrease in cart abandonment.
•••
Part 1 - Checkout A/B Test
Current vs Proposed
From a visual perspective, the information and form fields from the original design were cramped into a tight space leading a difficult filling experience and more error prone. We believe by minimizing steps, standardizing the input fields, organizing the hierarchy of information and decluttering the overall space; the improved flow would help customers to flow through checkout easily and complete transaction.
Key Changes
1. Minimize Steps
2. Clear Sections
3. Re-organize the hierarchy of information
4. Simplify Data Entry
5. Standardize input fields
6. Decluttering
One of the Main Improvements
Reorganize payment fields order to align with how user naturally sort and input information. selection box and standardize form fields.
Result
We ran the test for 22 days on both new customer (LEAD) and existing customer (VIP) segments, resulting a positive order conversion for the VIP variant, while LEAD test was performing worse than before (control). We rolled back the test and investigated into the contributing factors through observing behavior and analyzing data.
•••
Part 2 - Compare Data
We were not comparing apple to apple
As we compare cart to order funnel drop-offs from MixPanel to Google analytics, we found out the test was set up to track from page 2 to purchase while control was set up to track from page 1 to purchase.
Muddy data due to a reverted development bug
We identified through Clicktale user session recordings that users were going from variant into control upon page refresh. Through investigation, we found that a development bug fix was reverted which caused LEAD user test group participation to be switched to the other test and exit the LEAD Checkout test when they refreshed the page.
Validation errors as a major roadblock to billing verification
Through Clicktale VIP flow analysis, we identified a majority of visitors who accepted address validation but did not match with the credit card billing address.
New cart behavior
Nearly 1 in 2 continuing visitors (47%) remove an item from the cart at least once. Users use the cart to sort through styles/colors prior to their final purchase decision.
Unclear payment error messaging
58% of visitors who experienced payment error were unable to fix it and complete their order, ultimately leading to cart abandonment.
Action: Error Flow Optimization
•••
Part 3 - Checkout Re-test
Given the new data that we collected, we were set out to do a checkout retest with new sets of design approach and solutions.
Key Updates
Revert to 3 steps Checkout for LEADS
Shorter Product Tiles
List cart items by category/similarity
Successful Validation
Combine Billing with Payment
Clear directions on how to resolve errors
Expandable Basket & Order Summary below call-to-action
Emphasis on SSL logo, written statement & security code
Key Screens for Checkout Re-Test
Positive Impact
With careful observation and re-evaluation, the new customer (LEAD) checkout re-test succeeded in gaining 5.2% on order conversion and 14.8% on new customer conversion.
Major Takeaways
Through the design process, and how we measure our success, I learned that we should not assume what works for the other business, even if we share the same business model, would amount to the same impact. It is also an important step to test assumption and validate it the users.