The Home Depot DIY

A hub for users to do-it-themselves: A CONCEPT PROJECT.

thdcover.png

THE CHALLENGE

The Home Depot wanted to provide its customers with an on-the-go, mobile-based tool to brainstormplantrack, and document their do-it-yourself projects, offering them access to any DIY planning materials they would likely need to execute them.

THE SOLUTION

A smartphone application that accompanies The Home Depot's users as they achieve their DIY-related goals, providing them with all the tools required to go from planning to executing and sharing, all in one place.

THE RATIONALE

A mobile-based solution would allow for brand expansion and awareness by targeting (and genuinely serving) the DIY crowd, ensuring them that they can trust The Home Depot with their end-to-end DIY process.


WHAT WE DIY'D

Timeline: 2 weeks

Target Screen: Mobile

Tools: Pen & Paper, Sketch, InVision, Google Forms, Google Sheets

Team:

  • Ana De Magalhães (Competitive and User Research, Sketching, Wireframing, Prototyping, Usability Testing)
  • Helen Ragen (Information Architecture, Card Sorting, Sitemaps, User Flows, Usability Testing)
  • Steven Lee (Competitive Analysis, Ideation, Wireframing, Prototyping, Interface Design)

Other Materials:

Feel free to check out the Case Study for this project and/or play around with the Prototype.


STRATEGY & RESEARCH

 

 

WHO IS THE COMPETITION?

strategyandplanningp3.png

To paraphrase Jaime Levy (2015), it was crucial to start the process by taking a close look at what the competition was up to. We familiarized ourselves with both direct and indirect competitors to identify market gaps, opportunities, and the kind of solutions that were already out there.

This immersion lead to an understanding of the current landscape, making clear the importance of focusing on brand differentiation and awareness. We wanted to preserve The Home Depot’s current position as one of the main leaders of its industry and “spread the meme of their personal identity” even further (a phrase borrowed from Dr. David C. Evans, 2017).

 
 

GETTING TO KNOW OUR USERS

p3useresearch.png

It was crucial to understand how users perceive The Home Depot and what they go through as they navigate its different platforms. User journeys were conducted from a cognitive-behavioral perspective to gain insights into the interaction between people’s thoughts, feelings, and behaviors.

We wanted to gain a better understanding of the DIY world itself and the folks immersed in it. Research was aimed towards uncovering answers to questions such as: What does DIY mean to users? How do they approach projects? Which elements/properties do they consider essential? What kind of content would they like to see and consume?

 

WHAT FRUSTRATES DIY-ERS?

 
User Research Copy.png

The previous questions guided the decision to resort to both qualitative and quantitative research methods. The depth of interview insights and the reach of survey answers could maximize the validity of all the information gathered, setting a firm foundation for our design.

Thanks to the (temporary, but awesome!) superpowers research affords when it comes to uncovering data, we were able to identify key pain points DIYers were struggling with. These included:

  • Disorganized and uncategorized content

  • Unclear instructions
  • Uninformative tutorials with missing information
  • Lack of visualization options and customization features

Additionally, findings showed that people prefer Instagram’s and Pinterest’s formats when it comes to content consumption—attractive photos and videos appear to promote motivation, leading to inspiration and a desire to DIY.


KEY RESEARCH INSIGHTS

  • Pinterest and social media lovers are a large group among DIYers
  • Being able to share projects is an impactful part of the process
  • People want (and hope) to be inspired both visually and emotionally
  • Crafts stores appear to be seen as more approachable/less intimidating

PRINCIPLES + GUIDELINES

  • DIY Projects should be accessible, and their content curated
  • Visual content should be coupled with clear, step-by-step instructions
  • Information should be organized in ways that make it easily discoverable
  • Simplicity is key in letting users know that DIY is friendly and inviting

THE HEROES: USER PERSONAS

 
laura.png

Laura: The DIY Artist (Primary)

  • Loves home décor and interior design
  • Favors Arts & Crafts stores
  • Wants a one-stop shop for all things DIY
  • Wants to share her projects on social media
  • Lives for beautiful visuals and carefully curated content
  • Needs to see clear step-by-step instructions

jeff.png

Jeff: The Home Renovator

  • Becomes inspired by his own thought process
  • Favors hardware and construction stores
  • Wants to keep track of tools/materials needed for projects
  • Wants to have an option to buy project-specific materials
  • Favors straightforward instructional videos
  • Wants to see what an object looks like before building it
 
 

Unlike The Home Renovator (a loyal customer of The Home Depot who prefers to do his shopping in-person), The Artist was targeted as the primary user persona due to her tech-savviness, her love for beautifully curated home-improvement blogs and her eye for visuals.

 

Sharing your project on social media makes it exist in the world.
— Laura, The DIY Artist (primary user persona)

diy: design-it-yourselF

designing for personas

 
Discovery & Ideation.png

Research findings allowed us to confidently begin ideating through initial sketches and wireframes that would eventually become a high fidelity, interactive prototype.

It was imperative for us to create a solution that would resonate with users, creating an emotional connection based on usability and helpfulness. Because personality is the platform for emotion (Aarron Walter, 2012), we wanted the application to have a life of its own while remaining true to The Home Depot’s brand and values.

We worked to honor the primary persona’s preferences by focusing on a social media-friendly format filled with visually pleasing, curated content that would still be mindful of the needs and goals of The Home Renovator.

 
 

SKETCHING AND WIREFRAMING

prototyping.png

In alignment with user goals and needs (while still remaining mindful of The Home Depot's business goals and brand guidelines), we worked to ensure the design would:

  • Be "image and video heavy" 

  • Offer clear, straightforward step-by-steps
  • Only feature content written by bloggers and specialists
  • Inform users about materials, cost, time, and level of difficulty
  • Include a non-hierarchical system based on tags and filters
  • Include a search-by-image feature
 

PROTOTYPING, TESTING & ITERATING

 
TESTINGITERATING3.png

The first set of wireframes included an overwhelming number of long screens, with some of them being labeled by testers as "too long" and "scary" (particularly, the payment screen of the checkout flow—second row, sixth screen, L-R in the image below)

Thanks to this valuable user feedback, and because the last thing we wanted to do was terrify our users (I'll leave that to black holes and supernovas), “gimme less terrifying, and more succinct!” became one of our main design principles.

 

SCREENS, SCREENS, SCREENS.

ROUND ONE

oldwiresp21.png
oldwiresp22.png

ROUND FIVE (Current VERSION)

After several rounds of testing, the design became a lot more refined and direct. Numerous screens were removed and replaced by accordion menus, which would allow for the completion of several tasks within one screen in a more intuitive, simple way. The checkout process was simplified by adding a single screen of ApplePay that would allow users to quickly complete their payment if they chose to buy tools and/or materials within the app. Other major changes included:

  • The addition of a CTAs to alert users after they completed each step of a tutorial

  • Font size augmentation to improve readability
  • A switch from a bottom navigation bar to a slide-out hamburger menu
  Overview of all the screens with their accompanying flow.

Overview of all the screens with their accompanying flow.


THE RESULTS

After implementing the changes mentioned above and repeatedly putting the prototype in front of users, we arrived at the current design solution. User testing allowed us to refine and continuously work towards achieving balance between the instructional portion of the content, and its accompanying visual imagery.

  An attempt at a balanced diet of simplicity, curated content and visual media. Alternate caption: Herein lie all the screens inside high tech bars of soap.

An attempt at a balanced diet of simplicity, curated content and visual media. Alternate caption: Herein lie all the screens inside high tech bars of soap.


FUTURE STEPS

  • Keep statistical significance in mind, and survey more users in order to continue working towards it

  • Develop profiles and app’s social media features (allow users to follow and have followers, add Snapchat-like ‘Stories’ feature)
  • Utilize AR (Augmented Reality) to visualize what a project would look like in the user’s own space
  • Provide users with a tool to customize a project’s dimensions and features to their liking (change dimensions, colors, etc.)
  • Adapt The Home Depot’s DIY app for tablet devices

IN RETROSPECT

LESSONS

This project drove home how important it is to define roles and strengths when working in teams. Doing so taught us to be more strategic and helped me manage business goals, user goals and team goals more effectively.

Setting rules early in regards to how we would deal with disagreement in case it arose really benefited our interactions and decision-making process; we were able to bond over wanting to make the best design decisions for the users, not for ourselves.

Finally, the time constraints of the sprint taught me to put my previous research skills to use in a more dynamic, open-minded and iterative way.

CHALLENGES

The main challenges the team faced had to do with the categorization and presentation of The Home Depot’s vast (and important) amount of available information. Thankfully, the team was able to make content easily discoverable and understandable in two big ways:

  • By refining the app's search feature and taking advantage of tagging systems, we focused on giving users the freedom to search in different ways (by text, by photos, and by filters)

  • By emphasizing and taking advantage of visual communication (photos and videos), which allowed us to make content easily digestible and mobile-friendly.

BORROWED wisdom

Levy, J. (2015). UX Strategy: How To Devise Innovative Digital Products That People Want. Sebastopool: O’Reilly.

Evans, D. (2017). Bottlenecks: Aligning UX Design with User Psychology. Kenmore: Apress.

Fessenden, T. (2017, March 15). A Theory of User Delight: Why Usability Is the Foundation for Delightful Experiences. Retrieved from https://www.nngroup.com/articles/theory-user-delight/

Walter, A. (2012). Emotional Interface Design: The Gateway to Passionate Users. Retrieved from http://blog.teamtreehouse.com/emotional-interface-design-the-gateway-to-passionate-users


Home   |   Next