Case study 04

Cleaning up our design tools and process

Alongside feature work, I took on the upkeep that keeps a design team moving: our design history, our design tokens, and AI tools for the team.

Situation
Alongside feature work
My role
Planned and ran it all
Partners
VA design system team
Outcome
8 code changes merged
Pull request showing a summary and before-and-after comparison for the zero-dollar employment income alert.

The problem

Our design files were moving to a government-approved Figma, and years of comments and ticket links could have been lost. Our code had also drifted from the design system, and every new feature made that worse.

What I did

Moved our design history safely

I scripted the move of about 1,200 comments from 31 files and fixed about 690 links across 445 tickets. Dry run, small pilot, then the full run. Then I taught another VA team to do it.

Got four apps back on the system

I replaced about 50 hard-coded values with tokens and swapped look-alike links for real components. Along the way I found real bugs, like two colors quietly broken in production.

Built AI tools for the team

My tools capture before-and-after screenshots, fill out our ticket and pull request templates, and annotate prototypes for handoff. Reviews start with work that’s already checked.

Code diff replacing hard-coded CSS values with VA design system tokens.
Token cleanup
Overpayment summary prototype with an annotation panel describing a design decision and showing its code snippet.
Prototype annotations

The result

~1,200 comments saved

Our review history and ticket links made it through the move.

4 apps back on the system

Shared tokens and components, with about 345 lines of dead CSS gone.

A script others can use

The VA design system team now has it for other teams.

What I learned

Setting up how design works is a different job than designing screens. I like doing both.