How to Optimize Checkout Page Design to Prevent Checkout Abandonment

Bolt Team September 27

Shopping cart and card icon

Every ecommerce proprietor has this problem: someone comes to your store, puts one of your products in their cart, and then comes to the checkout page. They’re almost done making the purchase, but if your checkout page isn’t thoroughly optimized for conversions, there’s a fairly good chance that the potential customer will stay in the “almost” stage and never complete the purchase.

The statistics don’t look good, either. Shopping cart and checkout abandonment are an increasingly significant issue for ecommerce retailers. As of 2018, shopping cart abandonment rates averaged around 76 percent for ecommerce businesses, meaning three out of every four visitors will abandon their cart before completing a purchase. Unfortunately, many of these abandonments occur on the checkout page.

The reality is that a well-designed checkout page is one of the most important components of a successful ecommerce site. If you’re struggling with above average checkout abandonment rates and less than satisfactory conversion rates, it’s probably due to a poorly structured checkout process.

Let’s look at the best ways to improve your checkout design and increase overall conversion rates. In this article, we’ll be covering:

Let’s jump into the strategy of optimizing checkout page design.

11 proven tactics to optimize checkout page design

Optimizing the checkout process typically starts by dealing with areas where customers have the biggest problems. By focusing on these common problem areas, you can eliminate a significant amount of the friction that customers may feel when they check out.

From the customer’s perspective, these problems include:

  • The checkout process was too complex
  • There were surprise additional costs (shipping, taxes, fees, etc.)
  • They were forced to create an account in order to check out
  • They couldn’t see or calculate the total cost up front
  • There were website errors
  • The website didn’t appear to be trustworthy for credit card info
  • The delivery timeline was too slow
  • The return policy wasn’t fair
  • The website didn’t include their preferred method of payment

So, how do you deal with these pain points? While there’s no singular solution to all of these issues, there are a number of tactics you can utilize to help remedy these critical problem areas.

1. Start by optimizing your mobile checkout experience

Amazon shopping on mobile device

A large percentage of your shoppers will be using mobile devices to browse your site, so it’s important that your checkout process is optimized to suit the needs of mobile users. Consumers reportedly spent $517.4 billion online with U.S. merchants in 2018. That’s a 15 percent increase from online spending in 2017, according to Internet Retailer’s analysis of industry data and historical U.S. Commerce Department figures.

Don’t miss out on these significant profit gains. Make sure your site is dynamic and adapts to a wide range of mobile screen sizes. If your checkout process is difficult to navigate, or there are too many steps to complete, you’re guaranteed to lose mobile users.

2. Set clear expectations with good checkout form field guidelines

Every element of your checkout process should be clear and simple to understand. One way to do this is to include form field guidelines and/or descriptive text for as many fields as possible. In other words, tell people exactly what should go in each field – don’t make them guess.

Checkout fields

If you have specific parameters for fields (such as dates or email addresses), include instructions. Nothing is more frustrating for customers than not knowing which input field is failing, or why. If there are errors in the input fields, highlight those fields for the customer so that they can quickly fix them.

3. Aim to reduce clicks/steps as much as possible

The fewer the number of clicks/steps involved in your checkout process, the more likely it is that customers will complete it. Do whatever you can to reduce the number of actions required to check out. For example, make the cart automatically save changes, instead of requiring the customer to click an “update cart” button. Another thing you can do is implement address verification tools, such as auto-filling secondary fields (like ZIP codes).

Reduce the number of pages involved in your checkout process to significantly simplify the experience. There’s a reason why every major ecommerce brand has adopted a one-page checkout: it provides for an overall better user experience by drastically reducing the number of pages that a customer needs to jump through.

4. Always provide a guest checkout

Few things are more frustrating for customers than being forced to create an account. Reduce friction by allowing people to check out in guest mode without signing into an account.

Apple.com guest checkout option

Just make sure you capture their email address at some point during the checkout process. This ensures that, if they do leave your site before completing their purchase, you can still enroll them in an abandoned cart email sequence. Enabling guest checkout is a simple and effective method for streamlining the path to purchase on your ecommerce site.

5. Display the total price up front

Visitors don’t like surprises, especially when it comes to the total price they’ll be paying for their order. Proper checkout page optimization involves being very clear about any fees (shipping, taxes, etc.) that will be incurred. If you’re upfront about any fees that are included with the order, your customers will appreciate you for it.

6. Don’t include a “discount code” field

Refrain from including a discount code field, unless you’re running a special promotion that requires the use of a code. Including a blank promotion code field will prompt many users to open a new tab to search the Internet for a free list of discount codes to try on your site.

There are two main reasons why you don’t want this:

  1. It takes customers’ focus away from your site. As soon as they open a new tab, the likelihood they’ll return to your site to complete their order is very low.
  2. If the customer happens to find a viable promo code on the Internet, that affects your margins. It’ll start to add up if customer after customer is getting a discount on their order because you gave them the option to input one.

7. Remove navigation from the remaining checkout pages

Amazon checkout removes site navigation options

Once a person has reached the checkout page, you don’t want them navigating away from it to look at your sale items. We recommend removing your normal site navigation options from the checkout page. This will help eliminate any distractions that could potentially take the customer away from completing their order.

8. Display trust seals throughout the checkout process

Many brands put trust seals in the footer of every single page. This is probably unnecessary, and can even serve as a distraction. However, displaying trust seals throughout the checkout process can potentially reduce your cart abandonment rate by a noticeable amount. Giving customers the assurance of security while they check out is extremely important, as it will impact how customers perceive the overall security of your site.

On the checkout page, ensure that you have SSL security seals. Additionally, keep visitors on the same domain. Redirecting people to a new domain confuses visitors, and may make them hesitant to enter their credit card info. Finally, keep the site design consistent across the entire checkout process. If the checkout pages feel radically different than the rest of the site, it can cause visitors to hesitate and possibly abandon the checkout process.

9. Integrate alternative payment options

In order to accommodate as many people as possible, offer a variety of payment options. Consider having the following payment options available on your site:

  • All major credit cards
  • PayPal
  • Digital wallets (e.g. Apple Pay, Google Pay, Amazon Pay)
  • Buy-now-pay-later (BNPL) services (e.g. Klarna, Afterpay, Sezzle, Laybuy)

In addition to digital wallets, BNPL services are also becoming a commonplace element on many ecommerce websites’ checkout pages. Looking at recent data about BNPL arrangements, growth for these service providers has almost quadrupled in terms of active users and monthly transaction value. In 2015-2016, there were an estimated 400,000 users engaging in BNPL arrangements, but in 2018 that number rose to over 2,000,000 users. If this growth continues into 2020, we’ll begin to see more and more online retailers jump on this “buy-now-pay-later” trend.

10. Implement live chat

Adding a live chat to your site will help optimize your checkout experience. It allows you to answer any questions that come up during the checkout process, minimizing the chances of a person abandoning their cart. Make it easy for customers to get questions regarding your return policy or shipping details answered quickly, without them having to leave the checkout page.

11. Display a progress indicator

Amazon checkout progress tracker

A progress indicator displayed prominently on your checkout page allows people to see exactly where they are in the checkout process and how any steps they have remaining. One of the biggest reasons why customers abandon their cart is due to time constraints. If there’s a progress indicator clearly displayed, your customers will be much more likely to put up with a checkout process that’s longer than one page because they can see the end goal.

So, now you have an understanding of the basics, but how can you actually implement these checkout page best practices in your ecommerce checkout? You need some checkout page design inspiration, and we’ve got it below.

10 highly-effective checkout page examples

One thing that’s important to remember regarding the optimization of your checkout process is that there’s no formula for getting the perfect checkout page. You’ll need to experiment with a variety of different iterations on your checkout page before you can determine what works best for your site.

We’ve collected a few examples of the best checkout page designs that we think are a great starting point if you’re interested in improving your checkout process.

1. Bombas – Free shipping progress indicator

Example of Bombas checkout with free shipping progress indicator

Bombas has an excellent checkout process that takes the progress indicator technology a step further. Their progress bar shows customers how far away they are from getting free shipping on their orders, encouraging customers to spend more money in order to earn free shipping.

If you offer free shipping on orders over a certain cart amount, provide your customers with a progress bar to help increase their motivation to fulfill the order. This approach is much more effective than simply stating on your cart page that free shipping is only available if you reach a certain cart minimum.

2. Overstock – Provide multiple payment options

Example of Overstock checkout with payment options provided

Consumers have come to expect a variety of different payment options from ecommerce retailers. Overstock takes this to the extreme by offering a multitude of payment options for their customers. You can choose between using a credit/debit card, Paypal, Google Pay, an Overstock credit card, or even alternative payment solutions like Bitcoin and Klarna.

Some UX designers may consider this an exhaustive approach, but if your target customers use these payment options frequently, you should be offering them. This would be a great area to conduct user testing in order to identify the most popular payment methods for your target customers.

3. Nike – Guest checkout option

Example of Nike checkout with guest checkout option

Never force customers to register or create an account. Nike’s checkout is a great example of a checkout that makes it easy to enable guest checkout. Simply click the ‘Guest Checkout’ button to proceed to an order form that allows you to enter shipping and billing information, and then finalize your payment.

4. Nordstrom – Display total price up front

Example of Nordstrom checkout with total price displayed

If you’re looking for a good checkout page template, Nordstrom is a stellar example. Their checkout page prominently displays a payment breakdown, showing the cost of the item, shipping fees, duties & taxes, and a final total with all fees included. This keeps the checkout process clear, ensuring customers know exactly what they will be paying to complete the sale. Having this information clearly and prominently displayed helps customers proceed through checkout.

5. Bootstrap – Clear order form fields

Example of Bootstrap checkout page with clear order form fields

Bootstrap’s checkout page sample follows best practices for order form fields, making it clear how to proceed through checkout and simple to know where to input information. Information flows in a systematic way, guiding users along the process clearly. Form fields are sized according to the information being input, so they don’t waste any space on the checkout page. Better still, this makes it easy for customers to input and review their details.

6. Asos – Display trust badges and seals

Example of Asos checkout with trust seals displayed

Customers are more likely to complete payment on a platform that they trust has high-quality security and customer protection. A good sample checkout page displays trust seals and badges throughout the checkout process, which gives customers confidence that their billing and shipping information will be properly protected when shopping online. Providing these signals builds trust with the customer, motivating them to buy.

7. Adidas – Remove navigation from checkout page

Example of Adidas checkout with navigation buttons removed

Once a customer is on a checkout page, you want to keep them there and guide them through the rest of the checkout. Remove website navigation options to keep customers from going back to your store and browsing for more items – keep customers focused on checkout. Cycling customers back to your marketplace can result in checkout abandonment. Instead, avoid distracting them at checkout by removing any options other than entering payment information and finalizing the sale.

8. Verizon – Optimize mobile checkout experience

Example of Verizon checkout optimized for mobile

As ecommerce has become a more popular way of shopping, over half of online shopping has moved to mobile. Any checkout page you have should be optimized for mobile checkout, attempting to fit the style and sequence as closely as you can. Verizon’s checkout page includes all necessary order form fields, keeping them concise and clear to make checkout simple and accessible on mobile. Be sure to streamline checkouts so they match stylistically and structurally.

9. Under Armour – Reduce steps and clicks to checkout

Example of Under Armour checkout with reduced steps and clicks

Under Armour’s clear and guided checkout is an ideal example of a simple checkout. Summary information is provided on the right side of the screen, making that information accessible throughout the entire checkout. No unnecessary steps or clicks are included, ensuring that customers can follow through to checkout as fast and frictionless as possible.

10. Made – Checkout progress indicator

Example of Made checkout with progress indicator

Made has a simple and effective checkout page that uses a progress indicator bar to show how far along the customer is in the checkout process. If you opt to not use a one-page checkout setup, a progress indicator is essential for showing your customers how close they are to the end goal.

20 percent of consumers said their main reason for cart abandonment was because the checkout process was too long and confusing. Implement a progress indicator into your checkout process, and your customers will thank you for it.

It’s time to start optimizing

Remember, three out of every four ecommerce carts are abandoned. You can significantly reduce that number by focusing on creating the ideal checkout experience, including making sure you create an optimized express checkout. If you do that, your bottom line will see the benefits.

If you’re looking for actionable ways to optimize the conversion rate of your website, it could be time to consider a conversion rate optimization program. Optimizing your website isn’t a guessing game. If you want impactful, long-term results from your optimization efforts, you’ll likely need outside expertise to help inform your decisions.

The Good offers a free landing page assessment for ecommerce sites that are interested in optimizing their sites to improve retention and conversion rates. In their assessment, they help identify key areas of your site that need improvement, and help develop a plan of attack that will meet the needs of your unique business.

If you’re looking to make sure more sales go through once you convert those paying customers, you’ll want to focus on a good fraud detection tool like Bolt that offers a guarantee for their fraud detection.

Jon MacDonald is founder of The Good, a conversion rate optimization firm that has achieved results for some of the largest online brands including Adobe, Nike, Xerox, The Economist, and more. He regularly contributes content on conversion optimization to publications like Entrepreneur and Inc. He knows how to get visitors to take action.

Want to see a 5-minute demo?