How to Design an Ecommerce Checkout Flow that Converts

Your ecommerce checkout flow is where the money is at. Think about it. Random visitors leave the site before ever entering the checkout funnel. Motivated buyers come here to finish their order.

Any small design improvement in your checkout UX usually has a direct impact on how much money your site makes.

An ecommerce site that I analyzed recently had a payment page in which 84.7% of the traffic proceeded to buy. I calculated that if we could increase that to 90%, it would result in 461 more orders and an additional $87,175 per month—23.9% revenue growth. “Small” gains can be huge.

So, the question is, “How do we get more people to go through our checkout flow and complete purchases? Specific tactics depend on your site, but the principles for coming up with the answer are universal.

What is the checkout flow in an ecommerce?

A checkout flow in an ecommerce is the series of steps a customer has to go through on a website, in order to complete a purchase.

A framework for thinking about ecommerce checkouts: The Fogg Behavior Model

The bottom line is this: Behavior = Motivation x Ability x Trigger.

Here’s the model:

You want to aim for the top right of the graph—high motivation, easy to do, a trigger in place. If you have high motivation and low ability (difficult to do), what you’ll get is frustration. If it’s low motivation but easy to do (e.g. take out the trash), you get annoyance.

How Amazon uses the Fogg Behavior Model

When Amazon sends you an email with a product promotion, that’s motivation and a trigger. People click on the link and get to the product page. They read the copy and reviews, and look at the picture, all of which increase motivation. “Add to Cart” is the trigger to initiate the checkout process.

What about ability? How easy it is to complete the checkout process? This is where Amazon kicks butt. You need only to type your password and click a couple of times. The checkout flow is friction-free.

Here is the actual workflow on Amazon’s mobile commerce application:

Done and done. Let’s walk through the whole checkout flow step by step to see what makes a good one.

Note: You can get tons of other tips for ecommerce from our comprehensive ecommerce guidelines report (247 guidelines specifically for ecommerce).

How to Design Your “Add to Cart” Function and Shopping Cart Page

It all starts with people adding something to the cart. The moment a visitor adds the first item to their cart, they’re not browsing—they’re shopping.

What Should “Add to Cart” Look Like?

When people add something to the cart on your product pages, what should happen?

It should be stupidly obvious that they’ve added something to the cart. Clear confirmation. It’s ridiculous how many sites screw this up either by not displaying a proper confirmation or by showing a tiny animation or small confirmation text that’s hard to notice.

You can’t miss a cart add in Bonobos. After you click “Add to Cart,” the cart appears with a small animation, which is good because the human eye reacts to movement. It’s a subtle visual cue that indicates the shift from visitor to buyer.

The cart contents along with the “Checkout” button also remain visible until the user clicks somewhere else. That’s good. I would change the “Checkout” button color to something other than blue—it doesn’t stand out enough. The main thing in the visual hierarchy is the “Add to Cart” button, but the product is already in the cart.

ASOS shows a small animation as well. They open up the cart contents, then fold it in after a few seconds. The “Add to Bag” button also changes to “Added,” which is a nice confirmation for buyers:

I would keep the cart contents open until the user makes a choice by clicking somewhere. This way, the “Checkout” button keeps staring them in the face.

While we always want them to buy more things, improving the process to purchase even a single item can lead to big improvements. Nudging them toward the checkout is always a good idea.

Once the product is in the cart, then what?

There are two main approaches:

1. Show “cart add” confirmation and keep users on the same page. Pros: People didn’t ask to move to another page, so there are no surprises. They might also consider adding more items to the cart before checking out. Cons: They already have the product they’re now staring at in the cart. It would be more useful to you if they’d look at something else they might want to buy.
2. Transfer the user to the cart page. Pros: You’re taking them one step closer to making a payment. This is also a great opportunity to make upsell offers. Cons: You might lose out on maximizing “items per cart.”

Amazon takes you to a cart page, confirms that you added a product to the cart, and shows you upsells. What Amazon does well is shrinking cart contents, so upsells stand out:

The right balance of potential strategies depends on your industry and goals, and you definitely want to test this.

Metrics to keep in mind:

• Average transaction value;
• Average quantity per transaction.

We don’t want to increase the number of transactions alone but also the amount spent for each transaction.

Display cart contents well

Key principles for displaying cart contents effectively are clarity and control.

• Clarity. It’s easy and obvious to understand what’s in the cart and the final cost, including shipping and taxes. Surprise costs down the line make people abandon carts.
• Control: It’s easy to make changes, like updating the quantity or removing products.

ASOS has a good take on the cart page:

What they get right:

• Product photos;
• Product name and price;
• Ability to remove, save for later, or change details like size;
• Show the kind of payments they accept;
• Show the total price and confirm free delivery;
• Clear call to action to “Checkout”;
• Reduce uncertainty by highlighting “Easy returns.”

Indochino has a pleasing, minimalist approach to presenting cart contents. That said, the page still has a few issues, like a prominent coupon box and the inability to change quantities:

Get the visual hierarchy right

The number one thing in the visual hierarchy should be to continue to the checkout. (Test different CTAs.). There should be two calls to action: one above and one below the cart.

Something like this—the two checkout buttons clearly stand out:

Modcloth has improved this page since we last reviewed it. Previously, updating the quantity required typing. Now, you can use steppers to increase or decrease the quantity.

Notice that Modcloth also offers a PayPal option. While most people prefer to pay with a credit card, offering 1–2 alternative payment methods (e.g. PayPal, Amazon) is a good idea and has been shown to help conversions along. Too many choices are hurtful, though.

Modcloth also reminds you that they have free returns and free shipping on orders over $75.

Don’t make coupons prominent

When people see an “Enter coupon code here” field, they feel less special. “How come I don’t have one?” Many go to Google to find a coupon; many never return. Leaving the site in search for coupons is a common reason for shopping cart abandonment.

So, this is not a good idea:

Instead, have a text link that says “Got a coupon?” or something similar. When someone clicks the link, make an input field—like the one above—appear. Text links are less prominent, so fewer people will pay attention to them.

Customers who already have a coupon code will be looking for a way to enter it. Unless you hide it really well, they will find it and be able to apply their coupon code.

Remind shoppers about the good stuff: shipping, returns, and security

When will they get their goods? How much is the shipping. Is it free? Will the transaction be secure? Remind people.

Here’s an example that shows those three key messages underneath the checkout button, which also says “Pay Securely Now”:

Persistent carts FTW

When people add something to the cart, don’t let the cart contents expire. Use cart abandonment emails and retargeting ads to bring people back next week or next month so that they can continue where they left off.

Sign-up process: To create an account or not?

Many ecommerce sites want buyers to sign up before they buy. Some even force registration (i.e. not possible to buy without registering). Long story short: Don’t do it. It hurts conversions. A lot.

One in four abandons online purchases due to forced registration. Forced registration is part of the “greedy marketer syndrome.” It’s easy to understand why ecommerce marketers want to do it—they’re hoping the user gets “locked in” and will shop more because they have an account.

Is that really the case? Oh, please. How many websites do you have a registered account on? Do you now feel loyal to them for that reason? I bet you haven’t logged in to most of them more than once.

Here’s a good story on forced registration, told by usability guru Jared Spool:

It’s hard to imagine a form that could be simpler: two fields, two buttons, and one link. Yet, it turns out this form was preventing customers from purchasing products from a major e-commerce site, to the tune of $300,000,000 a year. What was even worse: the designers of the site had no clue there was even a problem.

The form was simple. The fields were Email Address and Password. The buttons were Login andRegister. The link was Forgot Password. It was the login form for the site. It’s a form users encounter all the time. How could they have problems with it?

The problem wasn’t as much about the form’s layout as it was where the form lived. Users would encounter it after they filled their shopping cart with products they wanted to purchase and pressed the Checkout button. It came before they could actually enter the information to pay for the product.

The team saw the form as enabling repeat customers to purchase faster. First-time purchasers wouldn’t mind the extra effort of registering because, after all, they will come back for more and they’ll appreciate the expediency in subsequent purchases. Everybody wins, right?

We conducted usability tests with people who needed to buy products from the site. We asked them to bring their shopping lists and we gave them the money to make the purchases. All they needed to do was complete the purchase.

We were wrong about the first-time shoppers. They did mind registering. They resented having to register when they encountered the page. As one shopper told us, “I’m not here to enter into a relationship. I just want to buy something.”

By removing forced registration, they increased sales by $300 million.

Spool’s team also figured out that most people had multiple accounts in the system. People had forgotten that they already had accounts. They got error messages when they tried to create one with their standard email, so they had to use an alternative email to create more accounts.

What you should do instead? Always offer a guest checkout. You can work on registration after the sale:

• Don’t even mention the word “Register.” Say “New Customer” or a similar term.
• After they check out, offer account creation on the “Thank You” page. You already have their name, email, and address from the checkout, so it shouldn’t take more than a few clicks to create an account. Ask for their desired password (or provide an option to auto-generate it) and confirm permission to create their account.

In my experience, the most common approach on ecommerce sites is still sub-optimal. Overall, it’s too busy, and it asks new customers to make a choice, leading to hesitation:

There are several, far more preferable options.

Checkout registration option 1

Give users two choices, new or returning:

Asos didn’t always have this approach. This was their previous sign-up page, which had three choices:

Killing this approach and switching to a streamlined version reduced cart abandonment by 50%!

It’s still (essentially) a forced registration, but it’s packaged differently. It’s also easier with social login options. A typical usability problem is reduced to just a few clicks.

Checkout registration option 2

Shopping cart abandonment is a major issue. Asking for your email up front makes it easy to start an abandoned cart recovery process. Also, there are two easy choices—no sensory overload:

Checkout registration option 3

Another great way is to skip the log-in screen altogether. Instead, simply default to the guest checkout. People with an existing account can log in via the link, and new clients can create an account after they pay:

What Diamond Candles does well isn’t even visible. They create an account for you automatically but don’t mention it. Let’s say you go through four guest checkouts with the same email address, then finally decide to create an account (enter a password, essentially).

All your previous orders with that email address are merged for this account, so your freshly created account comes with a proper order history.

Checkout registration option 4

With this option, account registration is offered together with an incentive upon completing the purchase. Here’s an example from Speedo:

People aren’t bothered with any account registration until they pay you money. If you had to choose, what’s more important to you: account registrations or purchases?

Usually, “thank you” pages aren’t very useful, but not so here. They give you a no-brainer offer: Enter a password and get a coupon (plus order tracking, faster purchasing, etc.). The account creation percentage for new users here is often over 75%.

The Ecommerce Checkout Page

This is the money page. Any lift on your final checkout page will make a nice difference to your bank account. Here are a few principles that will help you create a better final step in your checkout flow.

Ask for credit card info last

Have people complete shipping information before they get to billing. This puts Cialdini’s principles of Commitment and Consistency into action. Once people start doing something, they feel like they should finish.

They’ve already been asked to enter their name, email, and shipping info, which, ideally, is the same as the billing address, so they don’t need to type it again.

The same principle, sometimes called the foot-in-the-door technique, applies to form fields. Start with the easier fields first, like name. The credit card number field is the “hardest,” so it should come last.

This is what you should not do:

This is better. (You get here from the shipping page.)

The good: It has a clear 1–2–3 step flow. The name field comes before card details, and the billing address (if it’s the same as shipping) doesn’t need to be entered again.

The bad: The main CTA is “Save & Continue.” Continue where? It should be specific, like “Continue to Review,” or whatever the next action is.

Use a payment form that looks like an actual credit card

Add real-life touch by designing the payment form in this skeuomorphic way:

You can get an interface for this called Skeuocard for free(!) to implement on your system. Try a demo here.

Make the payment process look secure

Security is a serious concern. Besides actually making payments secure with SSL, tell people about it. This is an example of a form made to look secure:

Some reasons why it works:

• Different background color for the credit card number field.
• SSL logo.
• Written statement: “Secure credit card payment. This is a secure 128-bit SSL encrypted payment.”
• Explanations for expiry and security code.

Note that if your audience is not tech savvy, they might not know what SSL or HTTPS are, so speak in plain terms.

Store credit cards in your system

Sure, you have to deal with PCI compliance, and there’s a risk of getting hacked, but you will make so much more money off returning users. When people don’t need to enter their billing info, buying becomes a one-click process.

Amazon is killing it largely because the friction for returning buyers has been almost completely removed! The checkout flow is barely a flow—it’s a one-click event.

Returning visitors are much more likely to buy than new visitors, but that’s nothing compared to returning buyers. Make it easy for them.

Conclusion

Start your ecommerce optimization efforts at the checkout flow. Relative gains here will result in very nice absolute sums.

To improve the UX of your checkout process:

• Make the “Add to Cart” function clear.
• Make it easy for visitors to change or remove cart items.
• Streamline the registration process—let new buyers register after the purchase.
• On the checkout page, ask for the easiest information first.

Working on something related to this? Post a comment in the CXL community!