How to Build a High Converting e-Commerce Checkout Flow

How to Build a High Converting e-Commerce Checkout Flow

Optimizing the e-commerce checkout flow – everything that happens between “add to cart” and the purchase confirmation page – is a science. A science that requires research, study, and of course, testing.

But you’ve got a credit card payment system. Isn’t that enough?

Not if your customers are abandoning their shopping carts. That means you’re hemorrhaging sales from already-motivated customers, often unnecessarily.

Even small gains in optimizing checkout flows can have a big impact:

“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.” – Peep Laja, ConversionXL

What is shopping cart / checkout flow?

Shopping cart, e-commerce checkout flow, checkout funnel – whatever term you use, we’re talking about the moment your customer views their cart all the way until they see the “thank you” page at the end of their purchase process. Don’t confuse this with the “sales funnel,” that can begin long before the customer even lands on your website. Checkout flow is the final step.

The customer knows what they want.

They’ve added the product to the cart.

Then, they have two choices: Abandon the cart, or complete the purchase.

You’d be amazed how many motivated customers abandon the cart – or maybe you wouldn’t be. Maybe they’re abandoning your shopping cart and you’re wondering why.

Sample e-Commerce Shopping Cart Flow
Sample e-Commerce Shopping Cart Flow

Typical conversion issues

The object of the game is to get more people to complete the purchase process. To do that, we have to look at what could be causing cart abandonment, and the possible causes are legion.

Some CROs explain the core issue using the Fogg behavior model, an equation that looks like this:

Behavior = Motivation x Ability x Trigger

Essentially, the more motivated the buyer is, and the easier it is to complete the action, the more likely the buyer is to complete the action. Makes sense, right? Conversely, as motivation decreases and difficulty increases (ie. something prevents them from being able to complete the steps), the fewer conversions you’ll see.

In practice, I’ll tell you what this looks like at my house.

I see the thing I want on a website. I add it to cart. I don’t see PayPal *anywhere* which means I need to run across the house, dig around in my purse for my wallet, pry out my credit card, run back, enter the long string of numbers, and finally complete the purchase process.

You don’t want to know how many carts I’ve abandoned because of that long hallway between me and my credit card. Yes, I’m that lazy. And yes, your customers are too.

All friction can basically be traced back to the Fogg behavior equation, but let’s look at the specific causes of friction commonly found in e-commerce checkout processes.

Friction Points

  • Price is different/higher than expected once shipping and tax is added in. This is a nasty surprise for the would-be purchaser, causing them to exit the cart.
  • The “sale” you promoted, that seemed like it applied store-wide, doesn’t apply to everything, which feels like a bait and switch.
Friction Point issue for e-Commerce Checkout Flow
Friction Point issue for e-Commerce Checkout Flow
  • The website doesn’t look professional, or hasn’t been updated in 20 years. This makes people nervous.
  • Images don’t look professional, or look like general stock images.
  • There are no user reviews or testimonials – ie. no social proof that the product is any good, or that your service is good. This makes people very nervous.
  • You have no trust badges – no security seals, no Better Business Bureau badge, etc. According to ConversionXL research, the Paypal badge is more trusted than McAfee, Norton, SiteLock, BBB or Google (though those are all good to have).
    You don’t state your privacy policy – how are you using their information exactly? Are you sharing it with third parties? Are you selling it? No? Say so!
  • Your return policy is absent or unclear. People want to know what happens if the product doesn’t work out, or arrives after having been trampled by elephantine FedEx employees.
  • You don’t display contact information – nothing that tells customers “this is a real business, you can hunt us down if we don’t deliver on our promises.”

All of these are serious credibility issues that kill conversions. They’re also very easy to fix.

However, there’s another class of conversion killers that have more to do with usability.

UX Friction

  • You don’t have a “wishlist” feature on your site, so if customers want to save a product to buy later, they put it in their cart instead – which looks like they’re “abandoning,” when they’re really just saving it for later.
  • It’s not clear what’s in the cart, how many of each item is in the cart, or how much products will cost with shopping and taxes.
  • It’s not clear how to make changes, like updating quantity or removing products.
  • It’s not clear how or when the user should input their discount/sale code. The more pages it takes to find the discount code box, the more nervous your user will be, and the more likely to bail.
  • The “Continue Checkout” button gets lost in the rest of the page. Again, the issue is clarity.You don’t clearly list the forms of payment you accept.
  • You don’t offer the user’s preferred way to pay, like Paypal, Visa, or American Express, etc.

If it’s still not clear – CLARITY is the key to conversion. People like to know what to expect, and they really like it when what they expect actually happens. Do that and you’ve cracked the code. But, as they say, if it were that easy, everyone would be doing it.

Let’s look at how one of my favorite e-commerce stores does it. Modcloth.

A Pictorial Case Study of a Fun – and Functional – e-Commerce Checkout Flow

e-Commerce Checkout Flow
e-Commerce Checkout Flow
e-Commerce Checkout Flow
e-Commerce Checkout Flow
e-Commerce Checkout Flow
e-Commerce Checkout Flow
e-Commerce Checkout Flow
e-Commerce Checkout Flow
e-Commerce Checkout Flow
e-Commerce Checkout Flow
e-Commerce Checkout Flow
e-Commerce Checkout Flow
e-Commerce Checkout Flow
e-Commerce Checkout Flow

I’m not saying Modcloth does *everything* right. In fact, I’d recommend they make their “Apply a Discount” CTA larger and clearer on their first cart page. But for the most part, they go above and beyond to deliver a purchasing experience that answers all the questions, feels secure, and is as frictionless as possible.

Shortlist of best practices for a successful shopping experience

  • No surprises. Don’t even take the customer to another page once they’ve added a product to their cart, because that’s not what the ‘add to cart’ button is for. No. Surprises.
  • Make your checkout process as short as possible. Every second, every page, and every click counts.
  • Clarity is your first goal, from the moment they add an item to the cart to the can’t-miss confirmation page that includes simple next steps for what to expect.
  • Include trust-builders on your product pages and your cart pages, like user reviews, number of people also currently viewing the product (social proof), security seals, privacy policies, return policies, warranty information, and contact information for your business – including address.
  • Tell shoppers an approximate shipping time, and offer to send a tracking number when one becomes available.
  • Include a shipping and tax calculator on your product pages, not just cart pages. Often, people only add a product to the cart so they can see the actual price once shipping and tax is included. This will weed out the lookie-loos.

Optimizing for a frictionless process (or as close to it as possible)

Conversion rate optimization for the shopping cart process is all about making it clear, and making it fast. Begin by testing how long each step of the buying experience takes, from the time a customer lands on your website to when the purchase confirmation page. Your conversion issue might not be in the cart – it might be that it takes too long to get to the cart. You’ll want to eliminate the possibility first (and uncover other possible points of friction along the way).

From there, make a list of hypotheses about what might be creating friction throughout your checkout flow, page by page, item by item, button by button. These hypotheses shouldn’t just come from your CRO, CEO, or web design team – ask your customers. Ask your friends. Ask strangers if everything is clear, and if there is any part of the process that is harder than it should be.

Then you can A/B test and create a shopping cart that doesn’t get abandoned – at least, not by your target customers.

Published by

SaaS Consultant & Customer Success Evangelist. Founder at Authentic Curation. Moderator at @ProductHunt & @GrowthHackers. Previously: Growth at @Inboundorg. INFJ.