top of page

Design System Website

THD design system helps our teams create high-quality and consistent user interfaces with reusable components for designers and developers to use in their projects. I was tasked to learn if our users can seamlessly navigate the design system for their design needs and the design system webpage. 

Project overview:

Challenge

How might we create a website that will help our users seamlessly navigate the design system for their design needs?

Design Hypothesis 

To redesign a portal that will meet our users' current and future needs.

My Role: UX + UI Designer, UX Researcher

Team: Sr. UX Designer, Developers, Product managers, Stakeholders

Software

Figma, Miro, Zoom, Pen & Paper

Project Duration  

6 Weeks

Discovery & Research

"This is something home depot needed for a long time. We never had something from an online perspective give us this"
                                                                                         - anonymous  

"This is something home depot needed for a long time. We never had something from an online perspective give us this"
                                                                                         - anonymous  

Usability Test

I conducted 10 one-on-one usability test sessions with 2 EUX Designers, 2 OUX Designers 1 UX manager, 4 IX engineers, and 1 engineering manager to learn and understand how I can help our users navigate the design system website to effectively use the design system. This prototype brings together the work of Creative, OUX, and the Brand Enablement Squad into one place and provides us with a method to display our 3 teams' combined vision to stakeholders.

Click here to view the complete script

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

Usability Test Findings

With the information I collected from my interviews. 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.​

Create 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 main page banner.

  • Include the benefit of using Stencil on the main page

  • Update the "table of content"

  • Research why we need to have "reference (do not use)" under the style page (tokens and Utilities).

  • Update the brand reference site with the information on the prototype

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

  1. The banner takes a lot of space and the image is misleading.  Users don’t scroll to the bottom of the page to see what is there. 

2. Nine out of ten users did not notice the right navigation bar. However, once it is noticed, they stated that its useful.

 

3. Why do we have that information there when it is not to be used?

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

4. Users just want to know when they can use the component. 

5. Users are not scrolling down the "welcome page" to learn if stencil work for them. They are going to the dev/designer page.

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

6. Users are clicking on the boxes and not scrolling down to view the information below. 

7. Our users feel like the words are screaming at them.

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

8. Would like to know when, how & where they are able to use the colors.

Check out more of my work below!

Client Project:

Student Project:

bottom of page