Design Checkouts that Convert Better

When a user is deciding whether or not to purchase an item, they’re likely weighing up multiple (often contrasting) benefits and objections.

• “This item has fewer reviews, but is cheaper, will it break?”
• “Will this item arrive before Christmas?”
• “Is this actually worth $100?”

If you were sitting having a 1-on-1 conversation with this person, you may be able to identify their main objections, and reassure them.

• “Oh, if it does break, Amazon are great at returns anyway, you don’t even need to call anyone, it’s all on a live chat”.

Making decisions is tiring. It increases the 🧠 Cognitive Load, and people end up with 🛌🏽 Decision Fatigue.

One factor that makes checkout UX so tricky, is that without speaking to that specific customer, you need to preempt what these objections may be, and identify which are worth tackling.

Etsy have identified that items without reviews create anxiety (e.g., “this item is going to fall apart in my hands the moment I touch it”).

And so, they’ll show a banner reassuring the user that this seller has positive reviews for other items.

In the run-up to Christmas, Amazon will say if an item won’t arrive on time, and instead suggest an instant gift card.

Or think about booking a seat for a sports game, in a stadium that you’ve never been to before—what’s a major concern?

Mine is usually “is this seat going to be rubbish?”. 

You’re weighing up the cost of the seat, with what you think the view will be.

That’s why StubHub will show approximate seating views.

You can’t try and solve every possible anxiety, but by being contextual and dynamic, you can (and should) address the biggest ones.

Whilst Etsy, Amazon & StubHub have attempted to encourage action by soothing anxiety (the cons).

It’s not a fantastic design, but Argos combines 🙋‍♂️ Social Proof with 🪫 Scarcity.

Deliveroo will show you a timer after you’ve placed an order, to add more items without paying an additional delivery fee.

Airbnb will literally prompt you that something is a “rare find”.

It’s all about creating scarcity, and amplifying the pressure to take an action.

What happens if the item isn’t available right now?

The “default” thing to do would be to just say that the item is unavailable, but then you’re forcing the users to either select another item (🛌🏽 Decision Fatigue) or give up.

IKEA will offer to remind you when the item is back in stock.

Now, this would be better if it gave an estimated time frame (i.e., do they usually restock in 5 days? 5 weeks?).

Dominos—as I covered in my case study—had a big problem with people trawling the internet for coupons before placing an order.

This had a few unwanted consequences:

• People only wanted to place an order when there was a deal.
• Small discounts were no longer enticing, people as thought that there may be a juicy 50% coupon one click away.
• Searching the internet for coupons was a great way for competitors to target keywords (e.g., “Dominos Coupon”), and try to poach those primed users.

As a business, you almost never want your users to be Googling for coupon codes. But, you do want to keyword target your competitors.

To help this (it worked), Dominos automatically shows you a “great” coupon if you enter an incorrect one.

Advertising a promo code on your homepage won’t have a 100% redemption rate, even if everyone wanted that discount.

Some people will expect the code to be automatically applied. They won’t copy it, might assume it wasn’t valid for their purchase, and may struggle to find it again.

These people might abandon their cart.

The best UX in this instance is to automatically apply it, but if you can’t technically do that, copy John Lewis, and put a banner in the checkout.

This is a really key part of the UX for many eCommerce platforms.

We saw the Deliveroo example earlier, where people were given a timer to add more items into their basket.

But there are a bunch of options and interesting experiments to try.

One option is to quite literally help your users reach a target spend.

This leans into the 🥅 Goal Gradient Effect (i.e., it’s motivating to make progress towards something).

Shop utilises a progress bar, with clear context about how to get free shipping.

This doesn’t actually need to be shipping. It could be a discount, or a free hat.

If you’re selling a subscription, with multiple payment frequencies (e.g., monthly and annually), you probably offer a discount for the longer options.

Well, make sure you’re upselling that discount, if the user goes to purchase the cheaper alternative.

It’s not about bombarding them with the deal. It’s about putting the discount in clear monetary terms, and making it easy to switch.

“Save $6 in a single-click by tapping this toggle”.

(Note: this is a setting that Stripe lets you toggle on).

• Etsy will notify you if an item that previously was in your basket, but has since been removed, is now discounted.
  • i.e., “you didn’t want this at $20, but it’s now $12”.
• Dominos have a ‘shake to shuffle’ interactive easter egg, where you can shake your phone to find a new side to add.
• Sweetgreens aim to reduce post-purchase frustration by notifying you if you’re about to order a salad without selecting a free dressing.