HOME DEPOT APP - DIY UPDATE
Teammates: Anita Trinh (Research Lead), Alexander Olson (Presentation Lead),
Al Hancock (UI Design Lead)
The Why Behind the Design
The Home Depot app has many features that are valuable to customers, but one thing it's missing is a DIY project planner. People who participate in DIY projects make up a significant amount of Home Depot's customer base, and these users have a need for tools that help them brainstorm, plan, and keep track of their projects. This project encompassed research, ideation, design, and testing of a potential "DIY Project Planner" in the current version of the Home Depot application.
Role: Project Lead, UX Researcher
Timeline: 2 weeks
Tools: Figma, FigJam, Zoom, Google Docs, Google Sheets, Slack
Project Planning
This project was executed with a team of colleagues, including myself. Before jumping in, we discussed the logistics of how we were going to tackle the app design. We decided to start by delegating roles, and as the project lead, I constructed a schedule for the next 2 weeks that included goals to try & accomplish each day.
Understanding the User
STEP 1: Conduct Interviews
As a team we came up with interview questions to try and discover the needs and frustrations of people who participate in DIY projects. We conducted and transcribed the interviews, and then went through an affinity mapping exercise to establish commonalities in the responses.
STEP 2: Analyze Interview Findings
The most common trends from our interview responses were the following:
I need help planning and preparing for DIY projects
I need solutions to problems
I face during DIY projects
I need ways to set a budget
for DIY projects
I need ways to track my
time during DIY projects
I need a way to navigate DIY projects that match my level of expertise
I need to cut down on trips
taken to pick up materials
I need access to accurate resources for my DIY projects
STEP 3: Construct a Customer Persona
Based on our interview findings, the customer persona we decided would best reflect our users was:
Jack Handyman
STEP 4: Competitive & Comparative Analysis
We then conducted research on the current Home Depot app and brand, while also comparing it to other competitive and comparative businesses. Home Depot has many features, including, augmented reality, tool rentals, and even a separate color-matching app for painting. In the chart below we focus on features that match our user's needs and compare them to competitor and comparator businesses. No project planner or tracker existed amongst the competitors, so we looked into a few apps that focused on those features.
Competitive Businesses
.png)
Comparative Businesses
.png)
STEP 5: Draft a Problem Statement
Based on our interviews and research findings, I constructed the following problem statement for our users:
“Users need a time and budget-friendly way to plan for DIY projects so that they can avoid mishaps and stay organized.”
Brainstorming Ideas
STEP 1: Draft "How Might We" Statements
Post-research we began brainstorming potential solutions for our user, Jack.
To help guide this process I came up with a few “how might we” statements:
-
How might we create a way for Jack to plan for all the resources and tasks required to complete a DIY project before they begin?
-
How might we effectively guide Jack through all the necessary steps of a DIY project?
-
How might we help Jack keep track of actions that have been completed during a DIY project?
STEP 2: Create User Flow
Considering our problem and ideas for a solution, we then started constructing the steps Jack might take while navigating a redesigned version of the app. It looked something like this:
Following this user flow, Jack will be able to start planning for and tracking a new DIY project. In doing so he can create a new project, enter relevant details, add tools and materials, and save some tutorials.
STEP 3: Construct Proposed Sitemap
With a user flow in mind, I recreated the sitemap for the Home Depot app to include a “DIY” Planner section, with relevant sub-categories and elements.
STEP 4: Map Out User Journey
In an effort to be consistent with our persona during ideation, we constructed a user journey map to consider how Jack might feel about his experience navigating the updated app.
STEP 5: Sketch Grayscale Wireframes
The time then came for us to start putting our ideas on paper. Anita, Alex, and I each individually sketched out our ideas as grayscale wireframes, then came together to compare and vote on the best drafts to work from.
My Sketches
Anita's Sketches
Alex's Sketch
Putting Ideas to the Test
STEP 1: Construct Mid-Fi Prototype
We then took the sketches, opened up Figma and started creating a mid-fidelity version of the app.
_edited.png)
STEP 2: Conduct Mid-Fi Usability Testing
Once our mid-fi prototype was complete, I constructed a plan for usability testing to find out if users like Jack would be able to successfully start a new DIY project and enter all pertaining details.
My teammate Anita and I each tested 2 participants and guided them through 3 tasks that would ideally help users plan and prepare for projects.
STEP 3: Analyze Mid-Fi Test Results
This first round of usability testing had success rates ranging from 85% to100%, which we considered a great start. There were, however, a few issues users ran into as listed below:
Users had trouble adding materials and tools to
the lists
Users weren't confident where the main landing page for the DIY project planner was
Users did not have a quick way to navigate back to the landing page while in a project
Users overlooked a few text elements that did not have high enough contrast
Users did not have the option to add expenses toward the budget
STEP 4: Recommend Design Updates
A few of the significant design recommendations moving forward included:
-
Creating a better method for adding materials and tools to a list
-
Also distinguishing between adding an item vs confirming addition
-
-
Adding a title to DIY landing page so users know it’s the home page (ex: My DIY Projects)
-
Making time log details more visible by increasing contrast of text (size and color)
-
Also increasing pixel sizes of clickable elements to make them more responsive to clicks
-
-
Creating an option to submit expenses and receipts in a current project
-
Adding a way for users to conveniently access the DIY projects home page, so users don’t get confused and go to “Home” of the actual app
STEP 5: Construct Hi-Fi Prototype
Considering the mid-fi test findings and design recommendations, we then proceeded to update our app to a hi-fidelity prototype.
Click the logo above to view the Hi-Fi Prototype in Figma
Below are side-by-sides of the Mid-Fi app and the Hi-Fi app with the recommended design updates:
We added a "DIY Planner" menu option on the footer navigation to make it easier for users to access the main DIY project planner landing page.
_edited.png)
.png)
We de-cluttered the project details page by spacing out the elements and adding a "next" button. We also added a button to "Add To List" so users can better keep track of their
materials and tools.
_edited.png)
We added the option to submit expenses while working on a project and also created greater contrast in some of the text and buttons.
STEP 6: Consider Future Updates
After constructing a Hi-Fi version of our app design, we did an additional round of usability testing with the same goals and metrics as the Mid-Fi tests. The results included new success rates ranging from 91.7% to 100%, a 6.7% improvement.
A few ideas we had for future design updates were:
-
Adding a reminder feature to keep users on track for their project timeline
-
Incorporating a project calculator linked to Home Depot products and services
-
Including recommended project guides and tutorials from Home Depot's website
-
Adding the option for users to use Augmented Reality to assist them in their projects
-
Considering ease of usability for users who are new to DIY projects, unlike Jack
Takeaways
Throughout this project I learned:
-
the importance of having a good plan
-
the importance of good communication
-
my strengths lie within time management
-
proactiveness limits overall stress
-
the importance of fully understanding the customer persona(s)
-
sometimes less is more
-
the parameters for testing should be based off of pre-research
Throughout this project I grew in my:
-
skills leading discussions
-
ability to manage a team of different personalities
-
delegating skills
-
confidence for mediating conflicting ideas in conversation
-
ideation and quick brainstorming skills
Overall, this was a great first-time team design experience for me and I am very appreciative to my colleagues Anita, Alex and Al for working so hard and helping me grow in my UX skills.