Shopping Cart Design Tests - Color & Size Lift Results 44.11%

CHALLENGE
Michael Klazema, Director Web Marketing & Customer Relationship Management, DYMO, was reviewing his site analytics report and had a hunch that some of the more-accepted industry theories about keeping colors consistent might not be true for his site.

All of their shopping cart buttons on the site were light blue and the same size. "I started wondering if different colors, shapes and texts could improve conversions."

Because their customers have a large number of accessories needs (specific labels, inks for label printers, etc.), Klazema's design-optimization efforts were also riddled with an unusually high number of cross-sell layers on the way to checkout. For many products, there was at least one cross-sell page between the point where the customer clicks on the item and actually enters his or her payment method.


CAMPAIGN
With new software brought onboard last fall, Klazema and his team were ready to begin testing.

Based on analytics data, they wanted to conduct five tests:
o Product-page buttons for color
o Cross-sell-page buttons for color and text
o Add-to-cart button before checkout for color
o Size of the add-to-cart button
o Effect of eliminating one cross-sell page from of the checkout process

They split the entry to their site so that 90% of traffic participated in the test while 10% saw the existing site.

-> Test #1. Buy Now

Up to this point, all of their buttons were hues or tints of pastel to primary colors, but Klazema wanted to see how bolder colors, such as green or red, affected performance.

In terms of the Buy Now button appearing after one click on the individual product pages, they tested:
o Light blue - the existing color
o Dark blue - because it fit with DYMO's color palate in mock layouts
o Red - because it stood out as a call-to-action element

"Red was the most contrasting color we could imagine working on the page, while really jumping out at the same time," Klazema says. "At this point in the sale process, we weren't really worried about the cultural connotations in terms of red symbolizing 'STOP.'"

-> Test #2. Add to Cart

Once customers clicked on the Buy Now button, they were taken to a cross-sell page that had a light-blue button with the words "Add to Cart" inside. Here again, Klazema and his team tested the current light blue against red and green.

From there, customers who clicked on 'Add to Cart' were directed to another page so they could select the quantity of the product before proceeding to the checkout page.

For this, they tested:
o Light blue
o Green

-> Test #3. Button size

They also wondered if the size of the 'Proceed to Checkout' button, which appeared on the very last page before payment, wasn't large enough. So, after creating several mock layouts, they tested:
o One at 145X14 pixels
o One 25% taller, 145X19 pixels

-> Test #4. 'Add to Cart' vs 'Proceed to Cart'

Next, they tested the text in the buttons on the cross-sell pages before checkout:
o 'Add to Cart'
o 'Proceed to Cart'

-> Test #5. Eliminate the cross-sell step

Finally, Klazema ran a test to cut out the cross-sell step to see if conversion rates increased. "We knew that our shopping experience was a little different, perhaps not as fast as compared to others because of the cross-sells, so we were curious to see if [pulling it] would change anything."

In this case, once customers clicked the 'Add to Cart' button, they were directed to the *select quantity* page before they proceeded to the checkout page.
RESULTS
It's a good thing Klazema and his team conducted these tests because they wouldn't have been able to predict the results. With the Buy Now button on the product pages, red outconverted dark blue and the existing light blue by 4.03%, which was good enough to convince Klazema and his team to switch colors.

In some cases, the testing system simply declared winners and didn't compute percentages when one outperformed another by such large margins:
- For the *select quantity* page, green soundly defeated the existing light-blue color.
- The existing light-blue version of the shopping-cart button on the cross-sell page easily outperformed red and green.

Amazingly, a larger 'Proceed to Checkout' button lifted conversions 44.11% over the existing 'Add to Cart' one. Of course, the design team scrambled to make the permanent switch. On the cross-sell page test, the words 'Proceed to Cart' beat 'Add to Cart' by 21.8% -- and, therefore, replaced it across the site.

"It was interesting to see some colors having a positive effect at certain stages and a negative effect in other places," Klazema says. "Green works for one shopping cart button, but not as well for the same function at different point. People are in different states of mind when they go the checkout process. Rather than apply a consistent look and feel across all buttons on the site, our key learning is that we have to continue testing in order to make sure we don't make false assumptions."

With the cross-sell page, they were pleasantly surprised to see that expediting the shopping experience by removing the cross-sell step actually reduced conversions by 15%. "That finding doesn't exactly fit all of the prevailing school of thought on the huge importance of speed either," Klazema says.


Useful links related to this article

Creative samples from DYMO's color test:
http://www.marketingsherpa.com/cs/dymo/study.html

OTTO Digital - online media optimization agency that helped during the testing:
http://ottodigital.com/

Offermatica Corporation -- provided software that aided the testing:
http://offermatica.com/

WebTrends Inc. - DYMO's analytics provider:
http://www.webtrends.com

DYMO:
http://www.dymo.com