Ignite Design System
Reigniting the Ignite Design System — the mortar for First American's suite of Ignite applications.
When
- 2021 — 2022
Platform
- Web
Expertise
- Design Systems Design
- UX/UI Design
- Front-End Development
Tools and Tech
- Figma
- Angular
- Storybook
Background
First American is a financial services company that provides title insurance and settlement services to the real estate and mortgage industries.
Ignite is an application that simplifies the mortgage closing process, managing transactions, and escrow.
My Role
As Senior Design Technologist for the Ignite Design System, I fulfilled several responsibilities, including that of a lead designer, front-end engineer, and de facto product owner.
Challenges
- The product lacked coherence, as teams worldwide operated in silos and implemented their processes and solutions to problems. This approach often led to conflicting work, resulting in duplicate or similar code.
- The component library needed to be more utilized, either because of inadequate documentation or because designers and engineers needed to be made aware of the existence of components.
- Product designers were often faced with conflicting or no guidance and were forced to address their design problems ad-hoc.
- Code was frequently copied and pasted from the component library directly into the application or created complex components that lacked reusability.
- The color palette offered plenty of hues but lacked the necessary flexibility of tints and shades to meet the WCAG 2.1 AA accessible contrast ratio of 4.5:1 when pairing contrasting colors.
A comprehensive overhaul and foundation were required for almost every aspect of the design system. There needed to be more education, communication, and fundamental comprehension of the purpose of design systems across the teams and practices.
Reseach and Planning
UI Inventory
We explored the Ignite application from end to end. We did code searches to document CSS properties that could be converted to design tokens, such as colors and typography. We took screenshots of atomic UI, such as buttons and form elements.
Research
We grouped and categorized all potential design tokens, paired them down to only necessary tokens, and compiled all our data into a spreadsheet.
Atomic components already existed in some form in the design system, we made decisions about what we would roll back into the design system using our collected data. In this case, the number of times a variant would be utilized.
We also interviewed the product design and engineering teams to get insight into the positives and negatives of the design system. This data gave us insight into what we should improve and how to prioritize design system tasks.
Observation and Participation
I participated in design and code reviews to gain insights and observe the design and engineering processes. The design technologists integrating into each design and engineering team was a two-fold strategy — helping support the team while building rapport and trust for the design technologists.
Insights
Team
- There needed to be more trust in the design system; it was neglected and needed more oversight.
- All stakeholders supported by the design system required basic education on design systems.
- Given that the product design team was largely unfamiliar with Figma, they would need assistance in learning how to use the library and basic Figma support.
Process
- An absence of processes around many of the design system’s mechanisms.
- Support needed to be more present. Product designers and engineers were left to discern design system applications for themselves.
- A lack of processes and support means the design technologists must be involved in more on-the-fly decision-making and support.
- No co-ownership between the design system and the design and engineering teams.
Design System
- 100+ colors, some of which were not being used, single-serving, and color groups nearly identical to the human eye.
- The design system requires a UI kit migration from Sketch to Figma, which would involve significant manual effort.
- The component library was top-heavy, with many complex components with little to no reusability value.
- No component composition. Complex components were not leveraging the smaller atomic components within the library.
- The component library needs extensive clean-up work and a stronger foundation, including the implementation of design tokens.
- Storybook was outdated, with inaccurate documentation and missing components.
- The design system needs comprehensive documentation.
A New Design System-Driven Process
Using the findings from our UI inventory and interviews, we established a formalized process prioritizing open communication and inclusivity. This ensured that all stakeholders and teams were involved and that a design technologist was present in meetings when necessary.
We also wanted to push the design system as a supporting tool rather than dictate design decisions. We included the product design and engineering team in all relevant conversations and decisions to give the design system co-ownership between product design and engineering.
Prioritization started with easy wins — the lack of design tokens and atomic components made for an easy target to get new and revamped tokens and components out in rapid-fire for consumption.
Results
Design Tokens and Foundations
Design tokens and atomic components are fundamental building blocks of a design system. They provide consistency and modularity across designs, components, and layouts as the foundation for almost everything.
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.
We refactored and paired down many of these foundational components to reduce complexity. Some atomic components were utilizing styles rather than a component — we converted these to components and communicated this change to the engineering team.
Color System
The updated color system involved creating shades (darkening hues with black) and tints (lightening hues with white) for each primary and secondary color. While maintaining the existing color palette, the new system provides greater flexibility and color pairings to pass WCAG 2.1 AA minimum contrast ratios. Additionally, I incorporated aliases, 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 Sketch and code components as a reference. The library comprises design tokens (Figma styles), foundational components, and various 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 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 enabled Storybook A11y addon performs basic accessibility tests on each component and generates a report.
Future Plans
Ignite Design System is an ongoing project, as with all design systems. Several current and upcoming initiatives on the roadmap will help 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.
- Developing complex patterns and templates for more advanced use cases.
- Enhancing release management with a more robust process and a changelog.
Drop me a line
Please feel free to contact me regarding consulting inquires, or just to say hello.
me@chrisgriffin.org