FICO, Case Study ← Back to portfolio

FICO · 2025 to present

From a half-built system to org-wide AI governance

A design system rebuilt from its foundations, then extended into one standard for AI-assisted work across marketing and product.

The platform home, rebuilt from the Figma design with sample data, in both themes from one set of tokens. Scroll inside the dashboard to see the rest. Branding is blurred.

01 · System context

I joined FICO in 2025, when its design system was about halfway built. It serves dozens of product teams across a decision management platform. I lead the system end to end with a 4-person team: three engineers and me.

A few months into my tenure, AI tools arrived across the company. FICO is a long-established organization, and there was no standard for how AI-assisted design or code should be reviewed. The system became the place to set one: an AI-in-the-loop workflow where AI drafts and people approve everything before it ships.

Illustration. The system sits under every team, with one review layer for AI-assisted work.

02 · System problem

SymptomComponents were inconsistent, tokens were irregular, the documentation was written for engineers rather than designers, and nothing had been audited for accessibility.
Root causeNo single governed pipeline from request to release. Changes entered at different stages with no consistent review gate. Then AI multiplied the volume of new work with no standard for reviewing it.
System responseRebuild the foundation (tokens, components, designer-facing docs, accessibility), then set one AI and accessibility review standard across marketing and product, built into the pipeline rather than bolted on.
Illustration with sample content. The kind of drift the audit found, and the same pieces after the rebuild.

03 · System architecture

A change to a foundation token propagates through the system before it ever reaches a consuming product.

FoundationRaw values for color, spacing, and the type scale, defined once.
TokenSemantic aliases, like --color-accent, map to foundation values per theme.
ComponentComponents consume only semantic tokens, never raw values.
ProductConsuming teams inherit the change on their next update, with no manual restyling.
Illustration with sample tokens. Components only reference semantic tokens, so one mapping change reaches every product.

04 · Key decisions

Why
Documentation consistently lagged component releases by weeks, and the team was too small to keep every audit current by hand.
Tradeoff
Every AI-drafted output needs a person to review it before publishing. That adds a review step but removes the drafting bottleneck.
Result
Documentation and audits now stay attached to the release they describe instead of trailing behind it.
Why
Raw values in components meant a single foundation change required touching every component individually.
Tradeoff
A stricter authoring constraint for component builders, in exchange for one point of change.
Result
Theme and foundation changes now propagate without per-component edits.
Why
Changes were entering the system at inconsistent points, so review depended on who happened to catch them.
Tradeoff
More process for each change, in exchange for predictable review points.
Result
Every change now passes through the same gates, regardless of who authored it or which team requested it.
Illustration with sample tokens. One component, two themes, the same semantic token names.

05 · Accessibility

Contrast, focus, keyboard, and semantics are checked, not assumed. Here’s how a field in this system is annotated.

  1. Label bound to its fieldScreen readers announce “Account name” with the input.
  2. Text contrast 15.96:1Field text #1A2230 on white, well above the 4.5:1 minimum.
  3. Visible focus, 4.84:1A 3px brand blue #0A6DE6 ring against white, above the 3:1 minimum for focus indicators.
  4. Errors use an icon and textThe message is linked to its field, so it’s announced with it.
  5. Keyboard reachableTab moves through the fields, then the button, in reading order.
$

Enter numbers only.

A live field, rebuilt for this case study with sample data. The ratios above are measured from these colors. Try tabbing through it.

06 · AI and accessibility governance

I worked across marketing and product to agree on one standard for AI-assisted work. Every piece of it, whether a marketing page or a legacy product screen, goes through the same four checks.

FlagTeams mark work that was designed or coded with AI assistance when it enters review.
System checkDesigns and code must use FICO tokens and components. One-offs need a documented reason.
AccessibilityAn automated scan, then a manual review against WCAG 2.2 AA for keyboard, screen reader, and contrast.
Sign-offA designer and an accessibility reviewer approve before release. Recurring issues feed back into the system and the prompts teams use.

The release pipeline

Every change to the system moves through the same eight stages. Select a stage to see what happens there.

Request
Triage
Design
Review
Build
QA
Release
Docs
Select a stage above.

The AI prototyper

Designers use it to build quick, lightweight prototypes outside our production codebase. It uses IRIS CSS but not the actual code, so it spends fewer AI tokens and builds faster for iteration. Designers, product, and engineering use the prototypes to talk through functionality.

Illustration with sample data.

07 · Adoption

Components in the library
71
Templates
7
Domains building on the system
36+
Products on the AI + accessibility standard
24

36+ is a floor, not a total: at least 36 domains and 7 named products build on the system. Marketing, the platform team, and every legacy product adopted the governance.

Try it: the analyst workspace from my latest prototype, built on the system with sample data. Expand it to work at full size. Branding is blurred, and some areas are outside this prototype.

08 · Outcome

What changed: A half-built, unaudited system became a consistent, accessible foundation. Releases move through one governed pipeline, documentation ships with the release, and 24 products across marketing, platform, and legacy work follow one standard for AI-assisted work.

What I learned: How to build a truly technical, themed system with a strong dev team, and how to pivot quickly to AI.

What I’d change: How much time we spent auditing up front. Once our Claude pipeline was in place, we ended up changing too much of it.

See the leadership story on kirstenstryker.com ← All work