Five ways to improve your online checkout process with UX design

Paying for a purchase is the most crucial part of the online shopping process, but recent research by the Baymard Institute has placed the customer dropout rate at the checkout at around 70%. Years of research, design and testing have been carried out to encourage customers to complete their purchase. So, why aren’t they?

Plenty of our clients approach us with this issue and, in this article, we’ll share our approach to tackling it and getting checkouts ringing more than ever before.

What are the main reasons for an ‘abandoned’ purchase?

• Losing trust
• Complexity
• Lack of transparency

Let’s look at these in more detail.

1) Promote trust

Customers may lose trust in the process if they become uncertain during it. This is often caused by seeing something unexpected that provokes a lack of confidence. This will often result in them leaving before paying, because they feel you have breached their trust and led them on a merry dance.

To tackle this, we strongly suggest you don’t leave any important information undiscoverable until the checkout stage – such as a postage or credit card fee – and instead be as upfront as possible early on.

Also, on the other end of the spectrum, make sure you supply all the supporting information they may not know they need, such as the payment methods you accept and how secure the process is. Logos of security services you might use, such as Verisign, are reassuring.

Make sure your customers are constantly aware of the next step they are about to take. Signpost any movements to third party sites such as PayPal carefully and clearly so they can move there with confidence. If you are using a third party payment option, have a look at the options to personalise it with your logo and branding. This means your customer will know they have come to the right place to pay.

Finally, make sure you have HTTPS enabled on your website. This is a way of authenticating your site and protecting your customers against man-in-the-middle attacks. Major browsers such as Google Chrome now display a warning message if you’re going to input sensitive information in an ‘insecure’ website that hasn’t been authenticated. The good news is, developers can resolve this with a few updates.

2) Keep things consistent

By the time your customer gets to your checkout they will be pretty familiar with your brand and tone of voice. You could say they have started to recognise you. This recognition is another way you have built trust. It can be very easy to break this trust at the point the customer moves from the basket to the checkout though, because often this is where the design is changed. For example, we often see the checkout has lost the main navigation. The reasoning for this is pretty sound though – companies want to keep the customer focused on the task at hand: their purchase. But this change can annoy customers; it can break that carefully tended bond you’ve created and can cause them to leave.

An example of this can be seen on Tesco Direct, below. Tesco have removed the main navigation options and search facility from the header at the checkout. Their only option on this page is to return to the basket, continue with the purchase or, of course, abandon the purchase completely.

Figure 1: Tesco Direct standard header

3) Break down the barriers

It might sound obvious, but the customer purchasing journey should be as simple and fast as possible. Any additional steps you add in increase the likelihood of abandonment. A good example is a website that requires a customer to create an account before they make a purchase. It’s a good idea to highlight the benefits of them doing so at the same time.

Other common barriers to a purchase we see are a website’s automated address system not recognising a customer’s address. This is a great tool, but there must also be a means for your customer to manually correct any errors in the information.

4) Order everything logically

Make sure the ordering of the checkout process is logical and intuitive. User testing is a great way to understand your current process and make sure it really is both of these things. If there are any issues with the order, it’s crucial that this is clearly communicated before the customer wastes time inputting in any additional information. For instance, asking for the delivery address before the billing address.

If there is a change in cost because of where it is going to be delivered, get a final total confirmed, including postage, before they give their payment details, so that they are not surprised by any changes after they have given you their card details. You can also ask whether the delivery and billing address are the same to save them the bother of adding it in twice.

5) Ensure your checkout works if your customer changes device

A customer will not necessarily remember whether they last viewed your website on mobile or desktop, but when they return they will want to continue shopping as if they had never left. For example, they may have started a bit of research on your site on their mobile on the train home from work and want to finish the purchase on their laptop when they get home. With a ‘cross-device journey‘ in place, it is possible to do handovers between devices so a shopping basket can be shared and they can carry on. Note that this usually requires a customer to have an account in order to continue their journey from one device to another.

Figure 2: A user may start their purchase journey on mobile (left) and completed on their laptop (right)

With Amazon’s checkout process, the Items can be added to the basket on the desktop site if the customer is signed in, as seen below. They can then continue to the checkout on a mobile device, allowing them to continue shopping and finish their purchase later.

Figure 3: Adding Chocolates to Amazon basket

Figure 4: Continuing the purchase on mobile

Make sure it works on a mobile

Mobiles are taking an ever-increasing role as the shopping device of choice for millennials (18-35 year olds) and, as this Financial Times article predicts, internet shopping is only going to continue to rise.

Assuming your website is responsive, it’s never been more important to make sure your entire user journey, including the checkout, works seamlessly on every device, and your customers can confirm their orders with confidence.

If you’d like to discuss improving your online checkout process, we have a team of UX experts here at Nomensa, so send us a message or give us a call on +44 (0) 117 929 7333. We look forward to hearing from you!