Cart and Mini-Cart are an essential part of e-Commerce experience. You can easily imagine the importance of these components even if you think about offline shopping experience.
In rare cases, you might purchase only one thing. But when it’s a shopping day definitely you need a cart to carry all the things you’ve chosen.
So this is where the story about Cart and Mini-Cart begins.
Before making any changes to an existing website, I’ve started with a deeper research on what Cart and Mini-Cart actually is, what does it serve for and how does it work. I’ve read a pile of websites and examples, examined Do-S and Dont’s, tried to shop myself and experience the possible “gains and pains” an online-shopper might have. And here’s the experience I would like to share.
Note: I will do my best try to provide all the original links to the resources and examples. Yet in some cases that might be challenging.
Questions to be asked
While working on the project, I’ve found useful tips from the Invision Team on Wireframing. And the list of questions to be asked.
and the thing to keep in mind:
Your mission is to make it easier for your users to accomplish their goals (or for them to hit your conversion point or follow through on your call to action). By presenting your information in this way, you are aligning the business goals of your product with the needs of your users.
The Goals
Speaking about the goals, for business it would be increasing conversion rates.
Which actually can be achieved through improving users’ shopping experience and interaction with the Cart and Mini-Cart. It includes:
- quick and simple process
to begin the purchase process as quickly and easily as possible.
- clear identification when an item’s been added to the cart
- comfortable overview of what’s been added to the cart and the cost
- guidance on possible actions
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.
The ideas that I personally like is:
Helping users with making their shopping decisions
and
Guiding them through the website.
Mini-Cart
The mini-cart is normally a dropdown that contains a summary of your cart details, it’s used to give the user a glance of their cart without leaving the current page that they’re on. It could also act as a notification when the user adds a product to their cart
From this statement we get the first function of a mini-cart:
give the user a glance of their cart
While making a mini-cart you give an overview of what’s been actually added to the cart, how many things are there inside, and how much that is going to cost.
Shoppers add products to cart so that they can
* review or compare the items they have chosen,
* check whether the order total meets their budget
* or whether they qualify for free shipping
* etc.
From this you get an idea what needs to be included in mini-cart, and the main criteria about content arrangement — it should be properly spaced and aligned in a way that gives customers a quick overview of all the information.
Here’s the content you need to include:
• A nicely sized product image that correctly reflects the color or other options selected by the user
• The name of the product
• The price of the item
• The quantity added
• Additional text listing any options selected (size, color, etc.) *
- we usually call it “Attributes” which vary depending on the product specifics.
It’s also important to link the in-cart item to its product page — which Minaal does.
Basically both the cart and mini-cart have similar content. But mini-cart serves like a preview to the cart, where you can perform a wider range of actions and move to the next step.
In addition to that, you provide an opportunity for a user to choose what he actually wants to do:
- go directly to paying for what you’ve chosen (“Go to Checkout CTA” button)
- double-check yourself and make sure everything you wanted is included in the list as well as detailed costs (“View Cart” secondary button)
- or continue shopping from the place he stopped (“Continue Shopping” link, close “x” icon, tappable area on the left)
To sum it up, 3 essential components of a mini-cart:
* the order summary,
* the subtotal cost,
* and navigation buttons.
Cart
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.
Using this statement we can state the goals. In terms of business that will be moving customers to the next stage in the sales funnel in particular, and conversion rate optimization as a general one.
For customers this is
- see the order in details
- review or compare the items added
- make changes if necessary
- check whether it meets his budget
- get one step closer to acquiring the chosen items (moving to a simple checkout process)
Content organization
It’s important 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.
Total cost
The payment summary should clearly indicate
- all applicable costs;
- taxes,
- shipping,
- sub-total,
- etc.
Buttons
Provide edit and remove buttons next to each item so shoppers can easily edit their cart.
Commerce Cloud benchmarks indicate a 3.5% lift in conversion when the order summary and checkout button are above the fold in the cart. Data also indicates that when the checkout button resides with the order summary, like in the vineyard vines example below, checkout gets a 3 to 4 times higher click rate.
Best Practice:
- On desktop, place order summary and checkout buttons together in a right column so they are above the fold and easily accessible.
- On mobile, position order summary and checkout buttons at the top of the page and show the cart details below.
- Use a high contrast color for the checkout button. This call to action should be the most prominent on the page. On mobile, span the checkout button the entire width of the screen.
Small but Important
Adding a number in the Cart icon in the Header is quite common for e-commerce websites. But what if that is not enough, and how do we make it even more obvious to a user something’s been changed?
The idea I personally liked is going further and adding more visual weight to the cart with changing its colour once an item’s been added.
Thus we solve two problems:
- Users can infer to some degree if a major mistake (such as adding more than one of an item) was made.
- A change in the color can attract the eye even more and notify the user
BONUS: Things That Did Not Work for Us
Sometimes you might see an idea which seems absolutely amazing and you become really eager to apply it, as far as it promises smooth and comfortable user experience.
You start working on applying it to your concept, telling how wonderful that would be and how much that is going to improve users’ shopping experience… Until you face with your product specifics.
Such a discovery was “Save for Later” feature implemented for cases, when for instance you start choosing the things you want to have, but then go back to complete your purchase another day.
It really sounds fascinating and useful. BUT in case you are absolutely sure you have all the products in stock or refilled on a regular basis.
That idea works wonderfully for brands like Nike
or Sephora
even REVOLVE offers that
Yet, if you have a case when it’s a limited sale which is not open all the time and basically the customers are waiting for a shop to be open and get what they want during a specified period of time and cannot add unlimited items in their cart, that idea simply does not serve.
Due to the product specifics, it’s just not useful at all.
While a scenario with Cross-Selling in the Cart is a perfect match, to make sure your customers get the things they did not think of from the start during their shopping rush.
Basically, this is a real-life example of Myth #20: If it works for Amazon, it will work for you.
So the lesson learned for me: you’re designing for a specific product with its own shopping specifics. And this should also be kept in mind when making a decision what exactly should be included and what not.
Useful links (in addition to the mentioned above):
