Designing the Structure Behind Our Design System

Timeline

6 Months

My Role

Senior Product Designer

Platform

Web

Introduction

Our design system documentation site had become hard to navigate and maintain. Designers and developers struggled to find components, understand usage, and trust the information. With the launch of a new system, we needed a clearer, easier way to organize and present content for all audiences.

My Role

I led the information architecture, defining how content would be organized, labeled, and surfaced. After auditing the existing site, I proposed a simpler model focused on clarity and usability.

To validate the structure, I ran a UserZoom study using a Figma prototype with Product Designers. The test confirmed what worked, revealed areas of confusion, and guided refinements to language and hierarchy.

The Challenge

The previous site was bloated and difficult to navigate, with inconsistent structure and duplicate content. Designers often lacked confidence that they were referencing the right components or the most recent guidance. The goal was to simplify and clarify the experience, making the site easier to use, reducing confusion, and helping teams move faster with greater confidence.

Kudos to Manfred on a beautiful site design and Adam for leveling up our design system with a more intuitive and efficient experience.

Introduction

Our design system documentation had become hard to navigate and maintain. Designers and developers struggled to find components, understand usage, and trust the information. With the launch of a new system, we needed a clearer, easier way to organize and present content for all audiences.


My Role

I led the information architecture, defining how content would be organized, labeled, and surfaced. After auditing the existing site, I proposed a simpler model focused on clarity and usability.

To validate the structure, I ran a UserZoom study using a Figma prototype with Product Designers. The test confirmed what worked, revealed areas of confusion, and guided refinements to language and hierarchy.


The Challenge

The previous site was bloated and difficult to navigate, with inconsistent structure and duplicate content. Designers often lacked confidence that they were referencing the right components or the most recent guidance. The goal was to simplify and clarify the experience, making the site easier to use, reducing confusion, and helping teams move faster with greater confidence.

Kudos to Manfred on a beautiful site design and Adam for leveling up our design system with a more intuitive and efficient experience.

Introduction

Our design system documentation had become hard to navigate and maintain. Designers and developers struggled to find components, understand usage, and trust the information. With the launch of a new system, we needed a clearer, easier way to organize and present content for all audiences.


My Role

I led the information architecture, defining how content would be organized, labeled, and surfaced. After auditing the existing site, I proposed a simpler model focused on clarity and usability.

To validate the structure, I ran a UserZoom study using a Figma prototype with Product Designers. The test confirmed what worked, revealed areas of confusion, and guided refinements to language and hierarchy.


The Challenge

The previous site was bloated and difficult to navigate, with inconsistent structure and duplicate content. Designers often lacked confidence that they were referencing the right components or the most recent guidance. The goal was to simplify and clarify the experience, making the site easier to use, reducing confusion, and helping teams move faster with greater confidence.


Kudos to Manfred on a beautiful site design and Adam for leveling up our design system with a more intuitive and efficient experience.

Validating the Structure

Testing the new documentation experience with Product Designers

As part of the design system site redesign, I focused on defining and validating the information architecture. I built a clickable prototype in Figma and ran a user study through UserZoom to see how Product Designers naturally explored the site, where they hesitated, and whether they could quickly find what they needed.

Participants completed a series of real-world tasks and answered follow-up questions about clarity, navigation, and confidence. The results confirmed that the new structure made content easier to find and understand, while surfacing a few areas where labeling and hierarchy could be refined. These insights helped us validate the direction and ensure the experience felt intuitive and useful before development.

User Study Overview

The remote usability study combined open-ended questions with task-based scenarios to evaluate navigation, comprehension, and overall usability.

Focus Areas

  • Understanding of key terminology and naming conventions

  • Confidence in navigating between pillars and libraries

  • Ability to locate specific components and patterns

  • First impressions and emotional response to the new design

Sample Questions

  • “What stands out to you on the homepage, and where would you navigate first?”

  • “How would you search for a specific component?”

  • “Do you understand the difference between a component and a pattern?”

  • “Was there anything that frustrated you about the site?”

User Feedback

“Engaged! I really like the color palette and new structure. I was curious to keep exploring.”

“I really liked it! It was super easy to navigate and most tasks were very easy, which means the structure made sense.”

“Feels like a big improvement over the current site. Easy to navigate."

View More Work...

Website ReDesign
Website ReDesign
Website ReDesign
Creative Evolution
Creative Evolution
Creative Evolution
Influencers
Influencers
Influencers