7 Shopping Cart Design Guidelines
If your shopping cart is poorly designed — it will negatively affect the user experience, resulting in low conversion rates.
Have you ever added something to the cart but then never completed the purchase due to whatever reason? Cart abandonment is the main nemesis for anyone running an e-commerce business, especially since the average abandonment rate for 2018 is 75.6%. When you consider the acquisition cost involved for each user visit, a high cart abandonment rate can be deadly for your bottom line.
In all fairness, a percentage of abandonments are simply users who are just browsing — window shopping, price comparisons, etc. But leaving the “just browsing” users aside, there are other reasons for cart abandonment which good design can help, such as;
- Complicated checkout process
- Lack of trust
- No transparency in pricing and cost
The purpose of this article is to highlight some of the critical guidelines when it comes to designing better shopping carts, along with examples from various websites to help you get a better idea of how to incorporate them.
Cart notification
Usually, most e-commerce sites would indicate adding a product to the shopping cart by adding a number to the cart icon. This is fine, but there’s a risk that the user might not notice it. To draw the user’s attention, it’s best to use a secondary indicator to inform them that the product has been successfully added to their cart.
A good example would be Everlane, which uses their mini-cart to inform the user that their item has been added to the cart, providing a consistent feedback loop on their action. This also allows the user to quickly review the product to make sure that it’s correct, preventing them from making a wrong purchase.
Detailed summary
One of the cart page’s primary purposes is to allow the user to review their order before completing their purchase. A detailed summary is required to display all relevant information that would help build confidence and increase conversion rates to help them do so.
Some of the critical pieces of information to include are:
- Product Image
- Name
- Specifications
- Quantity
- Price
- Shipping Cost
- Estimated date of delivery
On their shopping cart page, Warby Parker makes it clear and easy for the user to review their order, decreasing the percentage of users abandoning their cart due to unclear information. They even include additional details that you selected, such as frame width, prescription type, etc, to prevent users from ordering the wrong product.
Edit option
It’s essential to allow your users to easily edit their order details on the shopping cart page instead of redirecting them back to the product page, or worst, removing and re-adding the product again. By doing so, you are making the user’s life easier, ultimately increasing your conversion rates.
It’s common to allow the user to edit the quantity of a product, but ASOS goes the extra mile by making the color and size editable within the shopping cart page. The product image and details will also be updated to reflect any changes made to enforce the feedback loop and prevent any confusion.
Show total cost
One of the main reasons for cart abandonment, as mentioned above, is the inability of users to calculate the total order cost up-front. When it comes to payment, it’s crucial to be transparent about the amount that you will be charging the user.
The payment summary should indicate all applicable costs; taxes, shipping, sub-total, etc. The information should be aligned, with proper spacing, and not include any confusing financial jargon. There should not be any shady or dubious charges added at the last minute of the checkout process.
Shipping cost
If you offer different shipping options, the cheapest or most popular option should be pre-selected, rather than leaving it empty. This allows the user to estimate how much extra is required and not be surprised when they see the final bill.
If you offer free shipping, which is fantastic, then make it clear and evident to the user as it would sway them to complete the purchase. If there’s a minimum amount required for the order to qualify for free shipping, show an indication of how much more is required.
Sign in barrier
It’s super annoying whenever a website forces you to log in or sign up before you can proceed to the checkout page. While it may seem like a simple task, it can be relatively jarring for the user, resulting in a negative user experience and lower conversion rates — 30% of users end up abandoning their cart as a result.
When cart abandonment rates are that high, you should prioritize the sale rather than data collection.
Revolve mitigated this stumbling block by allowing its users to “checkout as a guest” while still keep the option to “sign-in” open. This creates a positive experience for new users who are too lazy to create an account.
The mini cart
The mini-cart usually is a dropdown that contains a summary of your cart details; it’s used to give the user a glance at their cart without leaving the current page that they’re on. It could also act as a notification when users add a product to their cart, similar to the Everlane example.
The mini-cart has 4 essential components;
- Product information; must be linked to the individual product page
- Total cost
- Shopping cart button
- Checkout button
Save for later
Some users might not be able to complete their order within a single session due to various reasons. It’s important to store their cart information for some time to prevent frustration, which may result in the user abandoning the order altogether.
A “save for later” or “add to favorites” button can help reduce cart abandonment by allowing the user to continue their shopping at a future time. For example, if a user saves a product on Friday and returns on Sunday to confirm their purchase, he wouldn’t need to relocate the product again — improving the whole buying experience.
HBX allows the user to save their products into personalized wishlists, and they could easily add them back to the cart within the shopping cart page itself. This reduces the number of clicks required by the user and optimizes the entire shopping experience. It also serves as a reminder that they have saved items in the scenario that they have forgotten about them.
