Designing a better shopping cart experience

Carolina Koladzyn
Nov 22, 2017 · 10 min read

Today’s digital consumer is connected like never before. For retailers, this presents both an opportunity and challenge. Below are some usability and design tips for the mini cart and full cart shopping experience.

1. Locating the shopping cart

Customers should be able to spot the cart icon. The standard is to place the cart icon in the top right corner of an e-commerce site but avoid placing cart icon in dark bars in the top navigation bar.

Avoid putting cart in dark bars in top navigation bar.

Our brains scan light space (white) looking for site functions, and dark skinny bars can be very easily missed.

Although thenorthface.com is not in the best location for the shopping cart it’s more noticeable due to the white background.

2. Show number of items

Display the number of items in the cart, even if it’s zero. This lets the user know they have to add items to their cart.

Amazon.com displays the number of items in the cart.

3. Remind users to add products to the shopping cart

When the shopping cart is empty, remind your users that the cart is empty and they should add products. You can provide shopping instructions, a call to action or product recommendations that tempts users to add to their cart.

Topshop.com offers product recommendations based on search history within the shopping cart when products have not been added yet.
Thenorthface.com lets the user clearly know that they have zero items in their cart and provides a call to action to continue to shop as well as product recommendations.

4. Mini shopping cart

Provide a mini shopping cart to allow customers to keep track of how much they spend and what they buy. Your mini cart should provide:

  1. A link to view the full page cart instead of taking the user directly to checkout. Such as “view cart” or “view bag”.
Asos.com provides a secondary call to action to view the bag.

2. Your users should be able to edit and remove items within the mini . shopping cart.

J-Crew.com allows the user to edit their selection and remove the item within the mini-cart. Click on edit takes the user to the full cart page and delete removes the item.

3. If a user decides to remove an item within the mini cart provide some sort of validation that the item has been removed.

Asos.com provides inline validation that an item has been removed.

5. Notify user when item is added to shopping cart

When a customer adds an item to their cart provide a confirmation message that the item has been added to cart. Users don’t want to search the page to find out if an item was added, and you surely don’t want them leaving the shopping process to find out if an item has been added to the shopping cart or not.

Feedback can be accomplished in a variety of ways, best practices include an overlay or modal. Try and avoid subtle design changes such as adding a single line of text to a page, or updating the quantity of items listed near a shopping cart. These changes are often too subtle and users end up adding more items to their cart which causes frustration during the checkout process. Below are three great examples that let users know an item has been added to their cart.

Adidas.com let’s users know that an item has been added with an overlay modal. User has to close the overlay modal to continue shopping.
Nike.com let’s users know that an item has been added with an overlay modal located near the cart. User has to close the overlay modal to continue shopping.
Topshop.com let’s a user know that an item has been added to the cart in a less disruptive manner. Modal closes on its own after a couple seconds.

Full cart page

Users make their final purchase decisions when they are viewing the full cart page. There they review and compare the items they have chosen, check whether the total is within their budget or whether they get free shipping etc. So, design your full cart page in such a way that it assists your shoppers in their buying decision.

1. Identify how many items are in the cart

Like in the mini-cart you want to identify how many items are in the cart on the full cart page. This lets the user know how many items they have added to their cart.

Adidas.com displays the number of items near the title.

2. List product image and details

The final purchase decision is made on the full cart page, so its important that this page clearly summarizes the items. The cart, should include product image and details (size, color, price) enabling the user to differentiate an item from other similar items that they may be considering.

The product image is essential for users who are comparison shopping and to assist users who aren’t comparison shopping, by providing a quick visual summary of what’s in their cart. The image should be large enough for the user to identify the item and needs to reflect the users selection. This entails showing the item in the correct color or with the correct option so the user doesn’t doubt the selection.

Nike.com provides large product images and descriptions for each item.

3. Link cart items to full product details

Its important that your site provides users with easy access from the cart to the product detail page. Some users need additional information to make a purchase decision, they want to return to the product page in order to read more information or review product details. It’s important to link both the product image and product name to see more information. You should avoid hover states to indicate the product can be clicked on, because it entails a user to guess that the item is clickable.

4. Allow users to edit item in cart

Allow your users to easily edit the product on the cart page itself without having to navigate to the product page. There are variety of ways this can be achieved the two most common are inline editing and a pop-up screen. With either option make sure that the product image and details are updated once the user edits the item.

Lululemon.com allows the user to inline the item by displaying editable options in a dropdown.
Revolve.com provides an edit link that allows the user to inline edit the item and confirm the edit with an “update” button.
Gap.com highlights the editable options in link blue, on click the user is given a pop-up to edit the item and confirm the edit with an “update” button.

5. Allow users to remove item in cart

Provide a clear text link, delete icon or button to remove an item from cart and name it remove instead of delete. The link or button should look clickable, but don’t rely on color alone. Surprisingly a large number of users suffer from different forms of color blindness and have difficulty interpreting colors. Instead focus on the position of the remove link, icon or button. Most importantly, once a user clicks the remove link, instead of removing the item immediately ask if the click was intentional.

Topshop.com provides a remove link, that asks if the click to remove the item is intentional.

6. Pre-check out tax and shipping estimates

Many e-commerce sites lose users at the cart page because they can’t preview their final charges before initiating checkout. In a recent study by UPS and ComScore, 37% reported they abandon carts when this information is presented too late in the checkout process. To solve for this cart abandonment offer a pre-checkout shipping feature thats located in the users eye path.

Revolve.com displays the total and shipping cost on the cart page but allows the user to change the shipping options by clicking the “view options” link.
Lululemon displays the total and shipping cost on the cart page but allows the user to change the shipping options on the same screen.

7. Allow users to calculate shipping in the cart page

Allow your user to calculate shipping in the cart page if your shipping charges vary for different locations. If the user is logged in then fill the shipping location based on the default delivery address.

J-Crew.com lets the user calculate the shipping charges before proceeding to checkout.

8. Highlighting the order summary box

Users will want to know how much they’re spending, highlighting the summary box differentiates itself from the rest of the elements on the page, making it easy for users to see. Ensure that the elements in the summery box are aligned, good alignment bridges the visual gap between every element in your design, helping users process the information faster.

Target.com highlights their order summary box with a light grey color fill that contrasts with the rest of the elements on the page, making it easy for users to see it but not to bold that it screams in users faces.

9. Coupon fields

Coupon code fields are useful for giving customers special discounts. However, putting a coupon code field at the beginning of your form without promo codes available on that page can hurt your conversion rate. The coupon code box acts as a trigger that prompts users to search for a coupon if they don’t have one. Once the user leaves the checkout process to find a coupon it can lead them to find a better deal on a competitors site and it also trains them to expect some sort of discount each time they visit your site.

Rather than having your user abandon the cart to find a coupon through Google or search your site, provide coupon codes next to the promo code box.

Macys.com provides eligible coupons within the promo code box that a user can apply to their final purchase.

Another option is to minimize the visibility of the coupon field. The users who already have a coupon code will be looking for it and will find the location without too much additional effort.

J-Crew.com subtly hides the promotion code in an expanding element box below the cost summary.

10. Gift Options

Add a gift wrapping option to purchases that allows users to add a personal note to their gifts. This very simple add-on service which is easy to implement, has shown to increase average order value and makes users lives painless and easier during the holiday season. Studies show that users buy more items when you offer a gift option service and retailers make money by the margins that gift-wrapping allows. On average, gift-wrapping has a 50% profit margin per item.

Apple.com provides gift options underneath the product item.

Also, if the user is sending this gift to someone, you should let the user choose whether or not to include the price information in the invoice during delivery.

11. Checkout button

This is the most important button on the full cart page. Your button should be highlighted and placed in the users path (above the fold). Keep relevant text on the checkout button. The label should indicate the function of the button, with a clear message of what happens after the user clicks on the button. Avoid contextual labels like “continue” for the checkout button, instead use “pay now” or “proceed to checkout”.

Rei.com displays a “proceed to checkout” button right in the users eye path.

12. Display payment options

Showing a wide range of payment options and methods on the cart page will increase the chances of your users proceeding to the checkout page. However, you want to present this information in close proximity so the user can see all the available payment options and methods in a single view. This allows the user to view them as a collection mutually exclusive of choices and can compare the options.


Extra

1. Create urgency & scarcity

You can reduce cart abandonment by creating urgency and scarcity. Users tend to act quickly when an issue is important. Users tend to buy products when something is scarce. These two techniques change the consumer’s behavior toward supply and demand.

Urgency is when a user feels like they need to act quickly. Urgency can be created with the effects of a ticking clock. Having a limited amount of time to do something forces users to take action. Groupon, Asos, Adidas and other e-commerce sites all use this technique to drive up their conversions.

Adidas has a fixed and sticky timer counting down, giving the user 10–30mins (time depends on the demand of the product) to check out, once the 10–30mins are up it empty’s the cart.

If you sell products, you have stock to deal with. This is a legitimate source of scarcity. Scarcity is the feeling that a product or service is in short supply and about to run out. Specifying the number of items still available in stock if there are only few left creates a level of scarcity and leads to an increase in sale.

Amazon.com employs the scarcity technique to increase sales on some products.

2. Add to wishlist or save for later

The average abandoned cart rate for e-commerce is between 60%-80%. With numbers so high, many sites are implementing the “save for later” button, which is could also be called a “wish list”. Users don’t only add items to their cart to purchase right away. Users add items to:

  • Adjust their cart to fit a certain budget
  • Make product comparisons
  • Add and remove products to qualify for certain discounts

Having a wishlist or save for later button allow users the time to consider their purchases and make for easy return purchases. Furthermore, this design pattern works well for cross platform selling.

Asos.com uses cookies to store saved items for up to 60 days even if the customer is not signed in.

3. Cross-sell or up-sell

Back in 2006, Amazon reported that 35% of its revenue was direct results from up-sell and cross-sell efforts. Since then, many e-commerce sites are reporting similar results. On average, product recommendations are responsible for an average of 10–30% of eCommerce site revenues. You can maximize the shopping cart page by recommending personalized products, or showing what customers who bought this also bought, top selling items, or complete the look with these products.

Thenorthface.com recommends products the user may also like followed by products other customer have bought.

4. Persuade shoppers with offers

When users are on the cart page you can persuade them to add more products to the cart by offering something. The most common is offering free shipping on orders of a certain amount.

Walmart.com reminds users how much more they need to spend to get free shipping.

Conclusion

Every aspect of a site’s shopping cart interface (full cart page and mini cart) is important to the overall user experience and success of the site. Applying these and other usability/design tips can help increase your e-commerce sales and traffic.

Carolina Koladzyn

Written by

Great design can solve society’s biggest problems. Senior UX Designer at PWC Experience Center.

More From Medium

Welcome to a place where words matter. On Medium, smart voices and original ideas take center stage - with no ads in sight. Watch
Follow all the topics you care about, and we’ll deliver the best stories for you to your homepage and inbox. Explore
Get unlimited access to the best stories on Medium — and support writers while you’re at it. Just $5/month. Upgrade