Understanding the checkout flow

“Merchants can no longer view the checkout button as the end of the shopping experience, but instead must treat it as the start of the payment process.”

I love this quote. It reinforces that each touchpoint is worthy of their own explorations and line of questioning and when it comes to the checkout flow, many businesses don’t do enough. In fact, according to Baymard Institute in late-2023, the “average cart abandonment rate across industries is around 70%.” (source.)

So why — after so many years — when the first person asked “how will someone buy this online” are we still having issues? Why is there still friction when someone is trying to give you their money?

To break this down, I’ll dive deeper into the following questions I had:

• Why do checkout flows feel the same?
• If they feel the same, what are the design missteps?
• Who is doing it well?
• How are international checkout flows handled and what can we learn from them?
• What about subscription services?

Why do checkout flows feel the same?

If you think about what happens when you buy something in real life, there’s an exchange of payment information that happens instantaneously.

We don’t have to be asked for our first name, last name, credit card number, expiration date, security pin, favorite date, etc. etc.

That tedious experience is saved for the convenience of buying something online. In order for backend systems to process this exchange of value and for you as the user to give them that information, checkout flows generally include:

• Order review details
• Shipping and/or store pickup information
• Credit card, or alternate payment form fields
• Account selection, creation, or guest checkout
• Field labels and microcopy
• UI to support navigation, editing an order, and of course, buying

Over the years, these design patterns have created a mental model for how an online checkout flow goes. In short, familiarity is king and consistency rules.

Despite these patterns being well-established, mistakes can and still do happen more often than you think.

If they feel the same, what are the design missteps?

In 2021, the Baymard Institute released “The Current State of Checkout UX” where they stated:

“During Baymard’s 12 years of large-scale checkout usability testing we have also consistently found the checkout design and flow to frequently be the sole cause for users abandoning their cart during the checkout flow.”

In that study, they shared the following best practices to address the common issues they found across checkout designs and flows:

1. Make “Guest Checkout” the Most Prominent Option (65% Don’t)
2. Avoid Overly Complex Password-Creation Requirements (80% Don’t)
3. Use “Delivery Date” Instead of “Delivery Speed” (36% Don’t)
4. Show the Cutoff Time as a Countdown (96% Don’t)
5. Present “Store Pickup” Within the Shipping Selector Interface (63% Don’t)
6. Make It Easy to Compare “Store Pickup” to Shipping Options (75% Don’t)
7. Use Luhn Validation (53% Don’t)
8. Autoformat Spaces in the “Credit Card Number” Field (40% Don’t)
9. Match the Credit Card Field Sequence to the Physical Card Sequence (38% Don’t)
10. Correctly Format the “Expiration Date” Field (50% Don’t)
11. Allow Users to Edit Data Directly at the Review Step (80% Don’t)
12. Provide Separate “Edit” Links for All Distinct Information Groups (49% Don’t)
13. Avoid Jargon in the Checkout Microcopy (45% Don’t)
14. Mark Both Required and Optional Fields Explicitly (85% Don’t)
15. Support the “Back” Button for Navigating To Any Previous Checkout View (57% Don’t)
16. Auto-Update and Highlight Changes Rather Than Using “Apply” Buttons (82% Don’t)
17. Choose the Right Interface Type for Optional Inputs (81% Don’t)
18. Use Localized Input Masks for Restricted Inputs (56% Don’t)

Services like Stripe and Affirm have emerged over the years to make some of these mistakes go away.

However, as I dived deeper into what’s behind these issues…the ways we pay nowadays has become so varied that it puts further stress on the need for checkout flows to adapt to user expectations. For instance, here’s how we pay for things across the world:

• Credit cards: especially popular in the U.S.
• Debit cards: also popular but are only good in “domestic” transactions
• Bank transfers: can be done via PayPal, but problematic if it’s an international transaction
• eWallets: think Alipay, Wechat Pay, Venmo; more options are emerging and growing fast across the world
• Cash: can still happen based on user preference, and/or limited access to the options mentioned above

Between usability issues and the evolving ways we pay for the things online, it highlights why checkout flows are in need of constant optimization so they can best meet your customer needs.

Next, I wanted to explore who was doing this well.

Who is doing it well?

This blog contains multiple examples of companies that have optimized their checkout flows to meet their customer expectations though I will highlight 3 of my favorites:

Why this works for me:

• “Express checkout” presents different payment options so users can avoid having to enter their credit card information below
• The split view between selecting a payment method (on the left) and order details (on the right) makes it easy and clear to review
• “Refund policy” is present as a hyperlink in the footer
• Limited use of color on this page is on-brand and it makes the “Continue to shipping” CTA stand out as a clear next step

Why this works for me:

• Peloton bikes (and their subscription service) are big investments so as the author of this blog post noted, I liked how clear they make the “cart summary” given the nature of their business
• “Estimated delivery by” section helps set user expectations
• “This order is a gift” is also a sign they know not everyone that gets to this step is buying a Peloton for themselves (what a present btw)
• The “100 day home trial” section and offering “Affirm” both speak to giving users flexible choice where one provides an avenue for affordability and the other can address potential buyer’s remorse

Why this works for me:

• While the visual design is not my favorite from the examples, being able to estimate the shipping and tax costs based on where I live creates transparency for the user

How are international checkout flows handled and what can we learn from them?

From the examples above, we can see why understanding your user’s expectations and habits should translate into checkout flows that feel easy, clear, and fast to use.

That approach is no different when it comes to understanding your international audience needs and expectations. This blog post states 2 key factors that we should think about when creating a checkout flow for international customers:

1. Provide them with a familiar way to pay
2. Offer a smooth way of arranging delivery

However, consumer behaviors and expectations for checkout flows vary across the world which makes addressing these factors complicated, but not impossible. Here are some of my favorite examples from that blog:

Germany:

• “For users visiting your site from Germany, we suggest that your address form asks the user to input their street name first, followed by their building number. Addresses in much of Europe are formatted with the building number after the street name, so this will be familiar to German users and will best allow an address lookup tool to suggest an address from their input.”
• “According to DPDgroup’s research, direct bank payments are preferred by 31% of German ecommerce customers; making them more popular than credit or debit cards.”

India

• “In an Indian address form, this is usually handled by asking for a PIN code first — this is the equivalent to a postcode or zipcode elsewhere. Sending this search to an address API allows your site to complete a locality and city/district field, with any additional fields available for filling in by the user. Then, don’t be concerned if you find yourself fulfilling orders to post offices.”
• “Linked to this, cash on delivery is supreme in India as far as payment preferences go. Fewer consumers there may have access to electronic payment methods and the familiarity of cash payments feel more trustworthy in a growing ecommerce environment.”

Around the world

• “For other countries during the checkout stage, we recommend having a single search field which asks the user to enter as complete an address as possible, ensuring that users aren’t prevented from entering their own address manually if they wish.”
• “As for payment options, again, local knowledge and research pays off. If the option is available to consult with a local company that specialises in ecommerce in your target location, having that knowledge under your belt will go miles towards making your site’s experience as familiar as possible to local users in your target country.”
• “Our final recommendation is to take a look at resources provided by the Department for International Trade. They provide a number of guides for selling to different countries and if you are looking for more general advice on selling abroad, they have advice for businesses of all kinds, depending on how much you currently export overseas.”

What about subscription services?

Much of what has been covered above deals with eCommerce checkout flows but since subscription services are built on recurring billing models, understanding where your users live, how they pay for services, and what additional costs (e.g. sales tax) are applied to that purchase is still relevant.

The degree in which you meet those expectations with flexible payment options will depend on the business you’re in and if you have the resources to offer them. In any case, applying well-established design patterns and avoiding common usability issues is a reliable approach when creating checkout flows for subscription services.