HDW Design System

The primary objective was to enhance accessibility and consistency across HDW's platforms while building a scalable and maintainable design system. This system needed to bridge collaboration between designers, developers, and stakeholders, allowing the teams to easily discuss components as HDW grows.

Structure

Our HDW design team determined that the most effective approach for our use case was to prioritize simplicity, ensuring that non-technical team members could actively participate in the design process. Instead of adopting an atomic design methodology—where components are organized into atoms, molecules, and organisms—we opted for something more straightforward: we listed all key components at the same level to avoid unnecessary complexity.

Each Figma page is dedicated to a single component, making navigation intuitive for users unfamiliar with structured design systems. This approach aligns with the client's early-stage design maturity by prioritizing ease of use, allowing for faster iteration and collaboration without the complexity of rigid hierarchies.

Visual Direction

To establish a cohesive visual direction for the design system, I based it on the client-approved moodboard I had created a few months earlier. The moodboard defined the overall theme, iconography, and typography. One major inconsistency I identified was the varying color usage in icons, which resulted in a fragmented visual experience. To resolve this, I proposed standardizing a single accent color for consistency.

During discussions on implementation, rather than creating multiple file variations for different icon colors, I leveraged my frontend development knowledge to suggest a hex code-based solution where developers can update icon colors directly in the code. This suggestion saved valuable time and improved design efficiency.

Additionally, we took inspiration from the U.S. Web Design System (USWDS) to ensure accessibility compliance and adherence to federal design standards.

Components

While USWDS provided a strong foundation, HDW's complex data needs required additional custom components to effectively handle large datasets. We developed a library of modular components that included pre-built UI patterns such as dashboard templates, structured page headers, and dataset cards. These streamlined workflows and reduced redundant design efforts.

I contributed to the overall design system and took the lead in designing several key components, including buttons, tabs, and tags. This involved not only defining their design but also building them in Figma as reusable components with variants and states, allowing for flexibility across different interactions and use cases.

Scalability

Beyond ensuring consistency, the HDW Design System needed to support both the internal and public-facing sites while maintaining the flexibility for the internal site to evolve into its own design system in the future. To achieve this, we maintained shared components (used for both internal and public-facing sites) while creating separate internal-specific components. This way, when the time comes, these internal-specific components can be easily extracted into a separate design system without disrupting the overall structure.

For instance, while the public site prioritizes broad usability, the internal site requires specialized components tailored to internal workflows. By keeping these components modular yet separate, the system remains scalable, adaptable, and future-proof, allowing both platforms to grow independently while maintaining design cohesion.