Crafting a New Design System
This is the story of retooling the design system from the ground up by customizing an open-source React component library.
Coordinating
Audit
Evaluate & Select
Customize
Look for more
Document
Launch
Background
As Principal Product Designer, I led the initiative to replace our fragmented, legacy UI components with a modern, scalable design system built on Mantine, an open-source React component library. This project was driven by the need for consistency, accessibility, and efficiency across our suite of internal tools as we moved toward unifying them into a single platform.
This team effort included:
1 Product Owner
Roadmap prioritization and Jira dependency mapping exercises
4 UX-Designers
Component audit, Figma customizations of the foundational Mantine components, design-specific accessibility considerations, pattern documentation, and Storybook sync
4 Front-End Engineers
Component architecture, code-specific accessibility considerations, and Storybook sync
Current System
Audit and assessment of the current system
The journey began with a comprehensive audit of our existing codebase. Our tools were built using an existing design system, but the design files and the apps' code had fallen out of sync to the point where it was a patchwork of custom styles, third-party libraries, and ad-hoc solutions. This was leading to inconsistent user experiences and increased maintenance overhead. I coordinated with UX and front-end teams to catalog redundancies, accessibility gaps, and opportunities for streamlining.
LIBRARY SELECTION
Evaluating and selecting Mantine
With a clear understanding of our needs, we evaluated several leading React component libraries, including MUI, Ant Design, and Mantine. Mantine stood out for its modularity, comprehensive documentation, robust set of ready-to-use components, and strong support for customization and accessibility. Its opinionated but flexible approach allowed us to enforce design consistency while still accommodating our unique brand requirements.
Making it OUrs
Customizing for our brand and usage
Working closely with our UX visual design team, we defined a new visual language (color palette, typography, spacing, and interaction patterns) that aligned with our brand identity. We customized Mantine’s theme using its powerful theming API, ensuring that every component reflected our updated design system.
This included:
Theme Configuration: Adjusting colors, fonts, and spacing to match our brand guidelines.
Component Customization: Extending and overriding Mantine’s core components to create unique, branded versions of buttons, inputs, modals, and more.
Accessibility: Ensuring all components met WCAG standards, leveraging Mantine’s built-in accessibility features and supplementing them where needed.
Design System Documentation: Creating comprehensive documentation for designers and developers, detailing how to use and customize each component.
More functionality Needed
Supplementing with Mantine React Table
While Mantine’s basic table component was functional, our platform required advanced table features such as sorting, filtering, pagination, and row actions. To address this, we integrated Mantine React Table, a robust data grid solution built on Mantine and TanStack Table.
This allowed us to:
Extend Table Functionality: Support complex data visualization and interaction patterns.
Maintain Consistency: Ensure the table component matched our custom design system by leveraging Mantine’s theme and component props for seamless integration.
Customize and Override: Use Mantine React Table’s flexible API to tailor the table’s appearance and behavior to our needs.
UI WORKSHOP
Building and documenting with Storybook
To ensure our new design system was accessible and well-understood by all teams, we implemented Storybook as our component documentation and development environment.
Storybook enabled us to:
Showcase Components: Provide interactive examples of each component, including all states and variations.
Document Usage: Detail props, best practices, and accessibility guidelines for each component.
Facilitate Collaboration: Allow designers and developers to review, test, and iterate on components in isolation before integrating them into the platform.
Launch
Migration and adoption
With the new Mantine-based design system in place, we began the phased migration of our platform. I coordinated with front-end developers to replace legacy components with their Mantine equivalents, ensuring a smooth transition with minimal disruption to users. We prioritized high-impact components first, including retooling our forms to utilize Mantine's form package, which manages form state, validation, and submission. We gradually worked through the platform while collecting feedback and iterating as needed and launched the tools as they completed their migration.
The old form
The new form
Looking back
A slow start but we got there
We could have pushed a little harder in the beginning, devoting more resources to this project rather than iterations to tools using the old system. This would have allowed the new system to be adopted sooner, but at the cost of many user requests and improvements being put on hold.
We did, however, transform our fragmented UI into a cohesive, accessible, and scalable solution. This project demonstrated the value of a principled, collaborative approach to design system development, setting the stage for future growth and innovation.
