Designing for DIY
Streamlining the app experience for Home Depot's DIYers
The challenge.
Planning a planner.
Home Depot, “where doers get more done,” has become a go-to part of the average homeowner’s life, as well as DIY enthusiasts, artists, gardeners, and anyone else who wants to try their hands at doing it themselves.
However, the DIY section of Home Depot’s app is relatively skeletal compared to the website, and therein lies the opportunity: To build upon that existing feature while addressing the nebulous idea of “DIY project planner”.
Users need a way to organize both information and materials for their DIY projects so that they can spend less time on logistics and more time accomplishing their project goals. This is just the beginning.
Our Impact.
Our team designed a concept for a new feature on the global navigation of the app that streamlined the process of finding guides from Home Depot’s extensive project library and guiding users to the relevant products, while maintaining flexibility and customizability.
As project manager, I managed our deadlines, organized our tools and assets, and spearheaded ideation and creative direction. I also took the lead on UI design, ensuring the screens maintained brand consistency and used the same design components and styles.
My teammates, Lena and Stephanie, contributed invaluable insights and took the lead on user research, usability testing, and early stage prototyping.
01. RESEARCH
What exactly are you doing yourself, anyway?
We were a team of three designers who did not DIY in the least. We needed more information, fast. Lena and Stephanie set about conducting surveys and interviewing users who liked to DIY to better understand the ins-and-outs of what it really meant to do it yourself.
Meanwhile, I scoured apps - including competitors like Joann’s and Michaels, as well as top performers in other sectors such as Cookpad and PCPartPicker - to learn how other businesses addressed aspects such as planning, purchasing materials, and community.
.png)
02. INSIGHT & IDEATION
DIY starts with a need and ends with
an accomplishment.
The team met up after conducting our separate research and compiled our findings.
-
Users overwhelmingly chose to take on projects on their own in order to save money.
-
Many users liked the feeling of satisfaction and accomplishment that came with completing a project.
-
Users preferred guides that had visuals and step-by-step instruction, and didn't like when instructions are hard to digest.
Despite Home Depot’s extensive project library, not one respondent, including those who frequented Home Depot like it was their local grocery store, mentioned using Home Depot as a project resource.
The right parts were there. We needed to connect the dots.
From our research, it became clear that there was a disconnect between researching a project and finding the materials to execute the project. Users needed a way to organize both information and materials for their DIY projects so that they could spend less time planning and more time doing. But Home Depot had both the projects and the products - why wasn’t it being used? Upon examining the smartphone app, we found two things:
-
The majority of the project guides were squirreled away in a secondary menu, and did not show up on search results.
-
Many of the guides mentioned products, but did not have links to them.
Moving forward, we decided to focus on streamlining the experience of searching for a project and quickly assembling a list of materials to purchase, all within a handful of screens.
03. SOLUTION & DESIGN
Hammering out the idea
Using our insights as a guiding light, our team conducted a design studio to brainstorm what features and methods could be used to improve the experience around project guides. Our hypothesis was that using a flexible and custom-made list of materials for users’ DIY projects based on the guide of their choice would streamline the experience, so we experimented with creating an empty list that contained categories for necessary supplies before adding materials into it.
The final concept allows users to both search and browse for guides, while also allowing the user to build a flexible material list based directly on the project of their choice.
Dividing and Conquering
Once we had agreed upon the final design, the team split up again. Lena and Stephanie worked together on getting a wireflow up and running, while I began to build the components and style guide.
04. TEST, TEST, AND TEST AGAIN
Sometimes, things go sideways, and
that's okay.
With our early stage prototype in hand, we split up once more and each conducted one or two usability tests. We had intended to take our findings and make those changes as we transitioned into a color prototype, but things didn't go quite according to plan...
Lists Gone Awry
Our hypothesis was that using a flexible and custom-made list for users’ projects based on the guide of their choice would streamline the experience, so we had experimented with creating a list framework before adding materials into it. However this had the opposite effect. Users were confused and frustrated.
-
Despite knowing exactly what kind of project they were looking for, participants overwhelmingly preferred to find the project by browsing rather than searching.
-
None of the participants saw the "Create List" button at the top of the Materials tab. Additionally, participants expected to be able to create a list from the product pages rather than needing to create a list up front.
Changing Course
We went back to the drawing board and asked ourselves: How can we make this process flexible but familiar? Moving forward, we shifted our focus from the list concept to making sure the navigation to and from project pages was fluid and intuitive. Additionally, we simplified the scenario to eliminate any confusion around project specifics.
After preparing the next prototype, we conducted our second round of usability testing.
-
In contrast to our first test, all participants were able to find a project and save it for later.
-
Several participants were confused by the wording on the button "Select from Category".
-
Participants found the process of creating and adding products to the list much smoother, but didn't understand why they needed a list in the first place.
Third Time's the Charm
After discussing improvements as a team, I took the lead not only on developing the prototype further, but also conducting the final round of usability testing. Here's what I found.
-
Although most participants in previous tests wanted to be able to find projects by browsing, this time several participants wanted to be able to search for projects through the global search on the home screen.
-
Most participants easily found their way from the project page to the product pages and back, but some wanted shortcuts, such as a recommended product on the project page, or relevant projects on a product page.
-
Several participants were confused by lack of indications that the browse categories could be horizontally scrolled.
-
Every participant clicked "Add to Cart" before they clicked "Add to List".
The results.
Planning a planner didn't go entirely according to plan, but we came out better for it.
At the end of our two week sprint, we had prototyped, tested, and refined a DIY feature for the Home Depot mobile app.
By the final test, we had almost nailed designing a seamless navigation to and from project pages - whether it was to find the project, or to find products for the project. All that's left is small tweaks.
As for the lists? That's up next. After all, this is just the beginning.
LEARNINGS & NEXT STEPS
Takeaways
-
Start small and size up with scope, not the other way around.
-
Balancing what we want to do with what we can do is critical, especially in a limited time frame.
-
After we prioritized the flow of navigating to and from the project page over the list feature, the feedback from usability testing became much more focused and actionable.
-
-
Take the time to research the subject individually before jumping into user research and ideation.
-
Some obstacles our team ran into during the design process were due to a lack of personal knowledge on the subject we were designing for.
-
In our efforts to ask insightful research questions and design informative usability tests, we would have benefitted from taking the time to get as informed as possible.
-
Next Steps
Just because this is a concept project doesn't mean I can't dream.
Diving deeper into lists
I'd like to take a closer look at what users need out of a "list" feature and how it can support other features of the app. What sets it apart from cart? Should it even be called a list?
Designing a progress tracker
In the preliminary research users mentioned using to-do lists to keep track of their projects. Given the time, I'd like to ideate a project tracker, especially when it comes to projects that are more complex or have steps that aren't necessarily chronological.
Integrating with global search
As several participants mentioned in the final usability test, adding a project/product toggle to search results could help streamline the average project seeker's experience.
