Home Depot App “DIY” Feature Integration (Conceptual)

5 min readNov 13, 2017

My Role: UX Designer| Duration: 2 Weeks | Project Status: Implemented

PROJECT DEFINITION

Overview

Home Depot is an American retailer of home improvements,constructions products and services. As the market leader in home improvement, Home Depot wants to give its customers a tool to help them brainstorm, plan, track, and document their DIY projects. They also want to make sure that the materials and tools are available on the app.

Scope of Work

Home Depot has an existing iOS app and the DIY feature needs to be integrated into this app.

What Seems to be the problem?

Home projects are very time-consuming and require a lot of preparation with regard to planning, purchasing, and execution. People feel overwhelmed and frustrated because they have to use different resources to address all the issues when undertaking a DIY project.

“How might we guide a capable DIYer in the preparation for a new project to achieve a successful completion?”

RESEARCH

User Interview

To get insight into customers’ experiences and pain-points with DIY projects, we conducted 5 detailed interviews with users:

From different parts of US
With different needs and DIY projects
With various skill levels

Qualification

Completed of a new DIY project within the last 12 months

Findings
A DIY project involves many aspects and people often underestimate cost and time because there is no unique source of information for them and they have to run between different resources to collect all the info that they want in order to plan and execute a project. From YouTube instruction videos, to in-store purchases, to getting inspired and sharing project’s progress on Pinterest.

Synthesis of Interview Findings

Following user goals emerged from synthesis of the interview findings. Users want to :

Be able to plan a project from “step zero” to completion without any surprises
Be able to estimate the amount of time needed to finish a project
Execute the project on their own
Be able to minimize the number of scraps and waste from their projects
Be able to practice good project management

Feature List

Based on the above goals, following features were determined:

DIY Browsing Page: Landing screen with different project categories with easy browsing of projects
Tools & Materials list: Specify tools and material quantity needed for a specific project and the associated cost
Steps and Directions: Steps with itemized list of things to do for any project
Instructional Videos and Diagrams: Provide breakdown and video tutorial as additional information
Progress Bar: Breakdown of completed steps and progress bar for progression overview.
Safety Tips: Clear steps with safety reminders

DESIGN PHASE

Design Studio: Sketching + Concepting

Low-Fidelity Screens

After 2 rounds of design Studios, our team finalized the initial design and moved to lo-fi screens for our first round of usability testing

Initial User Testing: First Round

To validate our design, we conducted 4 usability tests using the InVision mobile app. The goal of the usability test was to see if users could:

Task#1: Navigate to the DIY feature and browse different options and find a specific project
Task#2: Save a project in order to get back to it in the future
Task#3: Locate saved projects and purchase project materials
Task#4: Mark project steps as completed and move the progress bar

Design Iterations: First Round

We found that users wanted to explore the project categories. A few tried to click the see all button. They wanted to feel they have seen all their options before deciding on a project.
For our next iteration we made a clickable “see all” button that let the user browse all the projects in a given category
We also moved the search and filter button down to make it more accessible
On the steps page users were confused that there was more than one way to mark a task as complete
So we removed the check box on the steps screen
They also thought the orange color of the complete button indicated the button had already been clicked.
So we made the complete button grey
We also made the text larger on the steps details page

Hi-fidelity Screens

Functional prototype: https://projects.invisionapp.com/d/main#/console/12498958/262427183/preview

Usability Testing: Second Round

To validate our design iteration, 4 more usability testings were conducted with the following success rate:

Our second usability test had much higher success rates than the previous
We discovered that some users did not think the location of saved project was intuitive
We also discovered that users want the ability to add all items to their cart when buying tools and materials
Users also want to share their projects with friends

MOVING FORWARD

DIY feature needs more visibility in the Home Depot app. For the lack of content, Home Depot has hid this feature but after the suggested design, DIY can be promoted to the main landing page of Home Depot app and even can get it’s own search tab. This move will increase revenue and customer satisfaction.

Also a “Add all to cart” button is necessary in the tools and materials tab. This will add convenience and user satisfaction based on Usability findings.