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;
How might we help users break down and manage tasks?
How might we help the user keep track of their tools and materials?
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”
High-Fidelity Testing
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