REDESIGNING FABRIC DESIGN SYSTEM
ALATION · Lead Product Designer · 2022-2023
Overview
Alation’s old design system was built on a custom framework, but lacked scalability and flexibility as our product offerings grew. As manager of the system, my goal was to redefine the design system from the foundations up in order to allow designers and engineers to build UI with greater accuracy and speed, as a part of updating Alation’s entire look and feel and attend to related design UX debt that had accumulated over the years.
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.
Old Catalog Page, using Fabric 2.0.
New Catalog Page, using Fabric Neo
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.
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.
Example: Data Grid Redesigns
THE OLD
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.
THE NEW
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: a more regular cadence of design component usage as well as best practices through brainstorms, review sessions, and design systems office hours.
I used Zero Height for our design centric documentation, while engineering used Storybook for build documentation.
Managing Accessibiltiy
WCAG Compliancy 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.
