Planning on the Go

Reinventing Home Depot’s planning function and integrating it with the shopping experience.

Helping doers get more done - on the go.

Our Goal was to help DIY project doers organize and plan their project tasks and materials within the Home Depot app.

 Meet the Team

Lena Slone - Lead Researcher

Steph Myrick - Lead Usability Tester

Karen Ye - Project Manager, Visual Designer

With the support of my team, I accomplished;

  • A survey

  • Interviews

  • Affinity Mapping

  • A persona

  • Lo and mid fidelity prototyping

  • Planning and conducting usability tests

  • Overall organization of documentation and deliverables

  • Communication and advocating for my ideas

Project Details

The Situation

This was a two week conceptual group project for the Home Depot App at General Assembly.

Other

Tools: Figma

Device: Mobile - iPhone 13 pro

 Project Overview

Our Approach

 The Problem

The user needs to spend less time on logistics and more time accomplishing their project goals.

Through researching the target audience, people who do DIY projects, our team found that starting a DIY project is a pain point, along with trying to organize a plan and locate materials throughout their process.

The DIY project planning section in the mobile Home Depot app is inaccessible and difficult to find

Research

We conducted multiple forms of research to empathize with the user and truly understand what is lacking from their DIY project experience.

 

We got results from 13 survey takers who all have an interest in completing DIY projects

  • 84.4% of survey takers use a mobile device when planning DIY Projects - this app function could streamline how users go about DIY projects

  • Users have various ways of planning their projects, if they plan them at all. There are no rules when it comes to planning.

  • The internet plays a key role in completing DIY projects, this could be through a Google search, Pinterest, Youtube, or Reddit.

Photo by Kellysikkema on Unspalsh

 

Reasons why users do DIY projects

  • They get a sense of accomplishment

  • They want to save money

Their process

  • They research online

  • They like to know how other people do things and various ways to approach a problem

  • It can be difficult to get started with a project

Other Notes

  • They can have a hard time finding everything they need

  • They prefer step by step instructions with visuals

Photo by charlesdeluvio on Unsplash

 Understanding the Research

Meet Homie Depot, a representative of the user created from our research. Homie Depot is a persona, made to focus on the users needs so we knew who to focus on. We can’t design for everyone, so we designed for them.

To focus in even further, we asked ourselves 3 questions;

  1. How might we help users break down and manage tasks? 

  2. How might we help the user keep track of their tools and materials? 

  3. How might we help the user track their budget and maximize savings?

Exploring Solutions

The Home Depot website already has a DIY section, the main idea is to get that integrated into the app, The app currently has a small section, but it is hard to find and partially linked to the website, as opposed to being a part of the app itself.

With an understanding of the user and their needs, we took the findings to the drawing board. Design for the user means putting the research together to make what will suit them the best.

What we want to reach by the end of this:

  • Have easy to find tutorials with visuals and a community space to open communication among other project accomplishers. 

  • Incorporate a materials list so users can get all they need from one place and easily find all that they need.

Moving Forward

My team and I began to break down the process by creating a user flow, where we explore the process the user goes through to achieve their goal in the app.

With a path drawn out, we created a site map to organize the categories and break down the pages the user will need.

Knowing what pages we needed, we sketched out what each page would look like. We then compared them in design studio, meant to put our minds together, understand each others thinking, and decide on a design.

Photo by Danae Paparis on Unsplash

Solutions: Paper to Digital

With sketches discussed and decisions made, our team headed over to Figma.

We created low-fidelity wireframes. These were created to get formatting situated.

Then, mid-fidelity wireframes. These have more details and we move into prototyping, to create something resembling a functioning app.

Within our app, users have the option to search or browse for a project they may enjoy. Once they find a project they like, they can “save” it and revisit it. They can check community comments and see what other people who have done this project are saying. There is also a video for the users to watch, along with step by step directions. Within the project page are all of the materials and tools the user will need for that project. They can select the items they need from this materials tab. They can add them to a list for their project or add them to their cart. They can then check out straight from the app.

Mid-Fidelity Testing

 

With a mid-fi prototype of the mobile app in hand, we got to usability testing, where we give the user a task to complete within the prototype to find what works and what doesn’t work.

 

Finds

  • Users got stuck on every aspect

  • They were confused by the task

  • Browsing > Searching

Insights

  • We need to revisit button wording and labels

  • Users want to create a list by adding something to the list, not a separate button

Mid-Fidelity Testing Round 2

 

We got many insights from usability testing, so we implemented the necessary changes and did it again!

 

Finds

  • Only 1 failure with 1 task, out of 4 tests with 5 tasks

  • Much high success rate

  • A few errors with 4/5 tasks

Insights

  • Wording could be updated from “select from category” to “view all” for simplicity in exploring items

  • Maybe using a page flag would be better than a heart for “saving” not “loving”

 

By this point, our app was usable for users. Knowing that the structure was solid, we made minor touch ups on the layout and added colors, photos, and product details.

 

Finds

  • Errors are far lower

  • 1/4 users still had a hard time adding items to their list

Insights

  • Revisit the idea of the list , how might we make it more productive?

The Final Product

A project in UX is never really final, people will change, technology will evolve, and the user experience will adapt each time. This is the final product of a 2 week project.

 

Retrospective

Next Steps

  • Research into the list section 

  • Integrate with other sections of the app 

  • Revise button labels 

  • Add a progress tracker for projects

  • Adjustments to existing pages 

    • Implement a product/project toggle on search results 

    • Add DIY related card on the home page based on user activity 

    • Standardize card visuals 

    • Consider adding clearer pagination 

    • Revisit design on a product list in materials tab

    • Consider a project related card on product page 

    • More research into functionality and integrations

Other Takeaways

  • I learned a lot about working on a team, including how to advocate for my ideas

Next
Next

Engage