Rebuilding a 15-year-old design ecosystem without freezing the squads who depend on it
The cost of no source of truth
When there's no single source of truth, everything slows down. At AOL, components were scattered across files, UI elements were inconsistently named, and the design system in Figma didn't match what engineers were actually building in Storybook. The two versions of "truth" drifted apart a little more every sprint.
For anyone new to the team, getting up to speed was genuinely painful. There was no reliable place to look things up — and no guarantee that what you did find was current. You'd grab a component, only to learn later it had been quietly superseded somewhere else, by someone you'd never talked to.
That gap between design and code was a quiet tax. It got paid in inconsistency, in duplicated work, in the time it took every new hire to figure out what was real.
My role across squads
I was the lead designer for the community and monetization squads, working alongside two PMs, three engineers, and four other lead designers from across the org. My focus was keeping the look and feel consistent across community and monetization as we both contributed to and consumed the shared system.
That meant staying in constant communication with the other leads — understanding what each of them needed from the system, and advocating for patterns that worked for my area without fragmenting the whole. The hard part was never the components themselves. It was the alignment: making a decision that was right for community and still right for everyone else pulling from the same library.
I was also deep in the audit process — identifying redundant components, flagging misalignments between Figma and Storybook, and proposing cleaner alternatives.
The one constraint every squad was working against: a legacy codebase.
I couldn't design as if we were starting from scratch — we weren't. Every decision had to balance the ideal direction with what was actually shippable on top of fifteen years of accumulated code.
So I treated "shippable" as a design input, not a compromise made after the fact. When I proposed a cleaner alternative, I proposed it next to what it would take engineering to get there — which made it far easier for the other leads and the devs to say yes.
Two tracks at once
The effort ran on two tracks simultaneously: cleaning up what already existed, and imagining what came next. Neither could wait for the other.
Cleanup
Merged redundant components, established clearer naming conventions, and worked toward a single source of truth that both designers and engineers could trust. The goal was to close the gap between Figma and Storybook so the system you looked up was the system that shipped.
What's next
Brainstorming a future direction for branding and product layout — a foundation that could scale as the product evolved. Not just fixing today's inconsistencies, but giving the system room to grow without drifting back into the same fragmentation.
Holding both at once is the part that's easy to underestimate. Cleanup keeps the present honest; the forward track keeps you from rebuilding a system that's already out of date the day it's done.
The consistency we built
The proof isn't a diagram — it's the screens. Here's the look and feel staying consistent across surfaces that used to each do their own thing.
And underneath all of that consistency: the system had to be findable. A source of truth only counts if people can actually navigate to the truth.
What changed
This was a year-long, ongoing initiative — not a project with a hard deadline or a single metric we were racing toward. There was no launch day. The work was the system, and the system kept moving.
The goal was scalability: a place where finding a component takes seconds, not a search through five files. Over time, the shared language between design and engineering got tighter — what lived in Figma started matching what lived in Storybook, and the two stopped drifting apart.
And the quiet tax got cheaper. The cost of onboarding a new designer went down, because for the first time there was a reliable place to look things up and a real chance that what you found was current.
What I'd do differently
- Tokenize before you inventory the visuals. We catalogued components first and derived tokens after. Starting from a semantic token layer would have made the audit faster and the deprecation safer.
- Treat adoption as a product, not a handoff. 70% adoption was good — the last 30% were squads with their own deadlines. A lightweight migration codemod and office hours would have closed that gap faster than documentation alone.
- Bring accessibility verdicts into the design tool, not the review. Contrast pairs shipped with a WCAG verdict, but designers still found out at review time. Surfacing the verdict inside Figma would have moved the catch earlier.
"Kayla truly excels at cross-functional leadership, acting as a vital bridge between design, engineering, and product squads to ensure seamless alignment."