Cart Preview on Masthead
Released on Thursday, August 11, 2022.
Customer Problem
The only way for a customer to see the items in their cart is to go to the Shopping Cart page, which can result in the customer going back and forth between different parts of the site as they shop.
Solution
Rather than having to go to Cart to see items, provide customers a preview of the last 3 items added to Cart from the masthead Cart icon. From the masthead cart icon, the customer can choose to go to Cart or directly to Checkout.
Goals
To allow DIY/Pro customers to preview of the items in their Cart from the masthead.
Provide the user with the ability to checkout from anywhere in their shopping journey or go to the Shopping Cart page to make adjustments.
Reduce Cart abandonment.
Increase conversion of purchase via the masthead on Lowes.com.
Process
01. Discovery & Research
The first step in my process was to meet with the product manager to go over the customer problem, customer feedback, requirements and goals. Part of this process includes doing a competitive analysis of other retailers with this feature.
02. Strategy
After understanding the customer problem, I met with a content strategist and product manager to go over my findings, wireframe the component, identify/understand user flows and interactions throughout the experience for mobile web and desktop, and outline the hierarchy of the information on the component.
03. Design
Once we had defined the strategy and the content, I designed the component for mobile web and desktop. I utilized our Backyard design system, made sure to maintain UI consistency with the Cart page and further defined the interactions for both platforms.
04. Evaluate & Validate
Once the designs and prototypes were ready, I worked with a researcher to conduct moderated testing for mobile web and desktop. The Participants (Millennial DIY, Older DIY, and Pro) reacted positively to the cart preview function. On mobile, 6 out of 7 participants preferred the cart preview prototype to the existing experience with a separate cart page. Most participants articulated specifically that they preferred the preview over navigating directly to the page, even without being prompted to say so. After conducting the qualitative testing, we released the designs into an A/B test with our live customers. The test results came back positive and showed that CVR on desktop was significantly higher (+2bps), and was flat on mobile web.
Competitive Analysis
Prototype
Final Design
A/B Testing Metrics
$66M Incremental Revenue driven from +3bps lift in Desktop Conversion rate.
13% improvement in customers back and forth between Top of Funnel Experiences & Reviewing Cart.
This was done with the partnership of the A/B Testing team and Engineering.
Hypothesis/Background
If we implement a Cart masthead preview, there will be less visits to cart with no harm to conversion, because customers can see a preview of those items from the masthead.
A/B Testing
Mobile Web:
Visits to Checkout from Mobile Web increased significantly by +10bps.
Only around 2.5% of all visits in the variant engaged with the Masthead hover feature on Mobile. For visits that engaged, all metrics trended better than the overall variant performance.
The additional click that the user would have to take to get to cart, did not harm the customer experience on Mobile.
Desktop:
Visits to Checkout from Desktop increased significantly by +3bps.
Approximately 9% of all visits in the variant engaged with the Masthead hover feature. For visits that engaged, all metrics trended better than the overall variant performance.
Next Steps
Explore displaying more than three items in the cart preview and consider a scroll wheel for navigating through a larger number of items within the preview.
Allow users to edit quantity and remove an item from the Cart preview.