Digital transformation for NWG Leisure.

Increase in booking revenue.

Building an ideal checkout process

November 5, 2021 / Reading Time: 4 minutes /
Libby Caraher
CRO & UX Research Assistant

For any eCommerce website, the checkout process is the make or break point for the customer. Get it right, and the users you’ve won over will smoothly transact and become paying customers. Get it wrong though, and all the hard work you’ve done to educate the user and have them connect to your product is lost.

So, how can you optimise your checkout? Whilst there’s no one-size-fits-all guarantee, there are some key elements that we look for when conducting a UX review of a checkout.  

checkout process

It’s all about flow – keep the user moving.

Users who have made it to the checkout are often ready to spend their money, so your business’s checkout process needs to guide the user smoothly and easily to complete their transaction. 

To enhance the ease of the flow, the number of steps to transaction completion should be minimised to streamline the experience. 

When navigating through more than one stage of the checkout process, the call to action button to proceed to the next step needs to be clearly signposted, by considering its placement (often the bottom right of the page, as if turning a page in a book) and highlighted in a contrasting colour to the background. 

Providing a progress bar at the top of the page can also help users orientate themselves within the process, when there is more than one stage.

The common purpose running through all of these suggestions is that they keep the user moving. We want the user to progress field-by-field through the checkout smoothly. In particular, we want to avoid distraction and disruption – anything that gets the user to pause and think creates a potential “stopping point” at which they can re-consider the purchase.

Technology can be your friend.

Take advantage of functionality that can help your user progress through the checkout without needing to look away from the tab or window.

For example, by implementing an automated lookup function into your address finder. This can help speed up the process and provide convenience for the user, as well as mitigating a common problem area. Manually entered address fields are often problematic because the user has to fit their address into the breakdown of fields required by the brand. A postcode look-up circumvents this completely – the user selects their address from the list, and all the individual components of the address are mapped to the required fields for the brand.

However, we always advise that clients do still provide a manual input option, as this presents the user with options to use the method that is most suitable to them. This is often particularly useful for users in new build developments or older properties, whose postcodes may not yet be on the system, or may not match the suggested address. By using both, but directing the majority of users to use the look-up function, we create a convenient experience for the user and facilitate their intention to spend.

Another example of functionality that can provide great convenience to the user is the ability to take convenient payment methods. Ideally, we don’t want the user to have to leave their device to go and find their wallet or purse and manually enter their payment details. Utilising payment methods such as Apple Pay or PayPal allows users to transact without the need for their card details. Alternatively, browsers such as Chrome and Safari can save the user’s card payment details, providing a quick and simple method to pay by card, without physically needing the card in front of the user.

Be clear on details. 

Inputting details is a requirement for any eCommerce transaction, as payment is needed and often a delivery address. Email addresses are also often requested to send receipts and invoices, whilst phone numbers are also often requested in case of issues with delivery. 

Our experience and research has taught us that when any details are collected, honesty is the best policy.

For any details that aren’t 100% necessary (often anything beyond payment details), you should communicate why the details are being requested, particularly if your website lists it as a requirement. The reasoning needs to be concise and clear, such as ‘for delivery updates’, or ‘to send confirmation of order’. Fail to explain and you fail to build trust in your business-to-consumer relationship, which can prove detrimental to your conversion rates and financial gain.

The last thing we want is to lose out on potential customers who were ready to transact, simply because we asked for too much information in the checkout process. If possible, collect the bare minimum required to process and manage the transaction – however, if any additional information is needed beyond what the user might expect, be clear to say why you’re collecting this, so that we don’t risk losing the customer to their fear of being re-marketed to.

Ensure cost clarity.

Be transparent on any additional costs and make it obvious for the user how their total cost breaks down. This includes highlighting chosen delivery costs and VAT charges for example. 

No user wants to enter all of their details, only to get to the final step before payment and realise extra and unexpected charges have been added to their total. Hidden costs cause frustration and negative emotions to then be associated with your brand. 

Avoid this by offering an overview of costs before payment. This allows the user to essentially check their receipt before paying- a benefit to the user in online shopping. We often advise our clients that users should really be able to predict the exact price of their transaction before they head into the checkout. If prices are clearly displayed on product pages, and the brand is upfront and honest about delivery information, then we can avoid any nasty surprises for the user in the checkout.

Offer an overview.

Before taking money from the customer, provide them with an overview of their order, detailing all their decisions they have made so far, from product selection, to delivery details, and coupon codes added. The user needs to be sure of what it is they are paying for, otherwise they will likely be reluctant to pay. 

This is one of those pieces of functionality that you might not appreciate until you don’t have it. We’ve worked with some websites in the past that were missing this “order summary” section, and what we find is that many users left the checkout page altogether, in order to go back to the site and check their order information. This can be a real problem, as we’re taking users away from the point of transacting right back to the top of the funnel, and many of these users won’t go back through the checkout process again. 

Make sure that your order summary is clear and simple, and provides a short, succinct, but helpful overview of the user’s order. 

Considering these elements when designing and building a checkout process will help to facilitate an optimised user experience, increasing conversion and revenue. When working with clients on optimising their checkout experience, we always suggest that it is not the place to get clever or crafty and risk over-complicating matters. At the checkout stage the user has been won over – they love your brand and your product, and they’re willing to complete the transaction – all we need to do is make that as easy and simple as possible.

Download our latest guide for more tips on how you can stop your customers abandoning their baskets.

We explore the reasons behind cart abandonment and how to tackle it in addition to improvements you can make to your checkout process.

Share this

social_facebook Share via Facebook logo-twitter-glyph-32 Share via Twitter Share via Email

Ways we can talk...