If you want, do it yourself!

Home Depot’s DIY feature

Introduction

I’ve long been a hardy DIY person myself. Whenever I saw something outside that I wanted, whether it be an antique cabinet, or a model 18th century ship, I didn’t want to buy it… I wanted to make it myself. Naturally, when I heard that our next project was going to be creating a DIY function for Home Depot’s existing mobile application, I was excited.

The Research Phase

Our first task was to do some research. Home Depot is the world’s largest home improvement hub. It’s a perfect place for people who enjoy making their own creations to find the equipment and tools they need to draw their imaginations into reality.

Digital Research

Initially, my team and I took a look at the desktop version of Home Depot’s website. We navigated to the DIY section only to find that it was fairly prominent in the menu, the page itself including ideas, inspirations, and instructions.

Moving to explore the DIY section in the mobile platform, we discovered that most of the functionality, versatility, and beauty of the desktop version had been lost. There were but a few tools such as a virtual caliper and tape measure. There was plenty of room for improvement.

Our initial assumption was that people are hesitant about DIY projects because they can be tricky and intimidating. We started by asking, “how might we provide a tool to help alleviate the confusion and/or stress that comes along with DIY?” With this initial query set, we crafted a screener to find people that were more appropriate to interview, or in other words, our target audience.

User Interviews

After a productive afternoon at Home Depot, we managed to interview 6 people in total about their experience with DIY projects. Some notable quotes included,

“I do DIY because I want it done right.”
“It is a beautiful feeling of creation, knowing you made it and being proud of it.”
“I plan what I am building and then decide what materials I will need.”

Synthesis

My team and I returned to our studio and started to synthesize our research.

Affinity Mapping themes gathered from the interviews

Some notable groups include,

“I am in control of what I build.”
“I am emotional about things I build.”
“I am a planner.”

Having uncovered the fact that people were generally not as afraid of DIY as we had initially thought, we reformed our initial question to ask, “how might we create an enjoyable experience to plan, manage, and customize DIY?”

Personas

From our findings, we created three personas to capture three groups of users.

Personas

Collectively, we agreed that persona 2 should be our focus point since she included aspects of both persona 1 and 3.

The Design Phase

Design Studio

We then flowed into a design studio to create our first prototype. My teammates and I sketched separately at first, critiqued each other’s user-flows, and then sketched again.

At the end of our design studio, we had many features that we wanted to work into the prototype. Due to time considerations, we wouldn’t have been able to incorporate all our features by the given deadline, so we prioritized them and voted on which ones we thought were most important.

Design Studio (left) and Feature Prioritization (right)

We started our prototyping with basic sketches. We wanted to make sure that we all had the same idea about the structure of the user-flow since we were each making a section overnight and reconvening in the morning to put it together.

Initial Sketches of the User Flow

Prototype

We made three prototypes overall. Our initial prototypes were reasonably different from one another but after some work we were able to create one unified wireframe.

User Testing

Our next step was to test our user-flow with users. We had three major goals:

Users should be able to successfully start a new design project
Users should be able to customize their project and checkout the necessary materials
Users should be able to navigate back to their previous projects and find the relevant instructions

We tested five users overall. The first three users were tested on the low fidelity wireframe. We wanted to understand how well the flow itself worked before adding in the high fidelity elements. The latter two users were tested on the high fidelity wireframe with all the pictures and other graphic elements added in.

Our results were fairly positive. All five users were able to start a new project, and return to a previously started project with ease. Four out of the five users were able to customize their projects with ease.

We had to fix some elements in our iterations. These fixes included the shopping cart which confused users initially because the place-holder items did not correspond to the project configurations, and the customization icons which were initially too small for users.

Below are screen comparisons between the first and third iterations.

First Iteration (left) and Third iteration (right) of the project settings page
First Iteration (left) and Third Iteration (Right) of the customization page

Next Steps

Moving forward, the ease of customizability of DIY projects is really what we were trying to maximize. Customization is really what DIY is all about, since the whole point is to make it your own.