When you consider that each visitor costs money to acquire, it becomes clear that a high cart abandonment rate can easily cripple a business.
Have you ever visited an online store, added a product to your cart, and then never completed the purchase?
This is called cart abandonment. It might not seem like a big deal, but with an average online shopping cart abandonment rate of 69.89% (according to the Baymard Institute), it’s costly for merchants.
So, as a web designer, what can you do to help your clients fix this leak in their sales funnel? Here are 6 places to start.
1. Place the shopping cart icon in the upper right corner of the page
Amazon answered the question of where to put the shopping cart icon back in the 90s when they put it in the top right.
As Amazon’s site changed and evolved, they kept the icon in the upper right corner — but nudging it even further right.
Online shoppers have had over 20 years of conditioning when it comes to looking for the shopping cart icon in the upper right corner of the homepage. When you’re designing for optimal performance and user experience, working against habit and muscle memory is only going to hurt.
2. Use the shopping cart icon to display the number of items in the cart
Have you ever added a product to your cart and been interrupted before you could finish the purchase? It’s easy to forget to return — especially with nonessential items.
Which is why it’s important to remind customers about their shopping carts.
If you visit Mindful Souls, for example, and your cart is empty, you’ll see a zero next to the shopping cart icon:
But as soon as you add something to your cart, the icon turns red and displays the number of items in your cart:
Say you were about to buy the Oceanic Fluorite Healing Wand when your BFF called and you completely forgot. Well, the next time you visit Mindful Souls, that obnoxious-red icon will remind you!
This goes a long way to nudging distracted customers and salvaging sales.
3. Confirm when items are added to the cart
When a customer adds a product to their cart, confirmation keeps them from wondering if it worked or not.
Amazon is a great example of this — they not only provide confirmation, but also cross-sell with a display of related products.
Online stores often take customers straight to the cart page when they when they add something to their cart. But this interrupts their shopping, makes it more difficult to add items, and can reduce the average order value.
4. Embrace the mini cart
A mini cart is a pop-up that contains the most important cart details. It gives customers a glance without having to leave the product page they’re on.
For example, let's say I'm shopping on Minaal and can’t remember if I added the tool case to my cart yet. I can check what’s in my cart by clicking the shopping cart icon without losing my spot on the site.
As you can see above, I do have the tool case in my cart. I can click “Continue shopping” and go back to browsing.
Minaal’s mini cart has 3 essential components: the order summary, the subtotal, and navigation buttons. This is really all a mini cart needs — customers can click through to the cart page if they want more details.
It's also important to link the in-cart item to its product page — which Minaal does. Cart pages that don't allow for this create frustrating experiences for shoppers.
5. Provide information about free shipping
High shipping fees are the number one reason people abandon their shopping carts. Luckily, this is an easy fix — offer free shipping on orders over a certain amount and then nudge your customers toward that amount.
For example, Mindful Souls reminds you on their cart page that they offer free shipping anywhere in the USA for orders over $35.
You can see above that I’m only $5.03 away from free shipping, so I’m likely to add something to my order to get there.
Don’t just offer free shipping — actively persuade people to take advantage of it by reminding them about it.
6. Lead customers toward the checkout
The shopping cart page has many functions. It allows customers to see the order, change quantities, remove items, return to the product page, etc. But the main goal of the shopping cart page is to move customers to the next stage in the sales funnel: the checkout.
Take a look at how Burton uses design to nudge people toward that next step:
Burton has a black, white, and grey color scheme, which makes their blue checkout button stand out. A checkout button that contrasts your overall color scheme is a great practice.
The checkout button should be the only call to action above the fold. You can add product recommendations below, but don’t emphasize them — this will distract people from proceeding to the checkout.
Pro tip: the idea that a page can have many functions but one goal is the core of conversion-rate optimization. It’s a good principle to keep in mind.
Small changes for a big impact
Even a tiny increase in your conversion rate can add up to a significant amount of money over an extended period of time. It’s important to research best practices and apply them to each page you’re designing.
Design should be persuasive. Use it to guide the visitor through your site towards checkout. Know the next step you want visitors to take and lead them there.