Checkout Page Design: Best Practices, Tips & Real-Life Examples

Any eCommerce business should know how to optimize their checkout pages so they could encourage users to make their purchases. Although the odds might not be in your favor, according to the statistics, a great checkout page design can make a difference and overcome the numbers. This is why today, I’ll walk you through the best practices for making a checkout page that converts. Then I’ll sprinkle a few valuable design tips and end with real-life examples that you and I can break down together. Ready to checkout?

The Checkout Page Design Guide: Overview

• Why Is Your Checkout Page That Important?
• The 5 Reasons Why Users Abandon Cards
• Best Practices 
• Design Tips
• 8 Real-Life Examples

Short answer, cart abandonment. Visitors leaving your website with items still in their cart without making the purchase means lost sales.

Did you know that the average shopping cart abandonment rate is just under 70%? According to Baymand Institutes’ statistics based on 44 different studies, seven out of every 10 shoppers won’t complete their transaction. In addition, another research by Barilliance points out that the cart abandonment rate goes as high as 80.79% on phone devices.

This means the odds are already against you when your potential customers land on your checkout page. However, even with the grim statistics in mind, you can still reduce cart abandonment and maximize your sales if you know exactly how to optimize your checkout page design.

 

When it comes to checkout page design, it’s important to focus on the cause rather than the symptoms. There are many reasons why users abandon their carts, and a large portion of them have nothing to do with your checkout page optimization. These are cases when users are making price comparisons, exploring options, saving items for later, or just browsing. However, let’s talk about the potential reasons for cart abandonment that we have at least some control over.

 

1. High Extra Costs

There is a running gag that anyone would buy a $30 product with free shipping instead of a $25 product with 5% shipping. People hate paying for shipping in general, so imagine how frustrating would it be if there’s not only shipping but a very expensive one. Especially for international shipping with additional taxes and fees, sometimes the extra costs might even exceed the price of the product itself. If a user likes an item that costs $40 and goes to the checkout page only to find out that he has to pay $90 in total because of the extra costs, they will 9 out of 10 close the tab and call it a day.

 

2. No Guest Checkout Option

Unless it’s a very popular platform like Amazon or Etsy, which is already proven to be secure and has a lot to offer for future purchases, people are very skeptical about giving any sort of information to a small website that they see for the first time. Even if it’s not about security and trust, it’s often a matter of time management. Making a registration takes time and sometimes it’s not worth the trouble for buying something small or just for a one-time-only purchase. Ironically, users would prefer to spend the same amount of time looking elsewhere.

Many online shops have solved this issue by allowing guests to simultaneously create an account by the end of the checkout as a background process. The checkbox “Create an account” is more attractive as the user doesn’t have to do anything. The already given data is enough for the website to automatically create an account.

 

3. Slow Delivery

It’s a general rule that those who compromise on price, don’t compromise on time and the opposite. In some cases, users are willing to pay a higher price, even for shipping, but they would rarely agree to a 2-months delivery time. A very good example would be AliExpress international shipping. You will buy a $2 product with free shipping and you’re willing to wait for two months. It’s $2 after all, even if the product gets lost and you don’t get your money back. But what if you buy a $500 item?

 

4. Long and Complicated Checkout Process

A page filled with multiple fill-in forms looks scary and can make anyone think twice before doing it. Sometimes online eCommerce shops need more data, especially for guest checkout. However, they can make it look simple with some UI/UX skills. For example, they turn the checkout process into a small multi-step checkout slider.

 

5. Not Enough Payment Methods

Most people don’t trust new sites with card information. They usually rely on other safer methods such as PayPal, AmazonPay, Google Pay, Apple Pay, or cash on delivery. Of course, most users will have limited usage of methods, so if they don’t see the option to pay with PayPal, they most certainly won’t make an Apple Pay account just for the occasion.

 

The checkout page gives customers the opportunity to enter payment details and complete their orders. Since this is already a long process that requires lots of important personal data, you have to make sure your checkout is secure, fast, efficient, and intuitive.

Now when we know the exact reasons why people abandon their carts, it’s easier to come up with solutions. Here I’ll list how you can turn the odds in your favor and build trust.

• Allow Guest Login: Give your users the opportunity to make one-time purchases instead of forcing them to make an account. You can ask them to register after the sale.
• Enable Pre-filled Fields for Registered Users: Nothing as satisfying as getting your forms auto-filled. Make sure your users don’t need to complete multiple fields a second time. Great experience!
• Offer Multiple Payment Options: The more payment options you provide, the more users would complete a purchase. Always offer PayPal.
• Input Error Notification: Ensure the users know they’ve entered incorrect data immediately, not after an unsuccessful checkout.
• Free Shipping: It’s not always possible to offer, however, it’s a winning strategy. Most users are encouraged to buy more products if free shipping is included.
• Eliminate Hidden Charges: If possible, provide your users with shipping and tax information upfront. You can add a calculator/estimator within the shopping cart.
• Visible Cart at All Times: Give your users the option to access their cart via a drop-down menu, instead of having to navigate to e separate page.
• Include Product Summary: Provide a short summary of the product during the checkout. It can remind them of the item’s quantity, size, color, etc.
• Confirm Item Availability: If a user goes through the trouble of adding an item to a cart, going to checkout, entering multiple fields of information, and then finds out the item is out of stock, the chance is the shop has lost this client forever.
• Include Approximate Delivery Date: Provide an estimate for when their order will arrive. This builds trust.

 

With the technical part out of the way, time to focus on the checkout page design itself. Although there isn’t an established template to follow, there are a few valuable tips that will turn the tables and help you plan the greatest checkout page design experience for your users.

• Mobile-First Design: Most of your users will browse through your eCommerce on their mobile devices. This is why the design of your whole website, not just the checkout page, should implement this approach. With mobile-first, it means that the design is made directly for mobile devices and from there, it’s adapted for tablets and desktops.
• Eliminate Distractions: Consider removing all unnecessary elements that would distract your users from focusing on the checkout process. This includes header and footer, menu options, unneeded buttons, or even related products.
• Simplify: Refine your design as much as possible to prevent a long complicated checkout process that would scare away your users. This means to design a convenient, clear process with as few fields as possible and remove anything unnecessary.
• Display Trust Badges: These simple visual indicators of trust give customers more confidence in your eCommerce and the security it provides.
• Progress Indicator: If you prefer to use multiple short pages or a small multi-step checkout slider, include a progress indicator. It will outline the step process for your users and indicate the exact stage they are currently at.
• Multiple Checkout Buttons: For already registered users, checkout buttons such as “PayPal Checkout” or “Visa/Mastercard Checkout” give a fast, easy, and efficient process.
• Quick quantity and Remove Products Options: Make it easy to update product quantity and remove items. You can do this with tick boxes.

 

For this section, I went hunting in the wild for 8 checkout pages to use as examples. Let’s go through all of them and make a quick review of their strengths and weaknesses.

 

1. Nordstrom

Here we have Nordstrom’s checkout page design that nails in in terms of clean consistent and simple design with as few fields as possible. When you decide to check out your cart, you’ll be redirected to a page with sign-in to check out, and the option to check out as a guest. With the latter, you have two different buttons “Guest checkout” and “PayPal Checkout” which makes it very easy.

Strengths: 

• Mobile-friendly design ✔️
• Simplified and clean design ✔️
• Guest Checkout option ✔️
• Multiple Checkout Buttons ✔️
• Pickup or Delivery Options ✔️
• Free gift options are available ✔️
• Multiple Payment Options (Card and PayPal) ✔️
• Estimator ✔️
• Quick Customer support ✔️
• Pick Up option ✔️

Weaknesses:

• No trust badges ❌
• There is no order summary❌

 

2. GraphicMama 

GraphicMama definitely covers the best practices in terms of design with this clean and easy-to-follow checkout process. It’s a very great design decision for the desktop version to leave the order summary as a sticky card alongside the estimator so the user would be able to view it at all times while filling the form. On the downside, there is no guest checkout.

Strengths: 

• Mobile-friendly design ✔️
• Sticky Card with Order Summary ✔️
• Simplified and clean design ✔️
• Multiple Payment Options (Card and PayPal) ✔️
• Estimator✔️

Weaknesses:

• No trust badges ❌
• Disabled guest checkout ❌

 

3. Amazon

Since Amazon is a giant platform with multiple sellers, it’s natural to keep things more complicated. For example, in many cases, the user won’t even know the shipping price until finalizing the checkout process due to different reasons. As for the checkout page itself, it offers a fairly quick and easy 4-steps experience with a progress bar. The process features Address Confirmation, Shipping & Payment, Gift Options, and Place & Order.

Strengths: 

• Mobile-friendly design ✔️
• 4-steps experience with a progress bar ✔️
• Multiple Payment Options (Card, Gift Cards, Amazon Store Card, Personal Checking Account) ✔️
• Quick Customer support✔️

Weaknesses:

• Disabled guest checkout ❌
• No estimate until the end of the checkout process ❌
• No order summary ❌

 

4. Etsy

Everyone’s favorite place to go for hand-made gifts crafted by creative people. Etsy gives a pleasantly intuitive experience with no distraction and no unnecessary steps. Clean and simple.

Strengths: 

• Mobile-friendly design ✔️
• Simplified and clean design ✔️
• A multiple-step process with a progress bar ✔️
• Multiple Payment Options (Card and PayPal) ✔️
• Order Summary ✔️

Weaknesses:

• Disabled guest checkout ❌
• No trust badges ❌

 

5. Samsung

This is a textbook example of an efficient checkout process by Samsung. Just for less than a minute, I chose a random item, went for the checkout, and saw everything I wanted to see. Free shipping, guest checkout, 5 express checkout options with corresponding buttons. Do I need a MultiControl Kit? No, but I might as well think about it. The experience is that good. On the downside, there are no trust badges, however, Samsung is a trusted company.

Strengths: 

• Mobile-friendly design ✔️
• Enabled guest Checkout ✔️
• Simplified and clean design ✔️
• Multiple express checkout options with buttons ✔️
• Multiple Payment Options (Card, PayPal, Amazon Pay, Google Pay) ✔️
• Order Summary ✔️
• Estimator ✔️

Weaknesses:

• No trust badges ❌

 

6. H&M

Another lovely experience in the checkout department by H&M. The quick quest checkout offers expandable sections for the user’s information, visible order details, and an estimator.

Strengths: 

• Mobile-friendly design ✔️
• Enabled Guest Checkout ✔️
• Simplified and clean design ✔️
• Multiple Payment Options (Card, PayPal) ✔️
• Order Summary ✔️
• Estimator ✔️

Weaknesses:

• No trust badges ❌

 

7. Anthropologie

Anthropologie is a big lifestyle eCommerce with categories for clothing, beauty products, home decorations, garden and etc. It offers a clean from distractions single checkout page with options to get the items shipped or to pick them up.

Strengths: 

• Mobile-friendly design ✔️
• Enabled Guest Checkout ✔️
• Simplified and clean design ✔️
• Multiple Payment Options (Card, PayPal) ✔️
• Estimator ✔️
• Pick Up option ✔️

Weaknesses:

• No trust badges ❌
• No order summary ❌

 

8. Baby Shop

Next is the Baby Shop for premium baby clothing and gear. It’s another textbook example of an efficient checkout page design that encourages the user to become a buyer.

Strengths: 

• Mobile-friendly design ✔️
• Enabled Guest Checkout ✔️
• Multiple Delivery Options ✔️
• Simplified and clean design ✔️
• Multiple Payment Options (Card, PayPal) ✔️
• Estimator ✔️
• Trust Badges ✔️
• Order Summary ✔️
• Quick Customer Support ✔️

Weaknesses: 

• None. The design follows the best practices. ✔️

 

In Conclusion

To many businesses, shop cart abandonment is a great issue. In many cases, this isn’t even something businesses can control. However, checkout page optimization can drastically turn the odds in your favor and you can increase conversion rates on your checkout page by helping to give your shopper everything they need.

I hope you enjoyed today’s guide and got inspired to never cease to improve your designs.

In the meantime, why not check for more related insights on web development and web design?

• User Dashboard: Essentials, Tips and Examples [+ Free Templates]
• 11 Website Layout Ideas for Efficient Design [+ Amazing Examples]
• The 8 Best User Interface Fonts with Real-Life Examples