Blog Post - David Gafford, Jun 13 2018

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

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

In this two-part series, we touch on some of the things you should consider when designing a seamless checkout experience. In part 1, we look at messaging, login, auto fill forms and delivery.

Checkout is key

One of, if not the most pivotal moment of any eCommerce journey is the checkout stage. It can make or break your user’s shopping experience and can either create a positive or negative relationship between brand and customer. Walker predicts that, by 2020, customer experience will overtake price as the key brand differentiator.

Realistically, a certain level of checkout drop-off is to be expected, which can be due to a number of reasons. And a poor shopping experience prior to checkout will make users unlikely to want to checkout altogether. However, by examining analytics data alongside qualitative research to identify the reasons behind user behavior, the checkout becomes a key area, where incremental changes can result in a marked increase in revenue.

Salmon, a Wunderman Commerce Company, successfully used behavioral tracking to identify friction points within DFS's checkout. Using this data, DFS were able to make small improvements to their checkout UX, resulting in a 7% increase in their checkout completion.

We identified a few things you should consider to help your checkout journeys flow more smoothly:

Ask for the minimum amount of information

Even though customers are accustomed to inputting personal data during an online transaction, the process needs to be as frictionless as possible to help users get through the checkout quickly and unhindered.

Every piece of data a user is required to enter adds to the cognitive load they experience. The higher the load, the greater the risk of errors and checkout abandonment. Ask yourself; “do we really need to know a customer’s date of birth before we can sell them new jeans?”

If data may be required later, but is conditional depending on the user’s journey, postpone asking for it until the point that it’s required. For example, if you need to know a user’s date of birth to allow for a particular payment method, instead of asking every user, we recommend only asking users who choose this particular payment at the point in which they choose it.

Offer a convenient option to login or register to save the user time

It’s also wise to consider how users might login or register during their checkout journey. Logging-in saves users time filling out forms and offers a convenient way of keeping track of their purchases. However, there are many ways of enabling this part of the journey that can include potential usability issues that add friction to the purchase. For instance, rather than attaching a convoluted registration flow into the purchase journey, it’s more advisable to incorporate an option to register or ‘create an account’ during the checkout flow by choosing a password while entering personal details.

Questions to consider:

  • Are your customers likely to want to use social login to speed up their purchase?
  • Are the majority of your customers one-time purchasers who would respond better to ‘guest checkout’ as the default journey?
  • Which layout should you use for the first step of the checkout?
  • Should you ask for an email address from everyone or display a login box for registered users, and a ‘guest checkout’ call-to-action for new customers?

Example of how Game utilise social login within their checkout

The answers to these questions can be found through researching your customers. Carry out in-depth user interviews in the early stages of a project to uncover insights into their needs and motivations. Then, in later stages, proposed design solutions can be validated through usability testing on prototypes, or well-executed A/B testing can be implemented on a live site.

Enable auto-fill on forms

Most modern web browsers store form data and offer an ‘auto-fill’ facility. The effectiveness of this depends on the user (to make sure they have the correct info saved), and the website (by correctly naming form fields in the HTML to allow this feature to work). This browser feature is a freebie in terms of user experience, and one that many sites fail to capitalise on due to basic coding errors.

Be upfront when communicating delivery charges

60% of users in a 2017 survey by the Baymard Institute cited extra purchase costs (e.g. shipping and tax) being too high as their reason for checkout abandonment. If your data is showing a high drop-off after the stage in the checkout where full delivery costs are revealed to the user, it suggests a need for change. To allow for a swift purchase process with minimal friction, customers should ideally know the full cost of delivery prior to entering the checkout process and submitting personal information. Accurate delivery cost can instead be surfaced at the PDP stage and/or in the basket prior to checkout.

Upsell faster delivery options

Not everyone is happy to wait 3-5 days for their free delivery - Salmon’s latest research indicates 45% of consumers now expect delivery within 24 hours. For a little extra cost, their much anticipated purchase will be at their door before tomorrow lunchtime!

In Part 2, we cover the question of single page vs multipage checkouts and payment options. Read on to learn how to structure checkout flows and discover how payment methods can have a big impact on savvy consumers.

Part 2: Ingredients for best-in-class Checkout UX