Home Depot Mini Cart Experience
Project Overview: 2018
With around 2 million site visits a day, and around 100k of users going through the cart page for desktop, The Home Depot was missing one crucial component: A Minicart experience.
Minicart lets visitors see as each product is added to the cart without taking them out of the shopping process.
They can continue on seamlessly on the site, going to the checkout page only when they are ready to proceed, which ultimately enhances their shopping experience.
My Responsibilities
Conducted competitive research
Mapped out user flows
Designed wireframes
Collaboration with Content Strategists
Designed high-fidelity mockups
Ran user tests to determine feedback/iterations
Worked with IT/ Stakeholders to review and implement functionalities
Metrics
Daily users for desktop- Around 2.32M
Visitors that come through Cart: 100k Desktop
Time spent on Cart page: around 170 secs
“23.9% of all US online shoppers have abandoned orders in the past quarter solely because they weren’t given an upfront estimate of the total order cost which is what minicart is aiming to solve. ”
Opportunities for improvement
Considering that The Home Depot has no existing mini-cart feature, it was important to think though all the features and functionalities that would cater to our business goals while keeping in line with good user experience.
How could we be innovative? What specific features would we need to display to cater to our various products on site?
I knew that the key to developing this minicart concept was keeping it clean, simple, and easy to use. But first, I needed to see what was already existing.
Competitive Research
With this case study, I defined what opportunities The Home Depot and users were able to gain by the use of a mini cart experience, how the interactions would work, and how the mini cart would be displayed in various resolutions.
With a thorough dive of other various ecommerce sites, I was able to conduct competitive research to see what was working, what wasn't and what we we could innovate.
I also referred to Baymard Institute's Eccomerce Usability Study on Checkouts.
Research From Baymard Institute
“It’s clear from our checkout testing that if this flow from the product page, to the cart, and then onwards to the actual checkout flow, is not carefully crafted, a large proportion of users will be off to a very bad, or may not even initiate the checkout but simply abandon their items at the cart step.
For example, our quantitative study reveal that 23.9% of all US online shoppers have abandoned orders in the past quarter solely because they weren’t given an upfront estimate of the total order cost.”
-Baymard Research
Understanding User Goals through existing personas
After conducting competitive research, I referred to our personas before moving forward with any designs. Our customers must be able to easily browse, place items in the mini cart with the option of adding on additional upsells while staying organized in a way that is efficient and easy to understand. I would need to keep in mind, that the mini cart I'll create must be easy to use for our three main personas:
Home Depot Pro Contractor
Do It For Me customer
Do It Yourself customer
No matter if you are James or Camila, the minicart feature is an efficiency tool that will give the user ultimate control on understanding what is in their cart.
Mini cart user flow
Whenever the user is on Homedepot.com, they are free to browse as many products as they like and add to cart. Once the user has added to cart they are able to view their mini cart, keep browsing, or go straight the checkout page to complete their purchase. If the user views their mini cart, they are able to go straight to the cart page to complete their product purchase, or can purchase via the cart icon in the universal header of the site.
Low Fidelity Wireframes
While the user is shopping on HomeDepot.com they can easily display the mini cart by hovering over the cart icon.
If the user wanted to finish their purchase, they can click on "view cart" in the mini cart, or click on the Cart icon in the header.
High Fidelity Wireframes
Peer Review
Once I had designed my first iterations, I presented in a weekly peer review amongst the other UX designers and content strategiest in the company. In this review, I gave the team an overview of the project, explained the business goals and user goals, and let them walk through the Invision prototype I had build out.
With the valuable information my fellow peers had provided, I was able to make the appropriate changes to prepare for my first unmoderated user test.
Usertesting Results
Overall: With this unmoderated usertest, we asked 8 users with specific criteria to participate.
These users felt organized, and felt like THD valued them as customers by respecting their time. They felt more efficient in their buying process and said the website as a whole felt more helpful.
Website as a whole, feels more helpful, organized and efficient because of the minicart function
Users feel like their time is valued because of this function
Users like the fact they don’t have to jump from page to page
Makes the website feel like more of a utility and something that the user would enjoy using
Makes the user more willing to put items in their cart, which makes them more willing to buy items
“This (feature) makes me feel like the company values my time”
“I feel more organized and efficient while shopping, like I can get things done quicker”
“Yes, I find it useful. I want to be able to check my cart without having to actually leave the page.”
Working with Engineering
The mini cart is a new feature that will be displayed onsite, however I made sure to built this functionality within our design pattern guidelines.
The mini cart height is dependent on the amount of products it is displaying at one time. Once the mini cart reaches a max height of 650px or more, it would begin to populate a scroll bar and drop shadow to display spacial layering.
Through document sharing, sketch measure files and annotations I worked with our dev team to produce high quality design experiences for our mini cart feature.
Phase One Final Design
With this new minicart experience, users are able to:
View Subtotal
Remove items
Edit the quantity
View their forms of fulfillment methods
View add ons IE: Protection Plans, etc
Go straight to Cart Page
Go to Checkout Page
Can be certain of items in cart without ever having to leave the current page they are on
Results
This feature's phase one will aim to launch by second quarter 2018.
Through usertesting, we learned that users understood how to expand the minicart function, knew where to checkout, and knew how to visit the cart page to view further details. Users felt organized, and felt like The Home Depot valued them as customers by respecting their time while feeling more efficient in their buying process.