When was the last time you looked at your own checkout page design objectively, or tried using it yourself? With $4.6 trillion worth of merchandise being abandoned in online shopping carts in 2016, I’d recommend taking a look now. As much as 60% of those losses could be recoverable by retailers who are committed to solving the problem; it’s just a matter of knowing what to fix.

Back to your own page—how would you describe it? How might your customers describe it? I don’t know about you, but I find most checkout pages intimidating and time-consuming (and maybe a couple of other words I can’t say here). You can switch out the adjectives as you like, but the point remains the same: There’s a good chance your checkout page design isn’t as optimal as you think it is.

And that’s a problem. Your checkout page is a critical piece of your brand’s user experience, so if your shoppers aren’t enjoying the checkout process—right down to inputting the last number in their credit card sequence—the risk of cart abandonment is real. At any moment, the customer might get distracted or frustrated, and move on.

So, what does it take to create a checkout page that’s frictionless? I dug around for some checkout page design inspiration to get you going. Take a look and see how your own page compares.

4 Stellar Checkout Page Design Examples

1. Cirkul



Why I like it: Because it’s clean and simple.

Clean pages and simple forms are the opposite of friction—which is why I like this checkout page so much. It has an attractive modern design that nicely accommodates the shipping and payment information onto a single page. And speaking of payment information, Cirkul sticks to the necessities: name, credit card number, card expiration date, and card security code (CVV/CVC). Short and sweet. You can’t go wrong with the clean-cut look—it never goes out of fashion, which is why Cirkul and many other LemonStand powered stores convert so well.

2. FanCard’s Mobile Checkout

Why I like it: Because it’s mobile checkout at its finest.

Let’s face it—people making mobile payments are particularly prone to distraction. The next phone call, text, or notification could be rolling in any second. So if you really want that sale, just git ‘er done. FanCard clearly knows that eWallets are one of the best ways to accomplish that, which is why it offers an Apple Pay option for mobile checkout in addition to an inline option. eWallets offer one-touch checkout (so all FanCard’s customers can complete their purchases in a snap) and exceptional security (for reduced fraud); they have also been shown to improve conversion rates for some of the businesses that use them.

3. Spotify

Why I like it: It offers multiple payment methods.

Aside from the fact that its checkout page asks for the absolute bare minimum of information (which we already identified as a good thing), Spotify makes sure customers can pay using any method they choose. Selecting a country produces a variety of localized payment methods as options (the ones shown in the image above are for German customers). And since the checkout page converts the purchase price automatically, there’s no need to do currency conversions in your head (whew). Clearly Spotify is working hard to satisfy customers in every part of the world—and in my view, it’s working.

Related posts:  eCommerce Heatmaps for Better Customer Interaction and Conversions

4. Prezi


Why I like it: It makes me happy. Literally.

OK, so they’re asking me for a bit more information than I typically like (I wish I didn’t have to open an account to buy their product), but I actually smiled when I was filling out the form fields at the messages that popped up as a result of my answers. (And I agree, my name is great.) Payments are important, but that doesn’t mean submitting payment information has to put us to sleep. If your company has any personality lurking underneath that slick payment facade, let it out! It only makes customers happier to be associated with you.

Other Payment Page Best Practices

  • Keep coupons low-key. Calling attention to coupon and promo codes is like waking up the theoretical tiger. When people see an empty field asking them to insert a coupon code, they immediately want to fill it in—even if they don’t have a coupon. Many customers will leave your site, head to Google, and start searching. The internet being what it is, it’s the ultimate distraction. Customers may eventually get pulled away from the task of searching for a coupon and abandon the purchase altogether or, even worse, stumble on a coupon for the competition. Instead, make the coupon field available for those in possession of this bit of shopper’s gold with some subtle positioning of that tiny phrase, “Have a coupon?” Those who have one will find it; those who don’t will likely ignore it and continue the checkout process.
  • Offer digital wallet options like PayPal Express Checkout, Amazon Pay, or Apple Pay if possible. The easier it is for people to buy something, the more likely it is they’ll do it! And with mobile payments on the rise, customers want checkout workarounds that don’t require a credit card at the ready. Digital wallets eliminate the need to type in billing and shipping information, streamlining the payment process to the point of almost being nonexistent. They also utilize advanced security technology to ensure high-level protection for both you and the customers.

How does your checkout page stack up?

Now that you’ve seen these checkout page design examples, take one more look at your own site’s payment process—how does it compare? If some or all of these elements are missing, there’s more you can do to up your payment processing game.