A/B Testing Cart Pages to Reduce Cart Abandonment

With average cart abandonment rates in the 70-80% range, the shopping cart is a hot page to optimize through A/B testing.

But A/B testing ROI depends on testing the right things. Some features and design elements are “table stakes” — just do ‘em. Others really depend on your overall page context. This chapter explores common, high impact shopping cart page test ideas.

Must-have shopping cart page features

If you want to maximize your A/B testing productivity, it’s important to understand not everything must be tested before you update your site. Recall the must-have shopping cart features from Chapter 32. If you’re missing any of the following, go ahead and update your site to include them without testing.

  • Product thumbnail images that are large enough to understand which products they represent
  • All product details that are important to confirm before purchase like color, size, quantity, finish/material, et cetera
  • Quantity selected, prices and any sale prices or discounts
  • Editing tools (remove, update quantity, save for later)
  • Out-of-stock notice (if product is no longer available)
  • Cart subtotal and total
  • Estimated shipping and tax charges (it’s OK to say TBD in checkout)
  • Customer service telephone number
  • Links to customer service policies
  • Continue shopping button
  • Reasonably visible checkout button

Adding these elements will not lower conversion, and running experiments on them only pushes back the hypothetical testing. You want to keep A/B tests centered around changes that you’re not sure will improve usability or conversion rates.

If you’re making a large number of no-brainer changes to your existing template at once, you may want to run an A/B test simply to quantify how much money was left on the table with the previous design. But certainly don’t test these items one-by-one. They’re table stakes, there’s no excuse not to use them!

A/B testing ideas for shopping cart pages

Value propositions and special offers

Customers often comparison shop, dumping products into multiple carts to compare prices. It’s important to emphasize all the reasons why a customer should buy from your shop, even if you’re not the lowest price.

Inksell offers 100% satisfaction guarantee, shows off its A+ BBB rating, and boasts 100% privacy. But placing these value propositions in a top-aligned banner may reduce their visibility, as the human brain tends to focus on content in white space (the banner blindness effect).

inksell-cart

What if these propositions were placed in the line-of-sight of the checkout button instead?

inksell-cart-test

Because InkSell is already using value propositions, this test focuses on their placement and visibility. If your site doesn’t use any value propositions, testing with versus without is a good test to start with — even as an A/B/C test, with two placement variations in the experiment.

Shipping carrot

Cart “carrots” that shout out how far a customer is away from free shipping can increase average order values and conversion rates. Recall that 93% of online shoppers say they will buy more products if free shipping is offered.

But again, they must be conspicuous to be effective. Barnes and Noble’s top-aligned carrot may not be noticed.

bn-cart-carrot

Inline carrots, placed in the order summary, are far more likely to be noticed – especially when highlighted in a bold color like red, pink or orange.

colored-carrot

If you use a cart carrot that isn’t inline, or an inline carrot with black text, test against using a bright color within the order summary box.

Another shipping carrot test is to pit free shipping against another offer, like a free gift. Offering a promo or samples in lieu of free shipping may convert less, but may be more profitable, so if you’re running this test, make sure to measure more than just conversion rate.

special-offer-carrot-1

Pre-checkout shipping and tax calculator

According to ComScore, 37% of consumers have abandoned a cart because shipping and tax was presented too late in the checkout process. Pre-checkout shipping and tax calculators are presumed to mitigate this issue.

If you don’t currently offer a calculator and have the capability to build the feature with reasonable effort, this is a great test to prioritize.

If you do have a calculator, make sure it’s not drowned out by competing design elements. For example, iHerb’s “heavy duty bag” offer draws more attention than the more useful shipping calculator.

shipping-calc-test

A redesign removes the offer and moves the calculator closer to the order total box.

shipping-tool-test

Technically, this test changes two variables at once (if it wins, was it due to removing the offer or moving the calculator?) However, the hypothesis is “making the shipping calculator more noticeable will improve conversion.” Maximizing the visibility of the calculator requires making both changes, and this test will complete faster than testing a third design where the promo is removed, but the calculator remains to the far left.

In this particular example, if the test results are negligible, there’s a case for putting back the promo offer, as you’ve proven it not to be a distraction. If the redesign clearly “wins,” a further round of testing can be run to determine how best to present the promo offer, such as an inline upsell in the cart contents area, or near the coupon code field.

Calls to action

Since the late 90’s, a big, bold checkout button in a contrasting color, placed in the lower, right corner of the screen (but still above the fold) with secondary calls to action like “continue shopping” styled less prominently has been considered best practice.

Today, with multiple payment options (each with their own button) and responsive design considerations, this remains best practice — but fewer online shops adhere to it.

If your call to action buttons suffer from same-itis, your first task is to fix them.

poshmommy-test

Posh Mommy could easily boost the size of its checkout button and change its cart editing buttons to simple text links without testing (again, this is no-brainer stuff that’s unlikely to lower conversion). But running the experiment satisfies the curiosity as to how much this simple change contributes to revenue and conversion.

If your buttons vary in color or size, but not color and size, consider testing the combination of color and size, with checkout your primary, and most prominent, call to action.

competing-cart-buttons

For example, the above could be redesigned to look like the below:

cart-button-test

The following design offers several “express checkout options,” but you know what they say about the paradox of choice…

alt-payment-badges

Analytics can tell you which payment options are most frequently selected among those who initiate checkout. But could the cluster be causing abandonment?

This site could test the existing control (with all options) against only the most popular…

alt-payment-badges-test

…and a third version (within the same experiment) with only a single checkout button (PayPal and Visa Checkout presented at the Payment step of checkout).

alt-payment-badges-simple

Button size and shape can also affect conversion, because a button must be recognized as a button. The trend toward rectangular buttons rather than the rounded corner buttons of the last two decades may look slick, but longer buttons and buttons that span the width of the viewport on mobile devices look less clickable than their curved cousins.

A simple test for Tarte could be to shorten its checkout text to “Secure Checkout” from “Proceed to Secure Checkout.”

checkout-test-3

Without losing context of what the button does, this shrinks the rectangle and makes it look more like a conventional checkout button.

checkout-text-redesign

Unconventional button shapes can also confuse customers. Is the arrow a checkout button, or a header for PayPal and Amazon Checkout options?

arrow-cart-button

And if you do use Pay with Amazon, be sure to run a test without the button to make sure it’s a value proposition, rather than a call-to-abandon and purchase from Amazon instead!

Coupon code box

Coupon code boxes are another call-to-abandon, especially on desktop devices where Googling for discount codes is effortless.

When a customer finds a coupon through Google (versus obtaining one organically through an affiliate or your email list), you not only lose margin you’d otherwise have, but you also pay out an affiliate commission and muddy your campaign attribution data.

If like the example below, your cart calls extra attention to the coupon box, consider testing a more subtle presentation.

coupon-code-styling

In this example, the test version removes the yellow field blue button, replacing it with an off-to-the-side, white-on-white box with a simple text link.

promo-code-subtle-test

Make sure to measure revenue and profit with this type of test, it’s not just about conversion rate. A positive move in profit more than offsets even a dip in conversion rate in this case.

Security badge

Well-known companies are less likely to benefit from displaying security seals like Norton and McAfee because of the inherent trust in their brands. And on the flipside, lesser known companies that go overboard with point-of-action assurances can come off less trustworthy.

An ecommerce site really only needs one security badge. But a mistake I see over and over again is placing the badge in the wrong spot.

Don’t put your seal in the site header or footer navigation, nor should it be anywhere in the shopping cart that’s not proximal to the checkout button where customers feel the anxiety about proceeding (and are most likely to see it)!

norton-badge-1

In the example above, the Norton logo is easily overlooked. Below, a more flashy badge is placed next to the checkout buttons. This again is a no-brainer that doesn’t need to be tested, but running the test validates how important it is to place your trust seals where they count.

norton-badge-2

Another example:

security-seal-control

Moving the McAfee Secure badge next to the checkout buttons increases its chances of being noticed by a cautious customer.

security-seal-test

Testimonials

Few online shops use testimonials in the cart. But whether you do or don’t, it’s a worthy test to see if they help (build confidence) or hinder (visually distract).

In the example below, the testimonial competes with another value proposition, the 100% satisfaction guarantee.

testimonial-test

Removing the testimonial makes the guarantee more visible, which may be more important to conversion. Remember, Web users are lazy and rarely read your page word-for-word, espcially on task and action-oriented pages like the shopping cart.

testimonial-test-none

Cross-sells

As covered in chapter 33 of Ecommerce Illustrated, cross-sells in the cart can help or harm. They’re intended to increase average order value, but their presence can slow page load speed, distract from checkout, and create indecision which can lead to permanent site abandonment.

The first test you should run is an include/exclude test. Make sure they’re not lowering conversion.

with-merch

Test version with cart cross-sells

without-merch

Test version without cross-sells

If they prove positive to your business, your next step is to optimize them. Review our chapter on cart page merchandising for test ideas, and remember the 4 Ps of cart cross-selling: placement, personalization, population and persuasion.

If you’re using responsive design, make sure to segment your results by device type, as the cart must reflow significantly between desktop and smartphone. For example, cross-sells that appear in the right-rail on desktop must reflow to a horizontal presentation above or below other cart content at a certain breakpoint (around 980 pixels wide).

dillards-right-rail-xsells

Dillard’s right-rail cart cross-sells on desktop

dillards-mobile-xsell

Dillard’s responsive layout reflows cross-sells below the checkout button

Layout redesign

The biggest A/B testing variances happen when you test radical redesigns, rather than testing individual elements. But keep in mind, radical changes can lower conversions as often as lift them. Ensure your radical redesigns incorporate cart page best practices.

For example, Victoria’s Secret’s current design is a radical makeover from its previous look:

vs-cart-page-test

Victoria’s Secret’s current cart embeds a full one-page checkout into the page

vicsecret-old-cart

Victoria’s Secret’s previous cart layout embeds only the first step

Before rolling out such a radical change to how the cart page functions to all visitors, Victoria’s Secret hopefully tested its redesign head-to-head against its old approach to ensure completing checkout steps through essentially half a page is more effective than a separate checkout flow.

If you use responsive design, it’s important to test the way content reflows to mobile in portrait mode, and the order that content is stacked in your layout. And if you’re like most ecommerce sites today, more than half your traffic is through mobile devices, but mobile conversion still lags desktop. Optimizing the mobile cart and checkout experience is more important than tweaking your desktop design. (Make sure you’ve reviewed our chapter on mobile cart pages for optimization tips and testing inspiration).

Non-page factors for cart abandonment

A good percentage of abandoned carts are due to factors that have nothing to do with web design or usability. Many customers are simply not ready to buy immediately, want to comparison shop, are using the cart as a wishlist or bookmarking tool, or simply get distracted.

For these reasons, setting a generous persistent cookie window ensures returning cart abandoners can pick up where they left off.

Cart recovery email can be very effective, which is why our next chapter is dedicated solely to this tactic. Have you subscribed to Ecommerce Illustrated?

Ecommerce Illustrated is a project of Edgacent, an ecommerce advisory group.

You may also like...

Leave a Reply

Your email address will not be published. Required fields are marked *