← Back to Work

Case #IRIS-2018 · Enterprise Platform Design · FICO

IRIS Design System

Enterprise Component Library & Design Language

Design Systems 2018–2025 Lead Designer

01 The Story

The goal: build a complete set of components covering every pattern in the existing style guide.

Duration

7 Years

Product Teams

8+ Products

Accessibility

90% WCAG AA

Using Bootstrap as the styling foundation, the goal wasn't to reinvent the wheel — it was to unify the wheels that already existed. ng-bootstrap, Hummingbird, and other component sources were married with the Angular CDK to establish consistent, reliable behaviors and interaction patterns across the platform.

Adoption required more than a library. The components needed a home — an Angular application built around engineer needs: comprehensive documentation, live examples running directly in StackBlitz, and a GitHub repository that allowed contributions, enhancements, and bug fixes through a curated review process. The open-source infrastructure underpinning Angular Material's documentation was an early reference point for what scale could look like.

As the product ecosystem expanded, teams increasingly worked independently when designing and building interfaces.

Product teams relied on Axure RP to create wireframes, which were then handed off to visual designers to translate into final UI using the design system.
Each product implemented its own UI patterns, resulting in inconsistent interactions and visual styles across the platform.
Designers repeatedly recreated the same interface elements, while engineers implemented multiple variations of identical components.
Without shared design foundations, engineers spent significant time designing and building components that already existed elsewhere.
Accessibility requirements were inconsistently implemented across products, increasing compliance risk.

The product landscape before IRIS — inconsistent patterns, duplicated components, no shared language.

“The system doesn't replace judgment. It removes the cost of making obvious decisions over and over again.”

— Design System Director, FICO

Design direction drew from systems that had already solved the readability problem at enterprise scale — Semantic-UI and Shopify's Polaris were touchstones. Component behavior and feature options would be controlled by parameters. Styling variations — for components that needed them — would be driven by CSS classnames and CSS variables, following an approach outlined in early exploration work by the team.

02 The Process

Every iteration responded to something real — a team struggling to adopt, an engineer recreating what already existed, a product shipping with the wrong spacing. The system evolved by listening, not by planning.

Iteration 00

The baseline — what we were working with

Products built independently over years. Axure wireframes, static redlines, tribal knowledge. No single source of truth. Engineers making visual design decisions because there was no system to reference.

Fragmented implementations across products — same patterns, different executions.

Before

Designing in Axure, handing off to visual design

→

After

Designing in a live system with production-ready components

Iteration 01

Engineering enablement — Angular component framework

Code was the system. Engineers implemented Bootstrap components as the foundation. My role was governance — defining the visual language and interaction patterns that ensured those components worked consistently across every product.

Before

Engineers rebuilding the same components in isolation

→

After

Import, implement, ship — in a fraction of the time

Iteration 02

Documentation and governance — making the system self-sustaining

A system that requires constant hand-holding doesn't scale. I helped establish usage guidelines, contribution workflows, and design review processes so teams could build with IRIS confidently.

Iteration 03

Design foundations — color, type, icons, layout

In this phase, the system was still code-first. My role was to translate that system into Figma. I established foundational styles for color, typography, icons, and layout — aligning design artifacts directly to production.

Iteration 04

Migrating from Axure to Figma — building the component library

Designers needed to stop designing one-off screens and start building within a shared system. I built the Figma component library to mirror the Angular codebase exactly — what you design is what gets built.

Iteration 05

Full platform adoption — weekly working sessions

To support adoption, the IRIS team hosted weekly three-hour working sessions where designers and engineers could ask questions, share feedback, and participate in peer reviews. Being fully remote allowed us to bring together teams from across the company, creating a consistent feedback loop and accelerating alignment at scale.

IRIS at full adoption across FICO Platform

03 The Outcome

Consistent Experience

8+ products now share a unified design language. Users moving across the FICO platform see one system, not eight independent interpretations.

85% Faster Delivery

Design-to-production time reduced by 85%. Teams reuse existing components rather than recreating them — shipping more, debating less.

Accessibility at Scale

90% WCAG 2.1 AA compliance built into the foundation. Accessibility stopped being a checklist item and became the default behavior of every component.

IRIS delivered a scalable, unified design foundation across FICO platform—enabling consistency, faster delivery, and long-term product innovation. This was achieved through deep cross-functional collaboration, ensuring the system was adopted, trusted, and sustained over time.

In 2025, IRIS evolved into the FICO Design System, purpose-built to enable the next-generation platform.

Moving forward, the opportunities are clear: dark mode support, automated design token pipelines, expanded governance for team contributions. The foundation is strong enough to build on indefinitely.