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

William Prater

0

Web Developer

UI Designer

Shopify Developer

Shopify

Background:

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.

Scope & Objectives:

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 Problem

Analysis of the existing cart interface revealed several usability and design issues:
- 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.

The Solution

Based on the identified issues, we implemented the following enhancements:
- 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.

Information Architecture

The redesigned cart drawer was structured to optimize user flow:
- 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.

Value of the Project

For Users:
- 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.
For the Business:
- 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.

Customer Experience Design:

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.

Conclusion:

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.
Like this project
0

Posted Feb 3, 2025

Optimized cart UI with clearer costs, better navigation, and a free shipping progress bar—boosting CVR by 9.92% and RPV by 9.55%, adding $42K in revenue.

Likes

0

Views

0

Tags

Web Developer

UI Designer

Shopify Developer

Shopify

Collection Page UX Design Improvements Leads to $18k New Yearly
Collection Page UX Design Improvements Leads to $18k New Yearly
PDP Improvements Lead to an Additional $40k in Yearly Revenue
PDP Improvements Lead to an Additional $40k in Yearly Revenue