Home Depot DIY
Feature Design

 

Overview

Home Depot's DIY features are barebones, yet they could be a powerful differentiator for the brand. We realized that even a Do-It-Yourselfer could benefit from a little (or a lot of) outside help, and developed a platform for guided DIY projects.

This was part of a student project and had no official relationship with Home Depot.

 
 
 
 

Team

Amanda Reiter
Russell Greene
Steve Molter

Duration

2 weeks

Tools

Marvel POP
Sketch
InVision

 
 
 

My Role

During the research and ideation phase, we split tasks evenly, but during later development phases I was generally in charge of building the product. I built most wireframes and was in charge of version control and consolidating the team's work.

 
 

 
 
 

Preparation

 

Team Alignment

The first step of our project was to get on the same page, literally. We created a shared team plan that detailed communication methods, decision making rules, conflict resolution rules, and other preferred frameworks. Once we got working, we all flowed so naturally that we never had to refer back to our plan, but I believe that's precisely because we took the time to walk through it in the first place. Even something as seemingly silly as creating a team name was powerful in getting us emotionally invested in the project and each other. 

 
 Team B.A.R.S (Billy/me, Amanda, Russ, and Steve)

Team B.A.R.S (Billy/me, Amanda, Russ, and Steve)

 
 

Scheduling

The other essential first step was clear scheduling. Not only did we need to budget our time carefully, we also needed to make sure we could test representative users in such a short timeframe. We created a shared project plan, detailing the next two weeks day by day, and the first step was to recruit users and schedule tests for later on. View our plan here.

 
 
 

Research

 

Surveys

We reached out to various online communities to gather foundational data on our users. Mostly, we used an agree/disagree scale to confirm certain assumptions. 

 
survey-response.png
 

We also used a few open-ended questions to understand pain points and motivations, and used the survey as a recruitment tool for later usability testing. 

 

Interviews

By talking to a few users at length, we discovered deeper insights into their practical process and emotional experience. 

"It's all on you — no one's helping you."

This not only informed our app design, but our narrative as well, and gave us powerful storytelling tools. 

 

Market Research & Analysis

To ground our research in the bigger picture, we gathered demographic information on the DIY scene. We followed this up with a comparative analysis of Home Depot's competitors as well as other instructional DIY platforms. 

 

Synthesis

 Persona-check

Persona-check

Finally, we used affinity mapping to establish key themes, singled out important insights from our research, and built a few personas to guide our coming ideation and development.

(A note on personas — although they are useful storytelling tools, they can also often lead to flights of fancy and designers may unknowingly use them as a vessel for their own bias. For our project, we made sure to ground the personas in actual demographic data and use actual user quotes when available. Internally, our personas were a useful way to keep us focused on specific goals.)

 

Developing a Solution

 

The Problem

DIY projects are rewarding, but fickle undertakings. Users were likely to get upset or drop the project altogether due to planning difficulties. This could be forgetting to buy a necessary item at the store, running into bad weather, not having the right tool, or something altogether more catastrophic.

 

Ideation & Prioritization

We brainstormed a feature list and ran a design studio to test out and refine key ideas. As it developed we had far too many small, simple fixes, but nothing cohesive and impactful. We layed our ideas out on priority matrix to narrow down the scope. 

 
 
 

The Solution

We made the decision to take advantage of Home Depot's expertise and inventory, and create a guided DIY instructional platform, combining a few of our features into one platform. We believed that in doing so, we could control for the variability in users' problems by providing a professionally tested guide, as well as providing a one-stop-shop for everything necessary to the project. 

 

build-out

 

Site Map

I created this site map to show the way our screens would integrate with the current app. For the most part, it works as a standalone DIY instructional platform, where users can follow along projects, but it also links back to the shopping experience from the tools & materials list. 

 

Paper Prototype

We went through a few paper prototypes before jumping into Sketch. This helped us catch problems early on at a low cost, but was also a necessity to meet deadlines for testing appointments I had set up from the survey responses.  

PP Gif.gif
 

The Iterative Process

A few screens came together easily. For example the frustrations with our project preview were clear, and we only needed to update it once. 

 
WF Project Preview 1.JPG
 
WF project Preview 2.png
 

The first screen was much too busy, and the "add to projects" button was unclear and hard to find. After cleaning this screen up for our hi-fi prototype, we had little issue.

 

Other screens proved more difficult. There was a lot of debate in our group around what to display on the project view. 

WF Project View 0.JPG
 

A Rough Start

For our first iteration, the detailed instructions were a sub-screen of the project view (along with the materials list and scratchpad.)

We realized through initial user tests that even one extra tap to get into the most used screen was cumbersome and upsetting.

 
 

Paring Down

We tried to keep the screen simple and scannable, while also emphasizing the materials list in the hopes of encouraging our users to prepare ahead. 

However, it still felt underwhelming and didn't emphasize progress enough.

 
WF Project View 3.png
 

Fleshing It Out

For our hi-fi prototype, we set the title and materials list as a sticky section at the top. When users first open their project, the instructions are greyed out until they start, while the materials and tools are clearly highlighted. After starting, the top overlay would disappear permanently and the top section would hide when scrolling down. 

Additionally, the progress bar itself fills up as you go along, and the copy was updated to be more playful. It felt a little silly, but most users seemed to enjoy it. 

 
WF Project View Complete.png
 

A Little Something Special

Finally, we wanted to reinforce the sense of accomplishment and justify the motivations people reported to us in surveys and interviews. We realized our project view needed something special when users completed it and built this screen to celebrate their achievement and let them share it as well. 

 

 

The Final Product

 
hifi2.gif
 

Reflection

 

Narrowing Scope

We were very focused on making sure any solution met every one of our persona checks, but  I would have rather focused on and perfected one or two small features. Then, if it worked well, we could think about incorporating them into a full DIY platform.
 

Design Alignment and Division of Labor 

I took charge of wireframes later into the process. The style guide was incomplete and so when team members contributed to the design, it took a lot of time and effort to make things consistent. We should have managed the workload better and spent significant time on establishing a style guide and any other rules or protocols.