A recent Baymard Institute study revealed that, on average, 68.81% of shoppers abandon their cart. Diving deeper, the study segmented out the “just browsing” window shoppers and examined what happens during the eCommerce checkout process that makes people want to leave. Not surprisingly, a large majority of the problems could be solved by improving the fundamentals of the eCommerce checkout flow.
Source: Baymard Institute
Disregarding the shopper’s distaste for hidden fees — a business decision, not one related to eCommerce website design — the rest of these problems can be solved with better planning and design. By mapping out the user flow beforehand and applying the tried-and-true best practices of checkout design, you can avoid each of these pitfalls to increase conversions.
Your checkout process should not be designed like an obstacle course… it should be like a wind tunnel. It should help the shopper get through it more quickly and efficiently, rather than holding them back (and annoying them to the point of abandonment).
In this article, we’ll talk exclusively about designing the user flow during the checkout process. We’ll explain which data you need to know, how to map user flows, when to use multiple flows, and which areas are most important to consider when designing.
Checkout Flow Data
The best checkouts are personalized to the type of shopper most common to a site. This varies from brand to brand, industry to industry. People buying fashion online do not have the same shopping habits as those buying pet supplies. Even among fashion eCommerce sites, people buying high-end couture don’t have the same habits as those buying cheaper, fast fashion products. Each site has their own unique customer groups, and therefore needs their own unique checkout flow.
Obviously, using concrete facts will give you accurate — and fruitful — results. That’s why we always recommend avoiding the guesswork and drawing straight from your actual customer data.
When it comes to designing your checkout flow, these areas in particular are the most helpful:
- Which devices are your customers using? Smartphone, desktop, or tablet? For smartphones, Apple or Android? Which browser? It’s not unusual for customers to be spread out across all options, but sometimes one preference overwhelms the others. In these cases, you can optimize your checkout process to this majority — just make sure you keep the options open so you don’t alienate the minority.
- Are shoppers signing in or using guest checkout? The login option creates two very different user flows in terms of which information they’ll need to enter before completing their checkout. If you’ve enabled social sign in, pay attention to which channel they choose, and test new options to see how useful they are.
- Which payment methods are most common? Payment methods also change the course the user flows take. If a majority of your customers use standard credit cards, you can focus mostly on this route, but you’ll also want to keep opportunities open for PayPal and other options.
- How popular are gift cards and coupons? Special offers like gift cards and coupons also alter how the user flow plays out. You may need to make special inclusions if they’re popular enough to warrant greater attention.
Google Analytics is an excellent resource for compiling this data; if you don’t have it set up yet, do it now. For more information on how Google Analytics can help your eCommerce site, read this article from The Jibe.
Mapping Out User Flows
As we touched upon in our previous piece on user-centered design, you can map out your user flow to better anticipate your shopper’s needs and streamline their user experience. An effective exercise is to choose a task, in this case checkout, and write out the steps the customer must go through to accomplish it.
Source: three stones
For example, the user flow for checking out on three stones, one of our client sites, looks like this:
- User clicks “Add to Cart” on the product page of their selected item.
- When the confirmation box appears, the user clicks “Go to Cart”
- On the cart page, the user clicks “Proceed to Checkout.”
- Opting the check out as a guest, the user simply enters their billing address information in the forms.
- On the next page, the user chooses between standard or express shipping.
- The user clicks “Place Order and Pay”.
- The user selects the payment method, and is immediately prompted to enter payment information.
- After double-checking the payment information, the user clicks “Pay”.
- The user arrives at the confirmation page.
Source: three stones
Three stones is a good example because they’re already very efficient. The guest checkout billing address forms are on the first page, and the system assumes the shipping and billing address are the same, saving most customers an extra step of clicking the box (every little bit helps).
Once you finish your user map, you then go over the steps and look for redundancies and shortcuts to make your user flows as quick, simple, and efficient as possible. For example, take a look at steps 2 and 3. If there were a direct option to go straight to the checkout page from the confirmation box, that would save the shopper an extra step. Three stones probably excluded this option to encourage shopping for multiple products, but this example illustrates how examining a user flow map can help you identify areas of improvement.
But what if the customer already has an account? What if they have a coupon code? These options all lead to different checkout flows and different opportunities to improve the user experience. That’s why you need multiple flows.
When to Use Multiple Flows
You want to cover all your bases while designing your checkout flow, so it’s almost always necessary to map out multiple flows for multiple routes.
(This is another reason why collecting data at the start is so important. Real customer data will determine which routes are worth mapping out).
While the specific variations will depend on your particular site and customer-base, in general you’ll want to use multiple flows for the following:
This is the most important difference to map out, since you’ll always have two different checkout flows for mobile and desktop. These flows vary greatly: the different screen sizes affect what the shopper sees (including visual cues) and the amount of forms that can fit per screen, the mentality between mobile and desktop browsing varies (i.e., mobile users are more impatient), and even the difference between clicking and tapping will affect the flow.
Not only should you map out different flows for the mobile and desktop versions, but for each you’ll have to map out other variations. For example, guest login for mobile, guest login for desktop, account login for mobile, account login for desktop, etc.
Guest checkout or account sign in. This changes the checkout flow greatly, considering that one requires a great deal more forms to fill out. Certain account logins, like Amazon, allow one-click checkouts — the ultimate in streamlined checkout flow.
Source: The Burren Perfumery
Moreover, you’ll want to consider how shoppers sign in. Do they sign in when they arrive on the site, or wait until the checkout process? Do they use social sign in, or manually type their username and password? It’s in a store’s best interests to encourage account sign up in general, so check your data to see which conditions have the best success rate for getting sign ups.
It’s worth mentioning that you should always offer guest checkout. Not offering the option is one of the biggest reasons for cart abandonment; according to the study above, 35% of people cited it.
Different payment methods often require different steps in the checkout flow. For example, the PayPal option may take the customer off-site momentarily… how will that affect the checkout flow on the whole? Additionally, whether or not your account logins remember credit card information affects the number of steps in the checkout flow for repeat customers.
Again, customer data reveals which payment methods are worth mapping out.
While not always applicable, sometimes site versions in different regions require different checkout flows. Some eCommerce sites are divided into domestic and international versions, but others have individual sites for specific regions or continents. These regional sites may have different variations, different social media sign in options, and different popular payment methods.
6 Factors to Improve Your Checkout Flows
Now that we’ve covered the fundamentals, let’s outline some practical and immediately applicable advice to improving your checkout flows. Below, we’ve listed 6 areas to pay close attention to when designing your eCommerce website.
1. Speed of Process
The ultimate goal of eCommerce checkout flow is to have to be as quick (and painless) as possible. The speed with which the entire process takes has a direct relation to cart abandonment, as the longer the shopper is there, the more likely it is that they’ll give up and go to a faster store.
For starters, you want to remove as many unnecessary steps as possible. Finding redundancies and potential shortcuts (discussed below) will help improve your checkout speed. But more than that, your entire eCommerce website design can help: a well-structured visual hierarchy that places the proper cues in the right places (also discussed below) means the shopper sees the options they need when they need them, sparing time searching.
2. Minimize Choices
Hick’s Law explains that the amount of time it takes to make a decision goes up in relation to the amount of choices they have. In short, having a lot of options is not always a good thing.
For your checkout, you want to give your shopper a clear path forward, with only a few necessary options (for example, logging in or guest checkout). Minimize the amount of choices where you can, such as available payment methods.
Again, customer data comes in handy. If you’re unsure about whether or not a new option is worthwhile, try a small controlled test. Never offer “extra” choices unless its verified that they’ll be appreciated.
3. Loading Times
Directly related to the overall speed of the process, loading times are one of the most important factors all sites must consider. Kissmetrics reports that every second of loading time increases the probably of page abandonment.
Lowering loading times is one of the greatest arguments for a minimalist design, especially on mobile devices. Apart from removing the bigger and more data-heavy elements on a page, you can also reduce your loading times by:
- deactivating unused plugins (check your customer data to see which ones can go)
- removing social media sharing buttons at checkout
- limiting site-wide tools such as a livechat help option
- using images of a lower quality
To speed up the loading times across your entire site, not just checkout, read this Crazy Egg article with 10 techniques.
4. Redundancies and Shortcuts
Knowing where you can make the checkout flow more efficient is one of the tricks of good eCommerce design. As we mentioned above, you can review the steps in your user flow map to see if there’s any opportunities to skip steps. That’s good design, but what if you want to make your design great?
Take a closer look at the intricacies of your user flow and try to find new and innovative ways to save time for your customers. Don’t be afraid to trail-blaze a little here.
Source: Uber Newsroom
For example, some sites only require customers to enter their zip code, and then that automatically selects their province or state to spare them a extra field. Uber allows its customers to take a picture of their credit card with their phone, saving them the hassle of entering each individual form.
5. Visual Hierarchy and Cues
Don’t underestimate the capability of thoughtful design. Establishing a structured visual hierarchy improves the site’s usability along with its aesthetics.
If you’ve carefully mapped out the checkout flows, you should be able to accurately anticipate the customer’s next moves. That means you can draw attention to their most probable next step by adding visual cues. This is one of the finer skills in website design — a skill that we don’t have time to do justice to here — but as a simplified cheat sheet, here’s some basic strategies for attracting attention
- Use contrasting colors (give an important button the opposite color as the background)
- Increase size (or decrease the size of other elements)
- Establish a visual rhythm and then break it for more important elements
- Surround an important element with excessive white space
- Use motion such as animation (but be subtle, as too much motion is distracting)
The better your checkout flow map is, the easier building the visual hierarchy will be. In those situations where you have two competing elements (for example, account sign in and guest checkout), rely on your old friend customer data to determine which is more popular so you know to prioritize it over others.
Good wording may not improve your checkout flow all that much, but bad wording will definitely do serious damage.
During the checkout process, there’s not a lot of opportunity to wow and amaze your customer with dazzling copy — in fact, the customer probably shouldn’t be reading too much, since your goal is to make the process as quick as possible. During checkout, copy is mostly in the instructions and form labels.
Checkout copy should be as clear and succinct as possible. Anything else could risk confusion, which leads to frustration and abandonment. For this reason, avoid cutesy and overly casual lingo. Use standard form labels like “name” and “address” instead of trying too hard to be unique. Never sacrifice clarity for the sake of being clever.
That doesn’t mean your checkout copy should be bland and humorless. Just save those personal touches for areas where it won’t overcomplicate the process — like the thank-you confirmation page at the end.
You can’t predict the future… but you can map it out fairly well.
A little preparation goes a long way for designing your checkout flow, and anticipating the different variations ensures that all — not most — of your customers are satisfied. The checkout process is where you pull no punches in terms of effective web design, so it’s worth a little extra effort.
Keep checking back for more instalments in our checkout optimization series. If you have any questions, comments, or suggestions for additional material, add the in the comments section now.