Alation Design systems
Redesigning Fabric Design System
- Role
- Lead Product Designer
- Other teams
- Engineering
- Design
- Product Management
- Timeline
- 2022 – 2023
- Outcome
- Front-end build time reduced from months to weeks or even days
- Eliminated over 95% of existing accessibility issues
Summary
Alation’s old design system was built on a custom framework, but lacked scalability and flexibility as our product offerings grew. I took the role of the design systems manager after the previous designer left.
My goal was to redefine the entire library from the foundations so designers and engineers could build UI with greater accuracy and speed, updating Alation’s entire look and feel and attending to the design system UX debt that had accumulated.
My role
Overview
I redeveloped Fabric’s foundations, components, and molecules to be consistent and scalable, implementing approval processes for new components and variants, and created a design-centric documentation library to inform teams about best practices.
By redesigning the system, we effectively reduced the amount of time that front-end engineers took to build front-end features from months to weeks or even days, without having to rely on the Fabric team for direction or support.
The redesign
Foundations
Starting with Atomic Design
I started by rebuilding the system’s design from the ground up, establishing core foundations and fundamentals in order to maintain visual harmony and consistency, something our old system tried to do but broke down as we scaled.
The old foundations were enough to get us by when we were a small platform, but there was a huge need for more foundational aspects as we needed more components and standardization.
Example: Data Grid Redesigns
Table designs across the platform were inconsistent in both design as well as interaction. By identifying commonalities between the majority of use cases, I created scalable designs and toolbars to allow for maximum flexibility and consistency.
In-line editing, a highly sought after feature, required an understanding of different types of editing that needed to be supported. We first identified the commonalities between column data types in order to find a scalable pattern, then explored visual concepts to ensure thematic elements were consistent with the rest of the system and its foundations.
Documentation
Building a Documentation Library
Both design and engineering had little to no documentation on the original design system. We had notes about particular components, but many questions were still outstanding, especially as our design language evolved over time. I released documentation guides for designers, and worked with engineers to formalize and match designs to their documentation resources.
I established new practices to build a regular rhythm around component usage and best practices: brainstorms, review sessions, and design systems office hours.
Accessibility
WCAG compliance was a huge part of the redesign initiative, for both design and engineering. In order for us to comply with design requirements and secure new contracts (notably within the public sector), I ensured every component complied with WCAG 2.0 in respect to color, size, and interaction. Our previous system didn’t take accessibility into consideration — the design system’s redesign eliminated over 95% of existing accessibility issues on the platform.
