Mobile Cart Page Design and Testing Tips

Continuing our series on mobile web design for ecommerce, today's installment focuses on the first step of the conversion funnel - the cart summary page.

The key metrics for the cart summary page are bounce rate (aim to reduce cart abandonment), clicks on the checkout button and successful clicks back to the home, category or product page to continue shopping. Design plays a major role in these metrics, as a usable, easy to understand and persuasive cart page can make your performance, the opposite can break it.

Let's look at the key design elements of the cart summary.

Cart content summary

Images

Thumbnail images need only be large enough to eyeball the product to confirm it's correct. They need not be as large as on category or product pages.

Editing tools

This seems like a no-brainer, but some shops don't have quantity update tools, including ASOS. Even for products that are typically not sold in multiples, having a quantity update feature is helpful.

On the other hand, ASOS is a good example of prioritizing calls to action. Secondary calls to action like Remove and Save for Later are less prominent than the main call to action "checkout."

It's also important to ensure buttons are proximal to where the user takes action. Barnes and Noble slips the Update Quantity not only below the fold, but with a dotted line separator. Lines tend to "bounce" the eyes and discourage scrolling, users may be confused how to update the quantity.

Pricing

Unit price should be clearly shown along with any discounts (red is a common color to use for sale prices). Remember, mobile screens can be small!

Shipping cost

Most of the mobile sites I reviewed do not show shipping costs before checkout. But on mobile, there's more to lose by proceeding without knowing the final cost, as in lost time initiating checkout with an already slower mobile connection. Sites that offer flat rate shipping should reinforce this value proposition in the cart.

Calls to action

Regular rules for calls to action apply: prioritize your calls to action and place and style them accordingly (don't make continue shopping and checkout look the same), make sure your CTAs are visible above the "fold" and make buttons look like buttons.

Be careful with button size/shape on mobile devices, they can look like page titles rather than calls to action when they take up most of the width of the screen. Is this a checkout button or am I in the first step of the checkout?

Similarly, the "Continue Shopping" link fades into the navigation bar. People expect the Continue Shopping link to be near the checkout button on the web, and likely expect the same convention on small screens.

Blue Nile makes it clear that the blue box is a clickable button, not a header, by leaving white space and labeling "Checkout Now." Lowes makes the Return to Shopping link proximal to the primary call to action, as customers would expect.

For Checkout buttons, adding "secure" to the button label or using a point of action assurance like Verisign can increase conversion and is worth testing, as security worries are heightened when using mobile devices.

You may also want to explore ways of creating urgency, like "hurry, only X left" or "checkout today and receive $5 shipping."

Payment options

Offering alternative payment options like PayPal is a more of a value prop on mobile than even on www sites. PayPal is attractive as there's less input to type (credit cards, shipping address etc) and it's perceived as more secure than using a credit card, especially over a wireless connection. eBags and Crutchfield make PayPal and regular checkout options clearly distinct from each other.

Testing ideas

Remember, the goal of the cart page is to successfully move the customer to the checkout or back to shopping, but to reduce abandonment, cart information must be displayed clearly and with the proper editing tools and point-of-action assurances.

Beginning testing efforts with user testing the existing cart page to identify any hiccups in task completion and clarity of tools/navigation. Can the cart be easily edited? Is the checkout button easy to spot?

After gathering qualitative feedback, a "radical redesign" based on user input can challenge the existing design through A/B testing, the goal being to reduce site abandonment at the cart summary. Further rounds of testing may be explored, investigating value propositions, the presence and presentation of cross-sells and upsells, methods of creating urgency, security assurances and cart button design.

Looking for help with mobile commerce strategy? Contact the Elastic Path consulting team at consulting@elasticpath.com to learn how our ecommerce strategy and mobile strategy services can improve your business results.