UX Case Study: The creation of a DIY projects app

A Home Depot Case Study

Overview

Home Depot is the world’s largest home improvement retailer with 2200 stores, as well as an e-commerce business that offers more than 1 million products for the Do-It-Yourself enthusiasts, professional contractors and the industry’s largest installation business for the “Do-It-For-Me”.

Recently, Home Depot has made wonderful improvements to their current smartphone application. They have started to add additional apps, including the Project Color app, which helps customers view and sample their large assortment of paint colors and finishes from the comfort of their home. Next, Home Depot is looking to incorporate a Do-It-Yourself project planner.

Our goal was to create a tool to help users with brainstorming, planning, tracking and executing their DIY projects. This was an in-class project for our UX Design Immersive program through General Assembly.

Role: Lead UX Researcher
Team: “12 Eyes” with Haniyyah Gray and Goli Sheikhi
Tools: Figma
Timeline: 2 week sprint

Understanding the Users

User Interviews and Results

To get a complete understanding of what features and capabilities the app will need, we interviewed a variety of people with different experience levels and interests when it comes to projects and project planning. These interviewees worked on projects that ranged from tasks that took a few hours to large months-long jobs.

From these interviews, we collected the following insights:

• Many users had a baseline idea for their project, but would turn to the internet for more research and inspiration before beginning.
• Users typically sourced information from multiple websites and found it difficult at times to find exactly what they were searching for.
• Sourcing materials was a common struggle, rarely being able to gather all materials in one trip to the store. Multiple trips were extremely common and users found it time consuming.
• The project completion rate was low, around 60% of projects went incomplete.
• When asked if users had a progress tracking process, many stated they did not but would consider using one, and perhaps would help with motivation.

Affinity Map

From the insights we gathered from the interviews, we were able to group them into six main categories. Multiple trips to gather materials, inability to track project progress and maintaining motivation to complete the project were major pain points highlighted from the mapping.

Persona

Meet Ed, a retired grandfather from the Midwest. Since retiring, he’s been enjoying road tripping and taking on small projects he never got the chance to get around to (the house is finally repainted and his wife couldn’t be happier). With the open schedule he has, he enjoys taking his time with the projects he takes on and goes at a comfortable slow pace. He finds it difficult to source information and instructions from projects from one place, he usually is asking his friends or ends up doing extensive research on the internet, to his annoyance. Making multiple trips to the store for supplies also is unideal, and usually is something he procrastinates. His grandkids are starting to get to the age where they can help Ed out, and he is super excited to get some small, fun projects planned to do with them when they come to visit. The first project he's going to tackle with them is a birdhouse for the backyard.

Problem Statement

With the information we gathered from the user interviews, we formed a problem statement that encompassed the many pain points we found:

Ed needs a place to find project inspiration and information, as well as the ability to track his progress, so he can correctly and efficiently complete his projects.

How might we…

• How might we create a tool that provides inspiration for projects and to complete these projects?
• How might we create a tool that allows users to see the project steps and track their progress?
• How might we help our users have a higher completion rate of their projects?
• How can we reduce the number of trips that users have to make to the store for materials?

New User Flow

User Flow for the DIY Depot App

Here is the user flow that follows a user working on a project through the app. It begins with the user finding projects or inspiration through the app. Then, users can add that project to their projects page. They can see the material and tools required, and can purchase the required materials through the app if needed. From there, users can begin the project by going through the steps. Once each step is completed, they can track their progress by marking the step “completed”. Once the user completes all steps, they will have the option to share their finished project on multiple forms of social media.

Sketches

From here, we sketched a few solutions to the many user issues we found. We were certain we wanted a space for all current projects being worked on to be found, with the ability to see the progress and current steps they were on. In addition, we wanted to have a page dedicated to project discovery and inspiration. Here, we sampled ideas from crafting apps and design websites (such as HGTV). However, the main focus of our design was to keep it within the Home Depot brand. We wanted the app to be unique, but also still be consistent with the other applications that Home Depot already had launched.

Wireframes

Usability Testing

We ran a usability test with our Mid Fi prototype, having users complete a number of tasks (as seen in the chart). Most users were able to complete the tasks with little to no errors. Two users had some difficulty completing one task (adding a project to the project list, which is marked in yellow on the chart), but were able to figure it out without any assistance by examining the page a number of times.

Findings

• Many of the users said that the app was easy to use. They liked its simplicity and the ability to purchase the materials right from the app was a great feature that a lot of our users really enjoyed.
• The tracking ability was another feature the users found useful and they liked how it made it simple to jump right back into the step they left off at.
• We found that on the checkout page, many of the users went to use the top checkout button, as opposed to the one at the bottom of the checkout page.

Adjustments Made when moving to High Fidelity:

• Some components needed to be resized, such as the search bar and some of the buttons throughout the app.
• We renamed two of the navigation bar icons to make them more clear of their content.
• The “Inspiration” icon was renamed to “DIY Projects”. This page is where users could discover and search for projects and design inspiration.
• The “Favorites’’ icon was renamed to “Saved”. This is where users could file design inspiration they wanted to save.
• The top of the “Project Details” page was redesigned to better fit the information and the project picture, and also made it more aesthetically pleasing.
• Adding a video tutorial to the “Project Details” page to be an additional resource for users to take advantage of.

High Fidelity Prototype

Mood Board

When creating the mood board, we wanted to keep it consistent with the other apps already in the Home Depot family. When switching from one Home Depot app to another, we aimed to keep it familiar and for users to be able to jump right into the app with little to no learning curve.

Prototype

View the DIY Depot prototype below:

Demo of the High Fidelity Prototype

Conclusion

This app was created to help anyone with the process of a DIY project. One of the biggest challenges was making the features for tracking the project progress obvious and easy to use for all users. We also were challenged with making the app feel true to the home depot brand.

Moving forward, some updates that we can bring to the app could be naming each of the project steps on the “Project Details” page. We also considered recoloring the navigation bar to make it “pop”. However, at this time, we have decided against it and kept it more neutral, as the other Home Depot apps have done.