5 Examples of Ecommerce Checkout Done Right (And wrong)

by 10 03/01/2012

A lot of attention and effort goes into making pages that convert:  optimizing the content, tweaking the call-to-action, and streamlining the navigation so that everything is easy to find (and even easier to act on!)  But one page that often gets the short end of the conversion stick is the pre-checkout page.

This usually happens, not because of a lack of foresight on the part of the developers, but usually because “that’s the way it’s always been done”.  While online checkout is a fairly standard process, there are some companies that do it horribly wrong (I’m looking at you, Godaddy), and others who do an excellent job – like these:

ACE Hardware

ACE Hardware product info page

ACE’s pre-checkout page does several things right from a conversion point of view.

Pros:

ACE Hardware’s page does manage to fit quite a bit into a smaller screen space –  all of the options are meant to get you to take action rather than abandon the shopping cart.  Large images, related items, free shipping and product information are all crucial when making an informed buying decision.  As an added bonus, they’ve  included free shipping to your local ACE store, a bill me later option, and the ability to add the item to your wish list if you’re not quite ready for it yet.

ACE has also done a great job of weaving in its social and sharing options.  There’s the Facebook like (for buckets! Who knew?)  but also the mention of a loyalty points program, and the ability to either print the page or email to a friend. The large Add to Cart button is unmistakeable.

Cons:

Both mentions of the rewards program appear above the fold, so it almost seems redundant to show it twice.  There’s a lot of screen real estate being used on this site but it’s nicely organized and flows well.  Their product availability/store availability could be more noticeable, and there’s no mention about order security (through trust seals, encryption, or other safe ordering methods).

Furthermore, apart from a small link to Customer Service, there’s no way to get in touch with anyone should the user have a question.  It would be beneficial to include a phone number or a live chat option so that customers can ask questions directly to a salesperson.

Action Steps:

  • If at all possible, make free shipping a noticeable part of your offer.  It tends to convert higher than any other ecommerce conversion tests.
  • Consider using live chat or display your customer service number in a large, noticeable place on your product page to help customers who are at the point of purchase.
  • Let customers know how to return items, and that your site guarantees a safe shopping experience.

Apple

Apple's iPad Customization Options

Apple encourages users to customize their product before checkout.

Pros:

One of the reasons people are so enamored with Apple products is because they’re brilliant, yet astonishingly simple to use.  The iPad pre-checkout screen above is no different.  From the moment you choose to buy, you’re greeted with simple clickable radio-button customization options that range from which wireless carrier you’ll be using to what size memory capacity iPad you want.

And the customization options don’t end there.  When you check out, you’re greeted with an upsell to buy a cover for your iPad, as well as related accessories.  A summary of your order is displayed throughout the process, along with a large, green “continue” button and live chat/phone options if you have any questions.  Free shipping and “in stock” notifications also help propel the user along through the ordering process.

Cons:

In the screenshot above, Apple is so focused on letting the user customize their iPad cover, that it’s easy to overlook the accessories section entirely.  Beyond the first page, there’s no mention of the most common questions users may have before making their investment – such as, what’s the difference between 3G and 3G+Wifi?  What are the rate plans for my selected carrier?  What about technical support?  The 3G details are on the preceding page, and technical support is all the way at the bottom of the site – those points could’ve fit in nicely on the action-generating sidebar.

Action Steps:

  • Take the time to answer the user’s questions up front, especially if they’re making a high-ticket item purchase or buying something technical.  Even approximate costs are better than nothing.
  • Look for ways to give the user more personalized choices for the product or service they’re buying.  What can you offer that’s inexpensive and easy to upsell, but will let them “make it their own” for a little more?
  • Be sure that if you offer support plans for your product, that they’re just as noticeable as the accessories or other important items in the package.

Crocs

Crocs shoes checkout page

Crocs’ website helps guide users through the checkout process one step at a time.

Pros:

If only Crocs paid as much attention to the design of their shoes as they did on the design of their website!  Love ‘em or hate ‘em, you’ve got to admit that the checkout page does a lot of things well.  Live chat is featured prominently on the screen, and the order total plus shipping is easy to see in its own section to the right. Bonus points for encouraging shoppers to subscribe to their newsletter.

One of the best aspects about this particular page is that it lets users know clearly up front how many steps are involved in checkout, and what they are.  So not only can you choose to edit your cart contents, but you also get to review your order one last time before checking out.  Two live chat buttons plus the customer service number are also easy to see in case you have questions.

Cons:

As great as the Crocs Cares option is, I’m not so sure it belongs on the checkout page.  This gives users an opportunity (albeit a charitable one!) to go elsewhere and potentially not come back to complete their order.  As with a landing page, you want to keep users focused on the end goal – as seamlessly and smoothly as possible.

Here again, there’s a lack of trust seals/order processing security details on the first screen.  If I’ve never shopped at Crocs before (and I’ll admit I haven’t!), how do I know it’s a safe site to do business on?  Also, if I agree to subscribe to the newsletter, how often will I receive it, and what sorts of “exclusive offers and last minute sales” will I see?  It would be great to include a link to a previous newsletter as an example.

Action Steps:

  • Look for ways to cut out anything that could serve as a distraction or an opportunity NOT to buy, even if it is something else your company offers.  A better place to put that information is in the newsletter.
  • If you’re going to let people sign up for discounts,  give them some way to see what they could be getting in their email before they choose to subscribe.
  • Letting people know up front how many steps are in the ordering process will give them a clear visual indication of how much time their checkout is going to take. Letting them review their order one last time before it’s submitted is extra icing on the cake.

 Nike

Nike Checkout Page

True to form, Nike makes checking out as cool and action-oriented as everything else it does.

Pros:

Nike’s checkout screen includes all the usual best practices:  item photos displayed throughout the process, total order amount, security seals, customer service/live chat,and clear, easily visible buttons.  As you enter your information, helpful tooltips let you know if you’re missing something.  The details you submit are dynamically validated before the site will let you continue on to the next step, helping to cut back considerably on form errors.

The checkout page also does a great job of making sure the user isn’t distracted from the end goal by including anything that’s not directly involved with ordering.  That includes (for better or worse), related products, accessories and so on.

Cons:

In order to be able to return your merchandise or qualify for free shipping, you must sign up to become a “Nike Member”. On the checkout page, there’s no clear answer to what else this entitles you to, what it involves, or even what it costs.  You’ll have to check the box to find out.

While I understand the company’s need to make visitors feel as if they’re part of an exclusive club – if something doesn’t fit, arrives damaged or otherwise isn’t received as advertised – shouldn’t a customer be able to return that item regardless?

Action Steps:

  • Having an exclusive membership or club of some kind is a great way to grow customer relationships.  Making it necessary in order to do something like return items will just foster resentment from people who choose NOT to become a member.
  • Displaying a visual of the items in a cart can help reduce the likelihood of shopping cart abandonment. It’s also a good idea to display color/size information on the summary page so that customers can double-check their order details.
  • For performance related items, including customer reviews, ratings or testimonials can increase conversion rates.

Stacks and Stacks

Stacks and Stacks checkout page

Can you spot the issues with the Stacks and Stacks pre-checkout page?

Pros:

Stacks and Stacks has included several points on their checkout screen to help increase conversion rates:  free shipping, a visual checkout steps process, promotional code area, and a buyer guarantee.  A customer service phone number, plus live chat and security/returns information are all displayed on the page, and there’s good use of white-space to keep all the elements from cramming together.  Even multiple checkout options can be a good thing – however…

Cons:

They could’ve cut out some of the checkout buttons by identifying where the shopper is coming from based on their IP address before the page loaded.  Failing that, they could allow the customer to choose their country before shopping. Also, putting all of the checkout buttons so close together on the page greatly increases the likelihood that someone will click the wrong one. I can understand giving people more options rather than less, but it would be worth knowing in user tests how many people actually used Amazon checkout or Google checkout as compared to Paypal or the site’s own eCommerce checkout.

The related products also seem to have nothing to do with the item selected. In the above example, I chose a beach photo from among a set of 9 or so similar ones.  Why are those not shown as related products?  Just because I buy some wall art automatically makes me in the market for a chandelier?

Action Steps:

  • Rather than displaying lots of checkout options for international customers, use their IP address or include a country selector so that they can shop in their own country or language and find items in stock that are close to them.
  • Make sure that the related products you display from your cart are somehow related to the item being ordered.
  • If you’re going to include promo code fields, you’re running the risk that customers will go offsite to look for coupons.  Include those codes directly on your site to help prevent this.

About 

Sherice Jacob helps website owners improve conversion rates with custom design, copywriting and website reviews.  Get your free conversion checklist and web copy tune-up by visiting iElectrify.com.

Get our Daily Newsletter

Get conversion optimization, design and copywriting articles delivered to your inbox FREE

10 COMMENTS

Navigator Multimedia

Yep, Crocs may continue to mystify millions with their persistent allure to chefs and vacationing families, but the brilliant e-commerce layout for Crocs.com is crystal clear. I really love when retailers are upfront about the total price with shipping from the get-go, and lay bare all the steps ( imagine if they could offer an “approximate time” function to help people gauge whether they have the minutes to complete the order!) Nice work there.
Thanks for the engaging compilation. So thorough and intelligent.

Cheers,
Sarah Bauer
Navigator Multimedia

March 1, 2012 Reply

Sherice Jacob

Sarah, you may be on to something… I’d love to know up-front how long it would take me to complete checkout on some sites *cough* Godaddy *cough*. ;)

March 1, 2012 Reply

David @ Edenzo

Excellent topic… i love the Nike checkout… simple, fast, beautiful.
This will help me to make my website better ;)

Thk you from France

November 8, 2012 Reply

Gavin

Nice read. I’ve been looking around for inspiration to see how other ecommerce websites design checkouts for my own clients.
I also like Debenhams, Next and A1Gifts checkout layout. The only cons about a lot of checkout systems these days they almost all require you to create an account with them… which then leads on to email marketing. But can be horrible experience for first time buyers.

Thanks for the good read though!

May 1, 2013 Reply

little princess

cool! this actually matches with my school assignment,but still nothing goes into my mind.
thanks for saving me from my cruel teacher.

good read!

June 7, 2013 Reply

James

A really great article with great examples that highlight that not everything is perfect and that there are always areas that can be explored to help enhance and improve the process further (and increase conversion rates).

I found a few of the observations about distracting and leading people off to external points or away from the checkout does raise the question for sites to look at developing isolated checkouts (but highlights the requirement to consider what isolated means) and whether it would improve the completion rates within the checkout.

I also pick up on @Gavin’s point – checkout processes that demand you register can be frustrating and lead to abandonment beause, from your perspective, you just want to complete the transaction. Whilst personalisation is big, so can be the number of visitors you put off.

November 6, 2013 Reply


Leave comment

Some HTML allowed

Get conversion optimization & A/B testing articles FREE >>>