First American is a financial services company that provides title insurance and settlement services to the real estate and mortgage industries.
Ignite Design System (IDS) is a design system that supports Ignite, which is an application that simplifies the mortgage closing process, managing transactions, and escrow.
When2021 — Present
- Design Systems Design
- Front-End Development
I am a primary contributor and maintainer of the Ignite Design System, including the Figma UI Kit, Angular component library, and documentation. Using a common language, I help bridge communication and knowledge between the product designers and engineers.
An external agency had already created a rough and simplistic design system, but the lack of documentation and oversight over IDS was a real problem. When IDS could not prescribe a solution to a problem, the product designers were left to their own devices to solve their design problems, often in an ad-hoc way that did not align with IDS.
The product design team was planning a transition from Sketch to Figma in the coming months. Sketch and Figma have a lot of overlap as far as feature set, but there is little overlap in components. I would need to rebuild the UI kit from scratch; this alone will be a large project.
IDS' component library was not growing along with the product. Front-end engineers, most of which did not seem to have much experience with design systems, would often copy and paste component code directly into the application from IDS or create complex components that were not reusable. The engineers were not utilizing design tokens and coding components in a modular way that would allow for easy reusability.
The color palette had plenty of hues but no tints or shades, which is necessary for pairing contrasting colors to meet the WCAG 2.1 AA accessible contrast ratio of 4.5:1. The current color system lacked the flexibility you would need for a web application — many hues but no shades and tints. The lack of choices made it difficult to find color pairings sufficient for contrast. Blue is the application's primary color, and there were plenty of blue values, but some of these blues did not harmonize well with the other blue values.
The inherited design system was very top-heavy — there were a lot of components from simple to complex but lacked a stable foundation in design tokens. The component library seemed more like a repository — a place to dump components that could be reused someday (spoiler alert: that someday has never come for most components).
Virtually every facet of the design system needed a revamp or a more stringent process. Across the teams and practices, there was an apparent lack of education, lack of communication, and a lack of basic understanding of design systems and their purpose.
Research & Planning
IDS was supporting many teams and working at a velocity that would make it challenging to get ahead of their needs. I had to think about processes and prioritization — where can I make the most significant impacts and bend the design and development process in my direction so I could at least have oversight and point people in the right direction?
I began inserting myself into design and engineering meetings to gain insights and observe. It started with design reviews and inclusion in code reviews. By announcing myself and being involved, the product design and engineering teams knew there was now a person spearheading the design system and could put a face to the mission.
I was also still sorting out what I thought my responsibilities should be. When First American hired me, it was thought I would be building shared components for the feature teams. Component buildouts are one facet of my job. Still, after understanding the breadth of the problems with IDS — I wanted to shift my focus to purely foundational, architectural, and process tasks. We were building software on shaky ground, and I thought it was more important to work toward goals that would significantly impact IDS' users — product designers and engineers.
As I got in the door with the design and engineering teams, I audited IDS and documented the issues. There were several complex components, with a lack of design tokens and foundational components, which meant many inconsistencies between components — including code quality and design implementation.
Around the time I started, the product design team was planning to migrate from Sketch to Figma. We were starting from scratch with a new UI kit rebuilt in Figma. I will need to start thinking about the UI kit buildout while also serving as Figma help support the product design
- All parties supported by the design system needed basic education on design systems.
- Designers needed more flexibility and support from the design system in the form of foundational components and design tokens.
- Most of the engineers had little to no experience with design systems and what it is to build an application in a modular and systematic way.
- Designers are mostly unfamiliar with Figma and will need support learning how to use a library and basic Figma support.
- No management or oversight for the design system and any processes established in the initial design system pass fell to the wayside.
- Due to the lack of process and no pre-existing responsibilities for my role, I needed hands-on involvement in the design and development process.
- Steer prioritization towards the gaps in the design system.
- The UI kit needed to migrate from Sketch to Figma, and it would be primarily a manual process.
- The component library and storybook needed a significant cleanup and more foundation work, including a color system and design tokens.
- The design system has little to no documentation.
I inserted myself into pertinent meetings where I could, allowing me to observe, chime in when needed, and point designers and engineers in the right direction to mitigate the technical debt. I want to be seen as the go-to person on anything related to IDS and the component library. It took several months before there was any consistency in including a design technologist.
In my free time outside of meetings, I started formalizing a plan. I took the results of my audit and started creating and prioritizing tasks.
- Prioritize and manage multiple efforts at once — we were building the car as we were driving it.
- Component buildout for feature teams.
- Communicating and bridging the gaps between departments.
- Audit the component library and application.
- Audit the designs system foundations (design tokens, documentation, atomic components)
A New Design System Driven Process
I interviewed a handful of product design and engineering team people to understand what worked and didn't. The one thing that kept coming up was the lack of cross-communication between teams and confusion about the design technologists' role.
We formalized a process that improved communication between teams, including a design technologist at the correct times, and was inclusive of all stakeholders and teams.
Design tokens and atomic components are vital to a design system. Every design, component, and layout, from the design system to the single-serving UI elements, relies upon them as a foundation.
Only the most basic design tokens existed in the inherited design system with limited documentation. I took inventory of what was missing and filled in the documentation on the existing ones.
The new color system took the primary and secondary colors and gave each hue a shade (darkening hue with black) and tints (lightening hue with white). The new color system kept the current color palette while adding more flexibility. After choosing the new color values, I added intents — assigning each raw color to its intent and semantic meaning, which helped clear up confusion about which color to use in each scenario.
Figma UI Kit
I built the new Figma UI kit from scratch based on the Sketch and code components. The library includes design tokens, foundations, and basic to complex components used in Ignite.
The component library updates include an array of new design tokens, foundational components, and tooling. The new tooling helped streamline or automate processes and tasks (such as Lerna, a monorepo package management and publishing tool).
Storybook received an upgrade to the most recent major version. Upgrading to Storybook 6.0 meant we could take advantage of controls, allowing direct in-browser interaction with the component for testing. I also enabled the A11y addon that runs accessibility tests against each component and returns a report of accessibility issues.
IDS is still a work in progress, as with all design systems. Several current and future initiatives on the roadmap will bring the design system to a sufficient level of maturity.
- Filling in the gaps in the design and technical documentation
- Additional foundational components such as grid, text, and avatar.
- Linting to surface basic and common coding issues
- A website for a single source of truth.
- Complex patterns and layouts
- More robust release management and a changelog