ProjectsRésuméAboutContact
Project List

Ignite Design System

Ignite Design System is a design system and component library supporting First American's Ignite application.


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, an application that simplifies the mortgage closing process, managing transactions, and escrow.

When
2021 Present
Responsibilities
  • Systems Design
  • Front-End Development
Platforms
  • Web
  • Figma
  • Angular
  • Storybook

My Role

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.

Challenges

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 for libraries and components. I would need to rebuild the UI kit from scratch.

IDS' component library was not growing along with the product. Front-end engineers, most of which inxperienced 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 lacked flexibility, having 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 lack of choices made it difficult to find color pairings sufficient for contrast.

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 still hasn't came for most components).

Virtually every facet of the design system needed a revamp and 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 cause.

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 many responsibilites, but 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 a shaky foundation, 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 started to migrate from Sketch to Figma. We were beginning from scratch with a new UI kit to rebuild in Figma. I will need to think about the UI kit buildout while also serving as Figma help support the product design


Insights

Team

  • 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.

Process

  • 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, documentation, and no lines of communication, I needed hands-on involvement in the design and development process.
  • Steer prioritization towards the gaps in the design system.

Design System

  • A UI kit migration from Sketch to Figma was required, and it would be primarily a manual process.
  • The component library and storybook installation would need a significant cleanup and more foundation work, including a color system and design tokens.
  • The design system has little to no documentation.

Process

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 as much technical debt as possible. I want to be seen as the go-to person on anything related to IDS and the component library.

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)

Results

A New Design System Driven Process

I interviewed a handful of product design and engineering team people to understand what worked and what didn't. The one thing that kept coming up was the lack of cross-communication between teams and confusion.

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.

Old Ignite Color Palette (left) and New Ignite Color Color System (right)
Old Ignite Color Palette (left) and New Ignite Color Color System (right)

Foundations

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.

Design Tokens

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.

Old Ignite Color Palette (left) and New Ignite Color Color System (right)
Old Ignite Color Palette (left) and New Ignite Color Color System (right)

Color System

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. I also added intents — assigning each raw color to its intent, giving the color a semantic meaning, which helped clear up confusion about which color to use in each scenario.

Button component and variants in Figma IDS UI Kit
Button component and variants in Figma IDS UI Kit

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.

Component Library

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).

Ignite Shared Component Library in Storybook
Ignite Shared Component Library in Storybook

Storybook

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.


Future Plans

IDS is still (and always will be) 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.

Plans include:

  • Fixing accessibility gaps in design and code.
  • Filling in the gaps in the design and technical documentation
  • Responsiveness
  • 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
©2022, Chris Griffin, All Rights Reserved.