Ignite Design System

My Role

As the main design and code contributor and maintainer of the Ignite Design System, which comprises of the Figma UI Kit, Angular component library, and documentation, I facilitated communication and knowledge exchange between the product designers and engineers.

Challenges

Although an external agency had created a rudimentary design system, the lack of oversight and documentation posed a significant issue for the IDS. When faced with unresolved issues, the product designers were forced to address their design problems in an ad-hoc manner that deviated from the IDS, as it was unable to provide a suitable solution.

Shortly after joining the product design team, it was decided that they would be moving from Sketch to Figma. Despite the significant overlap in feature sets between the two tools, there was a lack of compatibility for libraries and components, necessitating the rebuilding of the UI kit from the ground up.

The IDS component library failed to keep up with the growing demands of the product. Front-end engineers would frequently copy and paste component code from IDS directly into the application, or create intricate components that lacked reusability. They neglected to leverage design tokens and modular coding practices, which would have simplified the process of reusing components.

The color palette offered plenty of hues but lacked the necessary flexibility of tints and shades required to meet the WCAG 2.1 AA accessible contrast ratio of 4.5:1 when pairing contrasting colors. The limited options posed a challenge in finding color combinations that met the necessary contrast requirements.

The design system that was inherited had an excessive number of components, ranging from simple to complex, yet lacked a solid foundation in design tokens. The component library seemed to function more as a depository, with components being dumped without proper organization and planning for their eventual reuse (which has yet to happen for most of them).

A comprehensive overhaul and stricter process were required for almost every aspect of the design system. There was a visible absence of education, communication, and fundamental comprehension of the purpose of design systems across the teams and practices.

Research & Planning

IDS was providing support to numerous teams, that were working at a velocity that was difficult to keep pace with. I had to consider the processes and prioritize tasks to determine where I could make the most substantial improvements. I needed to steer the design and development process in the right direction, providing oversight and guidance to ensure that the work was headed in the right direction.

To gain insights and observe the design and engineering processes, I started attending their meetings. Initially, I participated in design and code reviews. By introducing myself and being more involved, the product design and engineering teams became aware that someone was taking the lead on the design system and could now associate a person with the initiative.

My initial responsibility at First American was believed to be building shared components for the feature teams. However, after gaining a more comprehensive understanding of the issues with the IDS, I realized that my focus needed to shift towards more fundamental, architectural, and process-oriented tasks, particularly those that could be automated. As we were building software on an unstable foundation, I considered it essential to work towards objectives that would significantly enhance the productivity of IDS's primary users - product designers and engineers.

Upon gaining access to the design and engineering teams, I conducted an audit of IDS and documented the issues. The audit revealed the presence of several complex components with a lack of design tokens and foundational components, resulting in inconsistencies between components — including poor code quality and suboptimal design implementation.

The product design team initiated a transition from Sketch to Figma, which necessitated starting from scratch to rebuild the UI kit in Figma. While simultaneously serving as Figma help support for the product design team, I needed to strategize the UI kit buildout.

Process

I actively participated in relevant meetings to gain insights, provide guidance, and steer designers and engineers towards reducing technical debt. My aim was to establish myself as the primary point of contact for anything related to IDS and the component library.

I initiated an interface inventory, documenting problematic patterns, and established a formal plan. Using the findings from my audit, I created and prioritized a list of tasks to address the identified issues.

• Manage and prioritize multiple efforts simultaneously as we were building the system in real-time.
• Build out components for feature teams.
• Facilitate communication and support for each team.
• Conduct an audit of the component library and the application.
• Conduct an audit of the design system foundations, including design tokens, documentation, and atomic components.

Results

A New Design System Driven Process

After conducting interviews with several members of the product design and engineering teams to assess the current state of communication, it became clear that there was a lack of cross-team communication and a great deal of confusion. In response, we established a formalized process that prioritized open communication and inclusivity, ensuring that all stakeholders and teams were involved and that a design technologist was present when necessary.

Foundations

Design tokens and atomic components are fundamental building blocks of a design system. They provide consistency and modularity across designs, components, and layouts, serving as the foundation for everything from the overall design system to individual UI elements.

Design Tokens

The inherited design system had only the most basic design tokens, with limited documentation available. I conducted an inventory to identify the missing design tokens and worked on filling in the documentation for the existing ones.

Color System

The updated color system involved creating shades (by darkening hues with black) and tints (by lightening hues with white) for each primary and secondary color. While maintaining the existing color palette, the new system provided greater flexibility. Additionally, I incorporated intents, assigning each raw color to a specific semantic meaning, which helped reduce ambiguity about which color to use in various scenarios.

Figma UI Kit

I constructed a brand-new Figma UI kit from the ground up, using the Sketch and code components as a reference. The library comprises design tokens (Figma styles), foundational components, and a variety of complex components utilized in Ignite.

Component Library

The updates made to the component library encompassed a wide range of additions, such as new design tokens, foundational components, and tooling. The inclusion of new tools helped to simplify or automate various processes and tasks, such as Lerna, a tool for managing and publishing packages in a monorepo.

Storybook

The latest major version of Storybook was installed, upgrading to version 6.0, which introduced controls that enabled direct in-browser interaction with components for testing purposes. The A11y addon was also enabled, which performs accessibility tests on each component and generates a report highlighting any accessibility issues.

Future Plans

The IDS is an ongoing project, as with all design systems. There are several current and upcoming initiatives on the roadmap that will help to bring the design system to a satisfactory level of maturity.

Plans include:

• Addressing accessibility issues in design and code.
• Improving design and technical documentation to fill in the gaps.
• Ensuring responsiveness across all devices.
• Adding new foundational components, such as text and avatar.
• Implementing linting to catch common coding issues.
• Creating a website to serve as a single source of truth for IDS.
• Developing complex patterns and layouts for more advanced use cases.
• Enhancing release management with a more robust process and a changelog.