How to Design an eCommerce Checkout Flow That Converts

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.

Note: to master eCommerce optimization, analytics, and user experience, enroll in ConversionXL Institute.

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:

amazon-mobile-order-workflow

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:

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

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:

qwow

 

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:

amznThe 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:

asoscart

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):

indo

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:

mod

 

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:

coupon

 

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”):

asos

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.

Jared’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.

bad2

Better #1

Just 2 choices: Returning users and new users.

asos

 

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

aososcreate

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:

asosnew

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.

signin1

signin

 

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.

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:

speedo

 

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:

billing

 

This is better (you get here from the shipping page):

check

 

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:

ccv

 

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:

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.

Bonus: Checkout Flow Review

Join the Conversation Add Your Comment

  1. Excellent piece. The one thing I would caution readers against is actually storing credit card information themselves. PCI compliance is challenging, and by storing credit card info yourself, you are taking on the burden of guarding it. If even major merchants like Target have had data security breeches in recent history, what time and resources can you claim to have to defend credit card information better?

    The BBB provides a multi page checklist for PCI compliance.
    http://www.bbb.org/data-security/becoming-pci-compliant/checklists/

    While PCIComplianceGuide.org suggests that a checklist approach in and of itself isn’t enough.
    http://www.pcicomplianceguide.org/merchants-20110714-security-checklist.php

    There are merchant service tools like Stripe and Authorize.net which will allow you to maintain customer payment information, as well as process cards.
    (Stripe has this as a feature. https://stripe.com/docs/tutorials/charges Authorize.net as an add in service. http://www.authorize.net/solutions/merchantsolutions/merchantservices/cim/ )

    The burden is on them to maintain credit card security compliance, for the most part. You still have to design secure forms, and protect your connection and login information to these services. However, you are far less on the hook for guarding the specific credit info of dozens to thousands of individuals.

    Bonus: using merchant service-based payment storage may make implementing this excellent future purchase friction reduction tactic easier.

    1. Peep Laja

      For every 1 merchant that gets hacked, there are 25 million that don’t.

      More than 1 plane have crashed, so you shouldn’t fly one. More than one car gets into an accident every day, so don’t drive one?

      Come on! This is ridiculous advice. You want to make more money == store credit card details.

    2. Well I personally won’t be flying any planes any time soon, because I’m not qualified. And of course I drive on a regular basis, but I observe the rules of the road, wear my seatbelt, and am grateful for things like airbags in case something goes really wrong.

      Just yesterday Fast Company put out an article about businesses and individuals getting hacked. http://www.fastcompany.com/3026672/the-code-war/why-do-companies-keep-getting-hacked

      Hacking and security failures are realities and risks of doing business. Doing everything you can to minimize those risks is smart for both you and your customers.

      The point of my criticism and advice is not to encourage people away from using store credit card information at all. It’s absolutely a smart move to reduce friction from future purchases by having their card information securely stored and ready to apply to the next transaction. That was never in dispute and I apologize if it seemed like I was trying to discredit that tactic.

      The point I was attempting to make here is that many people are ill equipped to do so in a way that they can guarantee reasonable safety.

      Quickly searching for PCI compliance audit brings up a wealth of potential pitfalls in credit card security. http://www.darkreading.com/compliance/top-10-pci-compliance-mistakes/232400411

      It also brings up a wealth of vendors who specialize in keeping businesses PCI compliant.

      My recommendation is to either:
      A) store credit card information with the help of a secure, reputable merchant service solution, and not in your own database
      B) if you are going to store within your own data warehouse, get someone to be dedicated to security compliance, whether that be a staff member or a vendor

      Since many businesses are small businesses who don’t have the resources to dedicate someone to watchdogging data, and even large businesses who do have additional staff still encounter difficulty with security, why not offload the burden of that security to an organization whose primary focus is PCI and credit card security? (i.e. a merchant service provider)

      Not only does that provide much needed security against disastrous data breeches, theft, and fraud, but it enables you to more quickly bring ideas like card storage for future use to fruition.

      Not to mention many of these security and merchant service providers give business owners security logos and other trust signals that businesses can use to reduce even more friction by ensuring they have the customer’s safety in mind.

    3. Peep Laja

      Of course I agree with you.

      My point is “store customer credit cards”. The “how” of it is another, highly technical, matter. Of course it should all be safe and secure, etc.

      My point is not to shy away from it because “I might get hacked”.

      Also in the case of Target the credit card info that was stolen was from in-store purchases, not online.

    4. Peep – Correct – do not shy away from a good business practice because of some threat of being hacked. However, Georgene makes an excellent point about how tokenized payments still allow for this good business practice to exist, but removes much of the burdensome PCI requirements from the retailer. I guess with this approach the retailer can take your advice, focus more on creating a better checkout experience rather than focusing on how to secure the credit cards.

  2. I recently wrote of this topic under a different light in my newsletter. Dan Kennedy uses the term “greased chute”as a visual depiction for how you want to to help guide prospects through the sales process as effortlessly as possible. It boils down to minimizing friction wherever you can, using good marketing by itself since you don’t have a personal salesman online to guide them along like you would at a car dealership.

  3. I like it on how you compare the designs of those big ecommerce sites and how we can get ideas from them.

  4. Thanks Peep – I liked and retweeted. Excellent as always

  5. An excellent article and some great examples.

    @Peep you are 100% right. It is essential to store card details AND to have a good handle on security. If you make the customer work harder because you can’t be bothered to do the hard work needed to be secure, then you deserve to go out of business. Doing it right is ALL about the customer.

  6. Excellent piece of article!! – Thanks Peep.

  7. Thanks Peep, this is an enlightening post, absolutely.

    I think all relevant points of ecommerce funnel are touched upon.

  8. Excellent post Peep,
    the info about skeumorphic display of credit card entries is great. They even use a special web font to make it look like on VISA-cards.
    To make things LOOK secure is even more important for conversion, than to make them actually secure (of course to really make them secure is obligatory). However, conversion is based on what users belief and perceive, not what is technically happening in the background. And with most people not tech savvy, little lock icons and trustmarks like TrustedShops, etc. are imperative for the step with the highest friction: Entering his CC number is a real financial vulnerability to the individual. Their insecurity and awareness about this fact needs special attention.

    Great work, I love to read your inspiring posts since a long time.
    Michael

  9. The example used for “Still bad” when requiring users to register during checkout is the default checkout process for Big Commerce. Has anyone had any success changing this? The scripts on Big Commerce tend to get a bit fickle when you start trying to change them around.

  10. Excellent piece, as always Peep! I feel like I have a lot of these principles set up on my shop already but would love to get your insight if you have a minute to check out my shop. Thanks!!

  11. Peep — Great post as always. Do you have any shopping carts you recommend that have a simple and efficient checkout process?

    1. We use Prestashop and the checkout flow is pretty close to on par with what Peep has mentioned above. Although there could be some minor improvements, some that I have solved with various modules and custom coding.

  12. The other thing I’d be wary of is making credit card details split into first and last name. As a weird quirk of my UK bank, the name of my credit card is Ms J Doe rather Jane Doe, which can be problematic with forms (I usually have to put Miss J under first name and hope it works).

  13. There are definitely a few ideas to try out on my site. Making the checkout process feel secure is more important than ever with all of the recent hackings that have happened (e.g. Target).

  14. What about not offering customers to register at all? I never remember my password on shops where I dont often buy (which is always the case right?) so why register…

    Offering it in the very last step (the thank you/confirmation page) seems the only way to offer registration, without affecting checkouts.

    Other question; what about 1 page checkouts? Do you have information about how the number of steps involved in the checkout process relates to overall checkout rates?

    1. Peep Laja

      If your customers buy only once from you, no registration needed. If you sell smth that they might regularly buy, it’s a good idea to go for it.

      Single page vs multi-step checkouts: both work. You just have to figure out which approach works better for your site. Only way to know is to test it. What’s good about multi-step approach is that it’s easy to measure drop-off rates + if you capture email first (in the first step), you can attempt to recover abandoned carts.

  15. Great article Peep. I’m amazed at how ‘set in stone’ many many of the checkout processes STILL are. It seems no one challenges them and marketers accept benchmark level conversions.

  16. For the web developers who are in their infancy at trying their hand building ecommerce websites this is a definite must read for them. But more importantly, I try to get Business Owners to read some of this stuff as they are the first to complain when the balance sheet is showing the website as not delivering on making money.

    Business owners should read articles like this and take the driving test towards understanding how conversion really works down at this level. And, to also understand this is why their website might cost a bit more build as having these processes in place will help them win more races online and have happy customers at the checkout.

    Peeps I can appreciate the time and effort you have taking towards putting this article together. Business Owners should actually be paying you for gifting them with this valuable blueprint to help grow their ecommerce websites future.

    Well done!

  17. Wonderful article and very informative.

    We are using the magento platform for our site with the standard one page checkout. I was curious if you could recommend a magento extension that in your experience would improve the checkout flow and lead to higher conversions.

  18. You do a great job of breaking down items into actionable results, glad to have found you through Moz. We’re all tech savvy, we don’t mind buying things online. Secure payment is a great point especially if the buyers skew older.

  19. Starting an e-commerce site and this is JUST what I needed to read. Thanks so much for a great article.

  20. Great article and have a lot of new ideas. Thanks for sharing

  21. Damn it, if only I could get someone at big commerce to read this. They break every rule and their checkout is horrible.

    It effects every customer they have and they don’t seem to care or even worse they don’t have anyone there that realizes what a problem it is.

  22. I would love to know if the Skeucard method helps or hurts conversions on paid subscription forms. My first reaction when seeing it was anxiety that it wasn’t a “real looking” or safe credit card form. I would expect a cleaner looking form with some security Icons would convert better.

  23. Loved it! Great extensive walk-through! Will be using the comments to analyse our shopping cart platform!

  24. Conversion tip.

    In the right corner you have a floating registration form with a download freebie. I entered my email and pressed download midway through the article. When I clicked I was taken to a thank you page.
    Dish the thank you in a new overlay in the same place and track with event tracking (click on download button), so the reading experience is uninterupted

  25. This is a very good article , like the way you have approached it.

  26. Hey Peep,

    Super thourough walk-trough. Thanks for sharing this.

    I have a question regarding coupons. I was working for a huge retailer here in Germany and we’ve used to have so many complaints regarding coupons in general. One of the main issue for PM team was of course how and where place the input field.

    I understand the reasoning behind:

    Because in the end there more customers without a coupon anyways. Moreover coupons are just bad for the RPU.

    However, for many people, especially new customers coupon is a trigger to buy. They can easily abandond their cart if they see that they have to pay full price.

    Maybe there is a way to personalize it, based on cookie information so make it more/less prominent for new visitors.

    What do you think?

  27. Great content for landing page design! It effects every business o generate leads

Comments are closed.

Current article:

How to Design an eCommerce Checkout Flow That Converts