The Home Depot
Bootstrap Redesign
To Improve Conversion Rates
Overview
Our team objective was to redesign the home page, login pages, and three eCommerce purchase flows on The Home Depot website and then code our redesigned flows using bootstrap.
Outcome
Redesign reduced time required to complete purchase flows by an average of 40 secs.
My Role
Project Manager
Duration
4 weeks
Design Process
1
Research
2
Ideation
3
Design
4
Deliver
• Final Coded
Prototype
• Site Map
• Card Sort
• Information Architecture
• LoFi Prototype
• Mid-Fidelity Prototype
• Style Guide
• HiFi Prototype
• A/B Testing
• User Testing
• Persona
• User Insight
• Value Proposition
• Storyboard
• Business Model Canvas
• User Survey
• User Interviews
• Proto-persona
• Competitor Analysis
• Heuristic Evaluation
• Ethnographic Research
Company Background
Challenge
The Home Depot faces the challenge of integrating its online experience with the service provided at over 2000 retail stores.
Goals*
Strategy*
• Provide the highest level of service
• Provide the broadest selection of products
• Provide the most competitive prices
• Customer Experience
• Competitive Prices
• Quality, Availability
• Competitor Analysis
• Variety of Products
• Delivery Options
One Home Depot
Mission*
To create a truly interconnected shopping experience by allowing customers to seamlessly blend the digital and physical worlds.
*2019 The Home Depot Annual Report
Existing Site
Existing Site
Redesigned Site
Before we could begin our redesign we needed to evaluate the existing The Home Depot website to see what the site did well and what we could improve.
Existing Site Heuristic Evaluation
Our first step was to conduct a heuristic evaluation of the entire site as a way of identifying areas to baseline test with users. We Identified many potential areas for testing to see how they would impact our redesign.
• Crowded header
• Menu navigation overwhelming
• Mobile navbar not fixed to the top of the screen
• Extensive scrolling required before search results
• Crowded product cards
Identifying The User
As a way of focusing our design, we created a user profile to keep our project goals aligned with what would be most beneficial to our user.
Benchmark Testing
Before we could begin our redesign we needed to evaluate the existing The Home Depot website to see what the site did well and what we could improve. We conducted five user interviews asking users to login, add three items to their cart, including a bonsai tree, and go through the check-out process up to the point of finalizing the order.
• Default shipping method 'Ship to Store'
• Shipping method selected Before Adding Item to cart
• No option In checkout to change selection
“There is not an option to ship your purchase?”
5
Users Tested
We then compared our results with user results against competitor sites including Lowes, Amazon, and Ace Hardware. Our results showed The Home Depot site underperforming its competition in purchase flow speed and successful completion rate.
0/5
Users Tested
Successfully selected the correct shipping option on their first attempt.
60
Seconds Slower
Average completed Home Depot purchase flow over a minute slower than average competitor flow.
Targeting User Pain Points
In our initial research, we learned that users had difficulty with The Home Depot site because it was slower than competitors, lacked clarity at crucial decision points, and made reversing a user input difficult. We then proceeded to go through various steps of the UX tool kit looking for a big idea that would be the foundation of our site redesign. The deeper into the process we went the more we realized that improving the speed, clarity, and reversibility of the site was the big idea.
-
Speed
-
Clarity
-
Reversibility
Design Iterations
Even though we were replicating an existing website we wanted to make sure our revised site was both well thought out and user tested. We went through five iterations on the way to our final version.
Mid-Fidelity User Testing
We wanted to learn more about how users viewed the existing shipping method selection process. In our initial prototype, we carried over the existing The Home Depot page requirement that users select their desired delivery option before adding an item to their cart. We had a sense from our benchmark testing that this one step contributed significantly to the existing page's slower order times vs competitor sites but we wanted to have the data to back up that suspicion.
6
Users Tested
User tests to assess the usability of the Mid-Fi prototype and to validate our tasks.
6/6
Users would like to see the total amount in Add to Cart modal, as well as eliminate the Payment by Paypal option in the modal.
5/6
Users tested considered the shipping process confusing. They would like to choose the type of shipping in the Checkout process.
4/6
Users didn’t know how to change their shipping or product details.
High Fidelity Testing
Once we moved on to our high-fidelity prototype the users we tested focused on new issues from those we had identified during earlier stages of testing. Users, in particular, were concerned with making sure the checkout process felt secure.
Before Feedback
“Billing section is too simple it looks sketchy”
With Feedback
Updates:
-
Credit card images
-
Name on card
-
Set as default payment method check box
Coding Process
Coding Process
While we worked on our design we also created a formal process for approaching the coding. No one on our team had coded a complete website before this project so we were conscious of creating many incremental goals that could be delegated among the team and tracked throughout the process. Part of this approach meant being realistic about what we could accomplish in a limited amount of time. We purposefully scoped our design to be functional and address the pain points we had uncovered but not to include every idea we had to ensure we could deliver a completed version of our final design.
Weekly
• Daily standups
• Backlog board
• Early alignment
• Triage based on team skill
• Limit bottlenecks
Daily
Segmented approach
Group redlining
Scrum methodology
High Fidelity Testing
Once we moved on to our high-fidelity prototype the users we tested focused on new issues from those we had identified during earlier stages of testing. Users, in particular, were concerned with making sure the checkout process felt secure.
Before Feedback
“Billing section is too simple it looks sketchy”
With Feedback
Updates:
-
Credit card images
-
Name on card
-
Set as default payment method check box
Checking Our Work
After we incorporated all of our user feedback we wanted to test our updates to see if they had an impact on improving the areas of the site we focused on with our design choices
We timed users from when they arrived at the product page for a cordless drill until they completing checkout on our redesigned page and compared our results to the same limited flow on the existing The Home Depot Page.
Average Completion Time
Existing Site
2:52
Redesigned Site
2:11
Selected Correct Shipping Method
0/5
Existing Site
6/6
Redesigned Site
Final Version
Lessons Learned
-
Slow and steady wins the race: Planning and doing a little every day helped us accomplish something we had never done before.
-
You don't need to reinvent the wheel: Sometimes the best solutions are the ones the user is most familiar with.
-
Know the starting point: Knowing how your existing site compares to competitors gives you a lot of information about how to prioritize updates.