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

  1. Increases cart to purchase rate

  2. Decrease in abandoned carts

  3. 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.



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

  1. 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.

  2. 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.  

  3. 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.

  4. 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.

  5. 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

error improvement.jpg



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

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.