How to Design an Ecommerce Checkout Flow That Converts

The checkout flow is where the money is at.

Think about it, random strikers leave the site before ever entering the checkout funnel, while motivated buyers come here to finish their order. Any small increase in this step usually has a direct impact on how much more money your site makes.

Example: An Ecommerce site that I analyzed recently had a payment page where 84.71% of the traffic proceeded to buy. I calculated that if we can increase that to 90%, that would result in 461 more orders and additional $87,175/month. That would be 23.94% growth in revenue. So yes – “small” gains here can be very big.

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.

A framework for thinking about this: Fogg Behavior Model

Bottom line is this: Behavior = motivation x ability x trigger.

Here’s the model:

Used with permissions by Persuasive Tech Lab

You want to aim to be at 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 does it:

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, reviews, look at picture = more 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 only need to type your password + click a couple of times.

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

Done and done.

So let’s walk through the whole checkout flow step by step, and see what makes a good one.

Best Shopping Cart Design

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 Cart Add Look Like?

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

Most importantly: it should be stupidly obvious 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 showing a tiny animation, or small confirmation text that’s hard to notice.

You can’t miss a cart add in Bonobos. This is what the product page looks like:

And this is what you see after you click ‘Add to cart”:

The cart appears with a small animation which is good because human eye reacts to movement, and it’s a subtle visual cue that indicates the shift from visitor to buyer.

The cart contents along with “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 here 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, and fold it in a few seconds:

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

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

Once The Product Is In The cart, Then What?

There are 2 main approaches here.

• Show ‘cart add’ confirmation and remain on the same page. Pros: people didn’t ask to move to another page, so there are no surprises and thus good experiences. 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 way more useful to you if they’d look at something else they’d might want to buy!
• Transfer the user to the cart page. The advantages here is that you’re taking them one step closer to making a payment. This is also a great opportunity to make upsell offers. Cons: you might be losing out on “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 exact strategy to choose depends on your industry and strategy, and you definitely want to test this.

Metrics to keep in mind here:

• Average transaction value
• Average quantity per transaction

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

Displaying Cart Contents Well

Key principles for displaying cart contents are clarity and control.

Clarity: it’s easy and obvious to understand what’s in the cart and what’s the final cost including shipping and taxes. Surprise costs down the line make people abandon carts.

Control: it’s easy to make changes (update quantity, remove products).

Asos has a good take on the cart page:

What they get right:

• Product photos
• Product name & price
• Ability to remove, save for later, change details like size
• Show the kind of payments they accept
• Show total price with the option to change shipping
• Clear call to action
• Even an attempt to get you to add more items in the cart

Indochino has nice minimal approach to presenting cart contents (with a few issues like prominent coupon box and inability to change quantity):

Get the visual hierarchy right

The number one thing in the visual hierarchy should be the “Continue to checkout” button (test different CTAs), and you should have two of them: one above and one below the cart.

Something like this – their 2 checkout buttons clearly stand out:

What’s bad: updating quantity requires typing. There can be a more elegant solution to this.

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

Modcloth also reminds you that they have free returns + exchange AND secure transactions.

Don’t make coupons prominent

When people see a “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 saying “Got a coupon?” or something similar, and clicking on the link makes an input field – like the one above – appear. Text links are not visually very prominent, so less people will pay attention to them. Customers who already have a coupon code will be looking for a way to enter it – so unless you hid it really well, they will find it and will be able to apply their coupon code.

Remind Them About The Good Stuff: Shipping, Returns and Security

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

Asos shows these 3 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 and 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 (not possible to buy without registering). Long story short: don’t do that, it hurts conversions, a lot.

1 in 4 abandon online purchases due to forced registration.

It’s part of the “greedy marketer syndrome”. It’s easy to understand why Ecommerce marketers want that – they’re hoping the user gets “locked in” and will now start shopping with them since they have an account with them.

Is that really the case? Oh please. Ask yourself honestly: how many websites do you have a registered account on? Do you now feel loyal to them for this 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 dollars.

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

What you should do instead?

You should always offer a guest checkout. (But add some great twists.)

There are 2 good approaches:

• Don’t even mention the word “register”. Say New Customer or use other similar terminology.
• Wait until they check out, and offer account creation on the Thank You page. You’re asking them for their name, email and address anyway so they could buy and get their stuff, you already have this info. So now on the last page you can just offer to create an account with 1-2 clicks: ask for their desired password (or provide option to auto-generate it for them) along with just the permission to create account.

Bad

Any kind of forced registration where one is not able to buy without registering.

Still bad

In my experience this is the most common approach on Ecommerce sites, and it’s sub-optimal. It always seems to have too many things going on here (busy), but the most important bit is that there are 2 choices given for new customers – that’s too much, and creates hesitation.

Better #1

Just 2 choices: Returning users and new users.

Asos didn’t always have this approach. This was their previous sign up page with 3 choices:

Killing this approach and switching to the current page reduced abandonment by 50%!

So when you click ‘New’, what happens? They take you to this screen:

It’s still forced registration essentially, but packaged as something completely different! A typical usability problem is now just a single text field – password. The rest of the data is your typical checkout information.

Better #2

Shopping cart abandonment is a major issue. Bonobos is asking for your email up front, and can easily start abandoned cart recovery process. Also, easy 2 choices – no sensory overload.

Better #3:

Another great way is to skip login/new/returning screen altogether – so it’s defaulting to guest checkout. People with existing account can log in via link, and new clients are offered to create account after they pay.

What Diamond Candles is doing well here is not even visible. They create an account for you automatically, but don’t mention it. Let’s say you do 4 different guest checkouts here with the same email address, then then finally decide to create an account (enter a password essentially). What now happens is that all your previous order with that email address are going to be merged for this account, so your freshly created account comes with a proper order history and everything.

Better #4:

Account registration is offered together with an incentive upon completing the purchase.

Speedo example:

People are not bothered with any account stuff until they pay you money (if you had to choose, what’s more important to you: account registrations or purchases?).

Usually “thank you” pages are not very useful, but not so here. They give you a no-brainer offer: just enter password and get a coupon (+ order tracking, fast login next time). The account creation percentage for new users here is over 75%! Very high.

Ecommerce Checkout

This is the money page. Any lift on this page will make a nice difference to your bank account.

A few principles that will help you create a better checkout page.

Asking For Credit Card Info Last

Have people complete shipping information before they get into 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 billing address, so they don’t need to type it again).

Same principle applies for form fields – start with the easier fields first, like name. 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: clear 1-2-3 step flow, name before card details, billing address same as shipping.

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

Payment Form That Looks Like An Actual Credit Card

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

You can get an interface for this called Skeuocard free of cost, and implement on your system. Try demo here.

Make It Look Secure

Security is a serious concern for many. Besides making payments actually secure by using SSL, tell people about it.

This is an example of a form made to look secure:

• Different background color (you can have that only for the credit card number field)
• SSL logo
• Written statement: “Secure credit card payment. This is a secure 128-byt SSL encrypted payment.”
• Explanations for expiry and security code

Note that if your audience is not tech savvy, they might not know what SSL and https are, so better to 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 of returning users. When people don’t need to enter their billing info anymore, buying becomes a 1-click thing. Amazon is killing it largely because of this: friction for returning buyers has been almost completely removed!

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

Conclusion

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

Read more:

• How To Improve Conversions Throughout the E-Commerce Checkout Funnel