The Ultimate Guide to Checkout UX Design in 2023

Given that checkout comes at the end of the buyer’s journey, many people overlook its importance. However, there is no guarantee that a user will complete their purchase once they have clicked “Proceed to Checkout”.

Any usability issues may severely disrupt a customer’s checkout experience. That is why your checkout flow UX often dictates whether the customers that get this far will complete a purchase or abandon their cart.

This blog will explain exactly how you can optimise your checkout experience to increase your site’s conversion rate. We will discuss what works and what doesn’t, supporting our claims with checkout UX best practices and page design examples from industry leaders.

Checkout Process UX and Shopping Cart Abandonment

When people hear “shopping cart abandonment”, they naturally think that the problem lies solely in the shopping cart page design. In reality, people also abandon their carts during the checkout process and often do because of poor checkout UX.

Invesp conducted research into the most common reasons for shopping cart abandonment. Many of them were related to user experience during the checkout process:

What does this mean? 

Poor checkout UX leads to a lower conversion rate.

How can you prevent this? 

Start implementing our checkout UX design tips!

The Most Important Considerations for eCommerce Checkout UX

Simplify the Checkout Process

11% of users abandon their cart because the checkout process is too long or complicated.

The eCommerce checkout flow involves many different steps. Making this process simple and digestible is key to ensuring that your customers stay motivated to follow through with their purchases. A typical checkout flow includes:

1. An (optional) log-in or sign-up.
2. Billing and shipping information.
3. Shipping method.
4. Order review.
5. Payment confirmation.

Below, we will discuss two ways that you can present your checkout: the one-page and multi-page checkout.

The Multi-page Checkout vs. One-page Checkout

The multi-page checkout splits the checkout flow across several different pages, thus segmenting the process to make it more manageable for the user. Kevin Clark, Senior UX Manager at Shopify, had this to say about the approach:

“We learned that by grouping relevant information together in chunks, and putting it in a logical order, you allow the user to focus on one task at a time. There is, however, a limit. You don’t want to go too far, like having a ten-step checkout experience.”

In turn, overloading your customer with numerous rows of form fields on a single page is a surefire way to lose a sale. For this reason, traditional one-page checkouts – where all required elements and fields are on the same screen – are considered rather outdated.

However, the one-page checkout has been re-invented in recent times. If many people abandon the checkout process when it is too long or complicated, surely finding a way to effectively condense the information onto a single page is the answer? That is what the accordion-style checkout aims to do.

An accordion-style checkout uses expanding and collapsing sections on the page to display different checkout stages. This means that the relevant form fields of each stage only appear when necessary, thus overcoming much of the critique levelled at one-page checkouts.

It is telling that even Amazon has switched from a multi-page to an accordion-style checkout in recent times…

Under Armour Example

Under Armour is a great example of an accordion-style checkout. The checkout process is broken down into three sections: shipping, payment, and contact information, all of which appear on a single page.

The three sections are visible from the start of the process. Therefore, customers know exactly what they have to do to complete their purchase.

At the same time, they are only able to enter the information relevant to each section once they have completed the previous one.

This “allow[s] the user to focus on one task at a time”, just as a multi-page checkout would.

Also, look at the variety of formatting they use in the “Shipping” section:

• Buttons to decide between “Delivery” and “Pick Up Point”. 
• Form fields to enter the shipping address.
• Checkboxes to choose a shipping method. 

The checkout process is all about gaining information from the customer without making it feel laborious. This visual variety breaks up what is an inherently monotonous task.

Once you have filled out a section, you can see a summary of the information you have inputted and easily “edit” it. This is also a nice touch.

One small improvement that we would suggest is to withhold even more input fields within each section.

At the “Shipping” stage, for example, Under Armour could show the shipping address form fields only once the customer has selected “Delivery” or “Pick Up Point”. Equally, the shipping method option could appear only once they have filled in the shipping address form fields.

Louis Vuitton Example

Louis Vuitton’s checkout does something similar and it works very well. On the delivery section, you…

1. Enter your postcode.
2. Choose a delivery option.
3. Enter your delivery address (unless you choose “Click & Collect”).

By breaking each stage down into further mini-stages, the checkout becomes even more interactive and fast-paced. This makes it even more likely that the user will stay motivated.

What Checkout Page Style Should I Choose?

Whilst we have mainly explored the accordion-style checkout, it is worth noting that the multi-page checkout can still be very effective. It even has certain advantages over the accordion-style checkout:

• You cannot track sales funnel data with any one-page checkout as Google Analytics will not be able to identify the point at which a customer abandons their cart.
• A one-page checkout may decrease site speed due to the larger volume of on-page content.

Trafiki Tip: Multi-page checkouts may also be best for mobile if it means less scrolling. Under Armour acknowledge this, with the mobile version of their site switching to a multi-page checkout.

Statista found that mobile commerce accounts for 60% of all retail online sales, making mobile checkout UX a key consideration!

Make It Visual!

Whether you opt for a one-page or multi-page checkout, visual feedback is very important. The user should never be unsure about whether their information has been logged or their order has been received. One way you can do this is through a progress bar.

A progress indicator will communicate to the user both how far through they are and how much longer the checkout will take. It should also be responsive and dynamic. Once the user has completed a section, there should be a clear visual indication that their information has been successfully entered.

Given that 90% of information transmitted to the brain is in the visual form, the entire checkout journey (and your entire website!) should be lined with visual cues. The power of using imagery and text in tandem can be explained by what is known as the “Dual-coding theory”. Here is how it works:

1. Information can be represented by both verbal associations and imagery.
2. Verbal and visual information are processed differently and along separate channels in our brain.
3. Both of these channels can be activated simultaneously.
4. This means that we can process verbal and visual information at the same time.
5. Therefore, using imagery and text alongside one another creates a more memorable impact on the user.

Sigma Beauty Example

On their two-page checkout flow, Sigma Beauty provides a simple but effective example of a dynamic progress bar.

A bold tick highlighted by a pink design informs the customer which section they are on. Once that is completed, the tick remains but that section on the progress bar is grayscaled. The following section is then highlighted.

UX design should always be intuitive, and that is exactly what this progress indicator is. Pink implies “You are editing this section”, whilst grey implies “You are not editing this section”. Pink is also a brand colour, meaning that it doesn’t just stand out, but helps to create a coherent aesthetic. 

We do have one suggestion for Sigma Beauty though. Currently, there is no discrepancy in colour for whether you have completed a section or have yet to get onto it. Both functions are represented using grey. Adding another colour into the mix to distinguish between the two would make the process even clearer.

Remove Visual Distractions

Although it may seem counterintuitive after we have discussed the importance of being visual, we recommend removing any unnecessary visual features that may distract customers from the checkout process. This includes replacing or removing the header, footer, and main navigation bar.

The eCommerce checkout flow should be linear. Giving the user access to a navigation bar may be disruptive as it allows the user to step out of the checkout process. This increases the likelihood of an abandoned cart. As Smashing Magazine eloquently puts it:

“The checkout process is different to the rest of the browsing experience on your site. During this process your customers aren’t shopping — they’re making the purchase. This means all the browsing controls are redundant here and would only distract your customers from the task at hand. Eliminate these unnecessary elements — e.g. product category links, top products, latest offers, and so on — to keep the interface simple.”

Keep the Back Button Functional

If you are going to remove many of the navigational features from your checkout, you must keep the browser back button functional. It is what users will intuitively try to click to return to the previous step of the checkout process. Despite this, Baymard Institute found that 57% of sites do not support back button use for navigating to any previous checkout view.

This is a massive problem because users expect the back button to do so. Designing a site is all about aligning a user’s expectations with reality. Anytime where these two things do not match up, you are disrupting the payment process and may lose out on a sale.

Back button functionality is even a problem for accordion-style checkouts. Although they take place on a single page, Baymard Institute found that users still perceive them as a multi-step process. You must ensure that the back button takes the user back to the previous checkout step, regardless if it is on the same or a different page!

Add a Guest Checkout Option

14% of users abandon their cart because there is no guest checkout option.
12% of users abandon their cart because they are asked to provide too much information.

Account creation adds another layer of time and effort to the checkout process, which can be very offputting. It may also involve asking the user to divulge more information than they would like, which is another problem.

The solution? Add a guest checkout option!

Users want a convenient, quick, and easy checkout without any commitment involved, especially because they will not immediately trust a business with their personal data. This means that account creation must be an option rather than a requirement.

Nonetheless, you should still be prompting your users to create an account with your site. Subtly communicate the benefits of signing up through CTAs such as “Sign Up for Faster Checkouts” or “Sign Up for Special Offers”. Give users the option to create an account again after they have completed their purchase. An account will help foster consumer trust, brand loyalty, and ultimately result in more sales.

Ralph Lauren Example

Ralph Lauren has found the perfect balance between integrating a guest checkout option and promoting account creation. After you click “Proceed to Checkout”, an intermediary page appears before the two-page checkout begins. Three bold CTAs outline the three possible options:

1. Checkout as Guest
2. Create an Account
3. Sign In

The CTA buttons are all the same size and colour, and thus there is no distinction between them in the visual hierarchy. The user is free to make their own decision.

Importantly, however, on the mobile version of the site, “Checkout as Guest” appears above the fold and is the first option available. Guest checkout should be the most prominent option as it is the most convenient for the customer. Perhaps Ralph Lauren could make the guest checkout button stand out slightly more than the other two on desktop.

Grabbing an email early in the checkout process – as Ralph Lauren does – is a smart move. You are never going to convert everyone that arrives at the checkout page, but with their email, you will be able to launch an abandoned cart email series. Even to those who checkout as guests.

Boots Example

Whilst Boots makes it very easy to checkout as a guest, they also use the opportunity to promote the benefits of (optional) account creation. Using icons and text snippets, the benefits are communicated both visually and verbally.

Having already explored the impact of dual-coding, we know that this is an effective way to present a case.

Use Trust Signals

Building consumer trust is integral to eCommerce. If customers are not comfortable giving you their personal and financial information, they will not buy anything from you. It’s as simple as that.

Given that an estimated 60-80% of traffic to your eCommerce site are first-time visitors, trust is something that you must earn. Trust signals on your checkout page will help you do so. Security badges, customer reviews, and money-back guarantees are all indicators that let your customer know they are in good hands.

Trust Badges to Display Payment Options

7% of users abandon their cart due to insufficient payment options.

You must also ensure that you are providing enough payment options in the first place. If people are unable to see their desired method of payment at checkout, they could very easily abandon their cart. Asos, for instance, include:

• A variety of credit/debit card options
• PayPal
• Apple Pay
• Klarna
• Clearpay

Each of these payment methods has a corresponding trust badge. When you integrate any of these payment methods, you receive source code and a downloadable image of the trust badge. Make sure you put it on your site.

Econsultancy conducted a survey to find out what factors affect trust when visiting a website. 61% of respondents said they had not made a purchase – at least once – because there were no visible trust badges.

Trafiki Client Example

Trust badges during the checkout process are very important, but they must be suitably placed and sized correctly. Following a recent experience we have had with a client’s shopping cart page, we will explain why.

Using screen-recording technology, we found that many users mistakenly thought that the trust badges provided were clickable.

This was because they were highlighted and appeared above the fold on mobile. The fact that clicking these icons did not take users to the checkout process seemingly frustrated them and led directly to some abandoned carts. 

Whether it is on your shopping cart or checkout page, the same rules apply. You must think carefully about the size and placement of trust badges, just as you would with CTAs or any other visual feature.

By comparison, Asos’ mobile checkout page has got it spot on. The trust badges appear at the very bottom of the page under “Payment” and are clearly decorative.

Asos also includes a dedicated Apple Pay CTA button to foreground the easiest checkout possible. You can checkout simply using touch ID (on supported Apple devices).

eCommerce UX Audit

Different industries may have different nuances and requirements, but the same UX principles can be applied across the entire eCommerce world. This blog gives our readers a sneak peek at the methodology behind an eCommerce UX audit, but is by no means exhaustive.

We are partners with Mouseflow and, in turn, use this industry-leading website analytics tool to conduct our user research. This research stage – which allows us to study real-life user behaviour – is crucial to our UX audit process. Click here to download this software (with a FREE 14-day trial!) and start learning about your audience today.

The checkout flow is only one aspect of your eCommerce site that you need to pay close attention to when it comes to UX. There are countless other stages in the buyer’s journey. We have also written blogs on:

• Product page UX: if you want to find out how to get customers onto your shopping cart page in the first place.
• Shopping cart UX: if you want to find out how to persuade them to get started on the checkout process.

This blog hopefully helps you understand how you can get customers to hit that all-important “Place Order” button!

If you’re looking for something broader in scope, check out our guide on how to improve the overall user experience of your eCommerce website!

Trafiki is a London-based specialist eCommerce marketing agency that provides UX audits and ongoing UI & UX design services to businesses looking to grow. We offer a UX audit service that is detailed, comprehensive, and utterly tailored to your brand. Moreover, it is a service specially designed for eCommerce sites.

We will help you create a website that not only looks great but is optimised for conversions. Book a FREE 30-minute Discovery Call today!