The foundation of a scalable design system
I initiated and kicked-off the process of building the foundation of a scalable design system covering all of Infarms internal tools to enable UI/UX Designers and Front-End Engineers in vertical teams to build new features more efficiently and consistenly.
I was responsible for the design part of the Design System, created the foundation of Design Kits using Figma, and started documenting the main components patterns. We started working on implementing the Design System together with Frontend Engineers, and gradually replaced old components with the new ones created.
Define Design System Principles & Experience Values to guide the further design process
We started with defining Design Principles that would guide us in creating the foundation of the design system. We also created Experience Values that would highlight user needs and expectations of the overall experience they have when using our tools, and features and interacting with the interfaces we design.
Both layers were used to design, validate and challenge new and existing components and design patterns. To make both, the DS Principles and Experience Values, more tangible, we also created an open space to collect and share best practice examples.
The experience values are end-user expectations when interacting with our interfaces and would represent how our users would feel when using our digital tools.
Uncover discrepancies and differences in our interface and start establishing the path for consistency
Within the design team, we ran a design audit to identify patterns and their main components and build a strategy on how to bring convergence into all these disjointed product experiences throughout our digital tools. In addition, we also asked front-end engineers and designers about their main needs and pain points when designing & shipping new features.
In the next step, we started looking into how we can improve some of the components and patterns used through best practice examples of our DS principles & UX values. We then decided to follow the Atomic Design methodology for building components and use IBM Carbon DS and Google's Material Design as our main references.
We started exploring how we can visually improve the most-used components and patterns. Based on this exploration we would then define some base guidelines including grids, typography rules & component styling that then would be translated to more complex components and patterns.
Building the foundation of the Design Language System while designing & documenting components & patterns
We started building the Design Kits for Desktop and Mobile and made sure all components would pass accessibility standards and follow the DS principles & UX values we defined. We divided the Design Kits into three Libraries. This would enable us later to create local components more independently while still sharing the same core assets.
As part of the Design Kits, we also documented the dos and don'ts, and overall anatomy of the components and started creating design patterns and guidelines. The Design Kits were accompanied by onboarding guides and a governance model for Designers and Engineers on how to contribute to the design system initiative.
Using Figma variants, we were able to combine multiple states and types of the same components into one single component. These components & patterns would be documented on how and when to be used. In a further step, we want to align all component names with the code component library.
Initiating a Design System Guild while engaging Stakeholders in the process
In hindsight, the main challenge wasn't craftsmanship but advocating for the necessity of a design system to executives and stakeholders. At the time, Infarm faced constraints with limited resources among developers and designers, all deeply embedded within vertical teams. Our task was to instill consistency across various touchpoints while advancing new functionalities and enhancing existing software.
To address this, we formed a guild comprising designers and engineers, meeting biweekly to synchronize progress, align efforts, and devise workflows conducive to existing responsibilities. Additionally, on a monthly basis, we invited broader participants and stakeholders, ensuring they remained informed about ongoing progress and the significance of defining a comprehensive design system. Through these efforts, we laid the groundwork for scalable design practices while navigating organizational dynamics and resource constraints.