Cart Drawer UX/UI Improvement Leads to a 9% Increase in CVR & RP

This case study centers on an A/B testing initiative for an eCommerce website's shopping cart interface. The initiative aimed to refine the cart's user interface (UI) to boost user satisfaction and conversion rates. The focus was on making the cart more intuitive, transparent, and easier to navigate.

The primary objectives were to improve the overall legibility of the cart, enhance the visibility of key elements such as the 'Remove' button and the total cost breakdown, and introduce motivational elements like a progress bar for free shipping. The end goal was to increase both the revenue per visitor (RPV) and the conversion rate (CVR), ultimately raising the estimated annual revenue.

- The shipping progress was not clearly indicated, which could demotivate additional purchases.

- The item quantity selector and remove button were too close, leading to frequent accidental removals.

- The font size and style reduced readability, particularly on mobile devices.

- Shipping costs were only revealed at the final checkout stage, causing last-minute cart abandonment.

- Visual Shipping Progress Bar: Introduced a clear, visual indicator of how much more needed to be spent to achieve free shipping.

- Improved Element Visibility: Redesigned the quantity selector and distanced the 'Remove' button to minimize accidental removals.

- Enhanced Legibility: Used bolder and tighter text to improve readability and facilitate the purchase decision.

- Transparent Cost Display: Included shipping costs directly in the cart to provide a complete cost picture upfront, encouraging users to proceed to checkout.

- A conspicuous progress bar at the top encourages additional purchases by showing how close the user is to obtaining free shipping.

- Redesigned layout to spatially separate the quantity selector from the removal button, decreasing user errors.

- Clear, bold fonts enhance readability, making the interface user-friendly across devices.

- Immediate visibility of the total cost, including shipping, directly in the cart summary before checkout.

- Enhanced visibility of free shipping thresholds motivates more purchases.

- Clearer separation of functional buttons reduces frustration from accidental deletions.

- Earlier visibility of total costs, including shipping, improves transparency and trust.

- Notable increases in RPV (+9.55%) and CVR (+9.92%).

- An estimated increase in annual revenue by $42,036, affirming the financial benefit of these UI enhancements.

The UI was redesigned to emphasize clarity and ease of use. The use of a bold typeface and a clearer division of interface elements ensures users can easily navigate their cart without confusion. The introduction of a dynamic progress bar for free shipping not only aligns with the brand's engaging style but also serves as a persuasive tool for increasing the cart size.

The A/B test for the cart drawer UI proved to be a substantial success, demonstrating that small, user-focused changes can significantly impact business outcomes. The redesign led to a better user experience, evidenced by increased conversion rates and revenue, highlighting the importance of continuous UI evaluation and optimization in eCommerce environments. This case study underscores the value of aligning design improvements closely with user needs and business goals.