top of page

Design Guidebook

UX Designer I UX Researcher

The THD design system is crucial in facilitating our enterprise teams to create high-quality and consistent user interfaces by utilizing reusable components for our customer-facing platform. Designers and Developers/Engineers have expressed confusion and uncertainty regarding optimal components and design systems utilization. My objective was to intuitively design the design system website, allowing our users to navigate it effortlessly and obtain information on using the components for their design requirements. I aimed to create a user-friendly experience for our users, making it easier to find the information they need.

My Role: UX Designer & UX Researcher
Team: Sr. UX Designer, Developers, Product Manager, Stakeholders & Content Strategist
Client: The Home Depot
Tools: Miro, Figma, Knapsack, Google Slides
Project Duration: 6 Weeks

Approach

  • Conducted a usability test on the current site to understand the pain points of our users.

  • Presented the initial findings to the team and incorporated their feedback to make further improvements.

Usability Test

To gain insights on how to improve the design system website and aid our users in effectively utilizing it, I conducted 10 individual usability test sessions with a diverse group of participants, including 2 EUX Designers, 2 OUX Designers, 1 UX manager, 4 IX engineers, and 1 engineering manager. The tests aimed to identify any challenges in navigating the website and accessing information on the design system. The prototype brought together the efforts of Creative, OUX, and the Brand Enablement Squad, offering a unified display of our three teams' vision to stakeholders.

Click here to view the complete script

Usability Test Findings

With the information I collected from the usability test. I was able to identify the most important thing that should be included on the MVP (minimum Viable Product). I start working on create the landing pages and delegate some to my team members.​ My next step is to:

  • Create a landing page for​

    • Welcome to Stencil​

    • Figma Quick Start

    • Getting started for designers

    • Foundation 

    • Atomic Components

  • Simplify the version of the component status bar.​​

  • Update the design system website with the information on the prototype

Screen Shot 2022-10-12 at 7.56.14 PM.png

1. The current banner design is consuming a significant amount of space and the image used is not effectively communicating its purpose. Our usability test results showed that users are not scrolling down to the bottom of the page to view the content.

Screen Shot 2022-10-12 at 8.03.27 PM.png

2. Nine out of ten users failed to recognize the significance of the right navigation bar. Upon being made aware of it, they acknowledged its usefulness.

​

3. The participants raised a valid concern regarding the presence of redundant information on the page that serves no purpose.

Screen Shot 2022-10-12 at 7.56.22 PM.png

4. Users expressed a desire for clear information on the availability and usage of components, rather than extraneous details.

Screen Shot 2022-10-12 at 7.56.22 PM.png

5. Users are bypassing the 'Welcome Page' and directly navigating to the Developer/Designer page, indicating that they are not interested in exploring the initial information on the welcome page and want to directly know if Stencil is the right solution for their needs.

Screen Shot 2022-10-12 at 7.56.33 PM.png

6. Users are not scrolling down the page to view the information below, but instead are clicking on the boxes presented on the page.

Screen Shot 2022-10-12 at 7.56.33 PM.png

7. Our users have reported feeling that the text on the page comes across as too aggressive or overwhelming.

Screen Shot 2022-10-12 at 7.56.33 PM.png

8. Users would like to have clear information on when, how, and where they can utilize the color palette in their designs.

First Ideation

I proposed using the THD design system to build the website, which would not only demonstrate the versatility of the components but also provide our users with a tangible example of how they can be implemented in real-world scenarios.

Final Ideation

I utilized our design system to create the components for the website.

Prototype

The website design system

I found building the THD design system to be a challenging but rewarding experience. It was like piecing together a complex puzzle, starting with small components that eventually came together to form a comprehensive and functional system. I enjoyed the process of researching, learning about the fundamentals of design systems and their benefits, and ultimately creating a tool that would aid designers, developers, and other users in their work.

Conclusion

This project allowed me to build my leadership, collaboration, and communication skills, and hearing positive feedback from our users was the highlight of it all. Feedback such as: 

  • "This is something Home Depot needed for a long time. We never had something from an online perspective"

  • "I really like this, it’s helpful to have a website that has all the brand standards."

  • "This is VERY intuitive and user-friendly. I am not someone who enjoys looking at documents. Found it easy to look through."

If I were still working on the project, my next step would have been to:

  • Update the main page banner to make it more visually appealing and informative for the users.

  • Include the benefits of using the design system prominently on the main page to encourage adoption.

  • Create a movable "table of content" on the right side of the page to make it easier for users to navigate and find what they're looking for.

  • Conduct research to understand the reasoning behind including "reference (do not use)" under the style page (tokens and Utilities) and consider ways to better communicate that information to the users.

bottom of page