A tool designed to simplify Kubernetes management by improving development practices, ensuring security compliance, and enhancing cost efficiency.
Fairwinds Insights: Design System
Overview
As the Product Design Lead at Fairwinds, I created the first design system for the app. The company was transitioning from Vue to React, which presented both a challenge and an opportunity to establish a cohesive design system from the ground up.
Role
Design Lead
Tools
Figma, Storybook
Methodology
Atomic Design
Details
Scope and Considerations
Process
With no previous design system or standards in place, I faced the challenge of prioritizing components that could be developed alongside the ongoing transition from Vue to React. Working as the sole designer on the project, I collaborated closely with front-end engineers to build the design system in tandem with component development in Storybook.
Foundation
Utilizing atomic design principles, I began by defining the core elements, such as colors, typography, and spacing. This modular approach allowed us to create a scalable system that could evolve alongside the product.
Component Library
We developed a comprehensive library of reusable UI components documented in Figma and implemented in Storybook. Each element was designed flexibly to accommodate various use cases, ensuring consistency across the platform.
User Testing
New components were tested with existing users to validate their effectiveness and usability. This feedback loop was essential in refining the design system to meet user needs.
Accessibility Focus
Special attention was given to making tables and visualizations accessible, addressing previous shortcomings in screen reader compatibility. This ensured that the design system supported many users.
Outcomes
Challenges
The dual challenge of building a design system while the development team transitioned from Vue to React required careful prioritization and close collaboration. Focusing on high-impact areas first, we built a system that supported the ongoing technical shift without hindering progress.
The design system improved UI consistency and made the design-to-development process more efficient, leading to faster cycles and smoother handoffs. Key achievements included better accessibility, particularly in tables and visualizations.
This resulted in a more cohesive user experience, shorter development times, and clear documentation, making the system easy to maintain and scale. It also raised the standard for accessibility across the platform.
