Mini Cart Redesign
The North Face & Vans
In order to provide a more supportive browsing experience, we are building a minicart that differentiates itself from the cart, reduces the amount of interactions to a minimum and provides clear information and value.
The Problem
Product deletions in Mini Cart were up by 30% with the
old product card layout.
Hypothesis: Multiple 'X' icons with different functionality in close proximity is confusing to users. They may be deleting the top product when they think they are closing the mini cart.
The Brand requires communication regarding spend threshold type promotions as well as discount savings.
Hypothesis: Adding this messaging could be both helpful to consumers who are making purchase decisions based on deals and savings.
Addition of Checkout CTA led to more users entering the checkout flow, but a higher dropoff rate.
Hypothesis: Users may not understand the difference between the two CTAs and could be expecting to see the cart first or find that some information is missing in the first checkout screen.
Discovery Recap
HEADLINES
-
Minicart is primarily seen as a cart confirmation.
-
Must haves include:
-
Visual representation of the customer's choice.
-
Size, color, dimensions and other relevant item attributes.
-
Product quantity.
-
Product price, order total and applicable discounts. The more certainty, the higher possibility of conversion.
-
-
Too many options, or the sense that the minicart is an “in-between” or inadequate cart can lead to hesitation and abandonment.
RECOMMENDATIONS
-
Keep interactions to 3 or 4 max (This includes separate CTAs for cart, checkout and express checkout)
-
Consider 1 CTA to lead to cart - drive consumers through Cart
-
Ensure the minicart is non obscuring
-
Show total price and estimated shipping if possible
Based on the recommendation of limiting mini cart interactions we conducted a competitive analysis of the interactions supported by other brands in this industry.
Concepts For Testing
Concept 1
Concept 2
Concept 3
Concept 4
Concept 5
Research Methodology
Conceptual Usability Test
Task: Adding an item to the cart, understanding the mini cart, deleting an item, and checking out.
Across 5 iterative Concepts:
Gen Pop Audience
Participants: 40
Age 18-45
Income: 25 - 150k
Device: Mobile
Location: US/CA
Results
TOP LEVEL FINDINGS
-
All participants focused at-first on price and savings
-
1 CTA performed better than two CTAs
-
Total, but incomplete (w/o tax and shipping) can be hard to interpret.
-
The value of “free shipping” is only as good as the ability to find items that are less than shipping costs
OTHER FINDINGS
-
Users want to see as much of a price breakdown as possible, but when itemized, it feels incomplete.
-
Sales amount performed better than sales percentage. Showing total savings tested positively
-
Participants understood the $2.50 to free shipping. The value of “free shipping” is determined by items that might be less than shipping cost
-
The “until free shipping” messaging should be gated. No one wants to see $75.00 until free shipping
-
Several users thought the free shipping banner should be in cart and checkout as well
-
All users understood how to delete. There was no discernible difference between remove and trashcan
FUTURE OPPORTUNITIES
-
Free shipping progress should also be in cart and checkout
-
Users appreciate total price as far up the funnel as possible AND it will help them determine if they want to add an item for free shipping.
-
If we do break down price in the mini cart, consider ways to show estimated tax and shipping as well
Final Design
Component Variations
Conclusion
By utilizing real data and research we were able to identify key problem areas and make rapid design improvements. We improved accessibility, delete functionality, cart entry, and savings communication leading to an all around better shopping experience for consumers of The North Face and Vans.