{"id":102905,"date":"2023-02-17T13:35:32","date_gmt":"2023-02-17T21:35:32","guid":{"rendered":"https:\/\/thegood.com\/?post_type=insights&p=102905"},"modified":"2024-12-03T11:51:11","modified_gmt":"2024-12-03T19:51:11","slug":"checkout-page-designs","status":"publish","type":"insights","link":"https:\/\/thegood.com\/insights\/checkout-page-designs\/","title":{"rendered":"10 Of The Best Checkout Page Design Examples to Inspire Your Own"},"content":{"rendered":"\n

It\u2019s easy to neglect your checkout page. You might assume that if a customer reaches checkout, you\u2019ve scored the conversion. But that isn\u2019t always the case.<\/p>\n\n\n\n

Just because a shopper fills their shopping cart and initiates checkout doesn\u2019t mean they will complete the purchase. In fact, 70% of checkouts are ultimately abandoned<\/a>. There\u2019s plenty of opportunity to lose a sale if you don\u2019t optimize this part of the customer experience.<\/p>\n\n\n\n

What does a great checkout page look like? In this article, we review our favorite checkout page designs. We explain why we like them and how they could be improved.<\/p>\n\n\n\n

What Makes a Good Checkout Design?<\/h2>\n\n\n\n

Your checkout page represents a critical moment where your shoppers become customers, so it deserves your thought and attention.<\/p>\n\n\n\n

The best ecommerce checkout designs are simple, clear, and intuitive. They give shoppers all the information they need to get through checkout quickly, easily, and securely. The process should be clear of distractions, disruptions, or points of friction.<\/p>\n\n\n\n

Your checkout page should inhabit all of the qualities of good visual design<\/a>. The aesthetics of the page should support efficiency, accessibility, and a good user experience. It should use principles like hierarchy, scale, and contrast to make the page easier to use.<\/p>\n\n\n\n

Furthermore, the best checkout designs are optimized for conversion. You should measure the page\u2019s performance, experiment with new ideas, and implement new optimizations regularly.<\/p>\n\n\n\n

To learn more about improving your page, check out our guide on optimizing your checkout page<\/a>. We also recommend reviewing our\u00a0guide on mobile checkout design<\/a>\u00a0and our primer on form design principles<\/a>.<\/p>\n\n\n\n

The 10 Best Checkout Page Examples<\/h2>\n\n\n\n

The following are some of our favorite checkout page examples. Use these as inspiration to design and optimize your store\u2019s checkout page.<\/p>\n\n\n\n

1. Infinite CBD<\/h3>\n\n\n\n
\"Infinite<\/figure>\n\n\n\n

What we like:<\/strong><\/p>\n\n\n\n

Infinite CBD uses a common two-column checkout design that\u2019s clean, simple to follow, and looks good on mobile devices. The contents of the cart are available, but not in the way. The minimal checkout form asks for just the right amount of information to keep the checkout process simple.<\/p>\n\n\n\n

There aren\u2019t any non-checkout elements to disrupt the transaction. It also uses good visual design to separate the shopping cart and payment details fields from the primary form. The call-to-action is obvious, but slightly gray until the form fields have content. The checkout progress indicator at the top is a great tool to keep customers oriented.<\/p>\n\n\n\n

What could be better:<\/strong><\/p>\n\n\n\n

We\u2019d like to see more payment options, like Google Pay or PayPal, as well as a way to save progress in case customers want to come back. The page could also use some trust symbols and badges to inspire confidence and a minimal header without so many distracting links.<\/p>\n\n\n\n

2. Allbirds<\/h3>\n\n\n\n
\"Allbirds<\/figure>\n\n\n\n

What we like:<\/strong><\/p>\n\n\n\n

Allbirds is built on Shopify, which means it uses Shopify\u2019s checkout flow. Naturally, Shopify knows what they\u2019re doing when it comes to checkout optimization. This checkout design is stripped-down, minimal, and clean. There\u2019s no header, footer, or menu full of links to distract the customer.<\/p>\n\n\n\n

We like the alternative payment options at the top of the page that lets customers skip to checkout without dealing with the form. They smartly grayed out the coupon field until a value is inputted so it doesn\u2019t confuse customers from clicking the \u201cContinue to Shipping\u201d call-to-action.<\/p>\n\n\n\n

What could be better:<\/strong><\/p>\n\n\n\n

This is the first page of a multi-page checkout design. For such a minimal checkout design, the multi-page checkout process could probably be consolidated into one. However, it\u2019s good that all three pages use the same layout so there\u2019s no confusion.<\/p>\n\n\n\n

The breadcrumbs that indicate progress should be more obvious. It\u2019s not apparent right away that this page is not a one-page checkout.<\/p>\n\n\n\n

Finally, there\u2019s very little branding because it\u2019s a Shopify site. This isn\u2019t a huge problem, but you don\u2019t want your site to feel like every other store. Some light branding would be good for the user experience.<\/p>\n\n\n\n

3. Samsung<\/h3>\n\n\n\n
\"photo<\/figure>\n\n\n\n

What we like:<\/strong><\/p>\n\n\n\n

Samsung has a unique checkout design. Unlike many pages that make all of your fields visible, Samsung only shows you what they need at the time.<\/p>\n\n\n\n

For instance, you won\u2019t see any billing address fields until you select a payment method. If you select an express checkout option, you won\u2019t see any fields at all. This makes the page remarkably simple because there\u2019s only one choice to make at a time.<\/p>\n\n\n\n

This checkout design assumes you want to checkout as a guest and offers an option to sign in. Guest checkout capabilities are a great way to expedite the process.<\/p>\n\n\n\n

Cart contents, taxes, shipping, and delivery data are clear and transparent. The \u201cChat with an expert\u201d link opens a live chat window. This is a great way to resolve last-minute objections or friction.<\/p>\n\n\n\n

What could be better:<\/strong><\/p>\n\n\n\n

While the header has been minimized properly, the footer is packed full of links that could distract customers from completing the transaction.<\/p>\n\n\n\n

When the page loads, the four colorful buttons make it seem like Samsung only offers four payment methods. The \u201cPay with a card\u201d option deserves similar attention. At the very least, it should be grouped with the other payment options so it doesn\u2019t seem unrelated.<\/p>\n\n\n\n

4. Bed Bath & Beyond<\/h3>\n\n\n\n
\"Bed<\/figure>\n\n\n\n

What we like:<\/strong><\/p>\n\n\n\n

As a retailer of more than 50 years, it\u2019s no surprise that Bed Bath & Beyond has an effective checkout process. The message at the top about earning rewards is a great way to make customers feel like they\u2019re getting a little extra. It also encourages opening an account.<\/p>\n\n\n\n

The visual design is excellent. Dividing each section with background colors creates separation, which makes it easy to follow. Instead of slogging through a long form, it feels like less work. The progress indicator is simple and reassuring and there are no distractions in the header and footer.<\/p>\n\n\n\n

\u201cEmail for order tracking\u201d and \u201cPhone for delivery contact\u201d is superb copywriting. Now those details feel like they\u2019re part of the transaction and not for marketing purposes.<\/p>\n\n\n\n

\u201cGet text alerts for your order on your mobile\u201d is a great little feature to keep your customers engaged and build an SMS-based relationship. We also like that the \u201cDetails\u201d link by the shipping cost opens a popup with valuable shipping information. This prevents the customer from leaving the checkout to learn about shipping.<\/p>\n\n\n\n

What could be better:<\/strong><\/p>\n\n\n\n

There’s no way to contact support or get answers to any last-minute questions. This is unfortunate because Bed Bath & Beyond probably has enough customer support resources to do this well.<\/p>\n\n\n\n

We don’t like that you have to visit the second page to input your payment information. This could probably be squeezed into the first page to create a one-page checkout experience.<\/p>\n\n\n\n

Bed Bath & Beyond should definitely have some trust symbols or badges from reputable security services, the Better Business Bureau, or similar.<\/p>\n\n\n\n