Blog Post - David Gafford, Jun 13 2018

​The ingredients for a best-in-class Checkout UX - Part 2

​The ingredients for a best-in-class Checkout UX - Part 2

Part 1 of this series looked at how messaging, login, auto fill forms and delivery all play a vital part when designing a seamless checkout experience. In part 2, we explore how checkout flows should be structured and how payment methods can have a big impact on savvy consumers.

Single page VS multipage checkout

Deciding which type of checkout your site should have should be driven by more than just development effort and out-of-the-box eCommerce platform options. Most good platforms offer both single and multipage check options anyway. Instead, your choice should be based on the desired user experience; you should choose the option that will result in the least amount of friction for your users.

Questions to consider:

  • How complex is the proposition?
  • How much data is being presented and captured via checkout?
  • What is the estimated basket size going to be?
  • Are there multiple options within the delivery proposition?
When to choose multipage

Imagine the complexity of a B2B order for electrical components. You may need timed delivery slots, split delivery locations, split delivery dates and multiple countries in a transaction. This level of complexity lends itself best to a multipage checkout, where information can be “chunked” into manageable amounts (around 7 pieces of information according to Millers Law).

When to choose single page

A simpler proposition, such as a single t-shirt with only one delivery method, might lend itself better to a one-page checkout, where everything can be dealt with on a single screen. Similarly, a logged-in ‘express checkout’ could also be handled using a single screen format, a concept that has been taken to the extreme with Amazon’s ‘1-Click®’ ordering.

Single page checkouts can also face challenges when it comes to the design execution on the front-end of a website. Quite often, ‘accordion’ UI elements are used to gradually hide and show information as a user completes sections of data entry. These interactions when poorly executed, (e.g. auto-scrolling to positions on the page that don’t quite match up with the content, combined with jerky animations) can have a negative effect on the user’s experience and their overall perception of the quality of a merchant’s website.

Speed up and simplify with express checkout options

Following in a similar vein to Amazon’s ‘1-Click®’ ordering, PayPal Express and the web standard PaymentRequest API can help speed up a user’s purchase path, effectively bypassing the site’s checkout. Checkout time can be reduced considerably by using stored payment information to remove friction and alleviate potential trust issues a new customer may have when handing over payment card details to a retailer for the first time.

Challenged to address falling revenues, the implementation of the PaymentRequest API on the J.Crew US website resulted in a 75% reduction in transaction time. That’s impressive, considering 50% of their users now use the API for their payment. Paypal has also been found to improve conversion rates by up to 44%.

Widen the choice of payment methods

With convenience being a major factor in the consumer’s decision to buy online, offering as many payment methods as possible can increase the chances of your users completing their purchase.

The choice of payment methods should be broadcast throughout the shopping journey, ideally somewhere consistent like the site footer. In addition, a key moment of decision, namely the basket page, should also feature prominent messaging. The reassurance of how easy it will be for the user to checkout will provide encouragement for users to click the ‘Checkout Now’ button.

Salmon, a Wunderman Commerce Company, has integrated with many payment gateways including a market-leading platform offering access to over 250 global payment methods. We recommend using a payment provider who offers an API enabling us to tailor the front end to provide the best experience for customers.

Whichever payment partner you choose, Salmon recommend to build a fully integrated payment process within your site’s checkout to retain full control over the user experience. Third party hosted payment gateways invariably offer a degraded user experience. The look and feel often doesn’t quite match with the original site, and error handling is executed in a different way which can present a jarring experience to the user.

Summary

Although checkouts seem pretty straightforward, it’s surprising to see how many businesses fail to deliver in both conversion rates and user experience. Creating a best-in-class checkout involves more than just visual design. There’s a wealth of best practice UX design principles you can apply, alongside validated user research to give you a thorough understanding of what matters to your customers.

Once you have a platform to build on, that’s when the data starts to show how further continuous optimisation, and a well thought out A/B testing strategy, can help fine tune your conversions and boost your revenue through lower basket abandonment.

find out how we optimise ecommerce websites