Marketing Design System
Who was this for?
Before building anything I needed to understand who the system was actually for.
Designers were reinventing structure every page. No shared patterns meant every project started from zero. Developers were getting handoffs that left too much open to interpretation -- states missing, behavior undocumented, questions that slowed everything down. Stakeholders had no confidence the brand would hold as the site scaled.
Defining the problem
Before building anything I needed to understand who the system was actually for. Designers needed flexible patterns they could move fast with. Developers needed predictable states and behaviors. Stakeholders needed confidence the brand would hold at scale.
How I built it
I worked atomic from the start. Atoms into molecules into organisms into templates into pages. Every decision at the token level so changes propagated instead of cascaded into manual updates. Everything built in Figma variables mapped directly to TIAA's Ethos atomic system so design and engineering were speaking the same language from day one.
Seventy-five patterns across five breakpoints and four brand palettes. Each one built for AEM's authoring model from the ground up, not retrofitted. Authors could only make decisions that made sense. Consistency stopped being something you enforced and started being something that just happened.
Annotations got us halfway there
Our first instinct was to document every pattern, every state, every behavior. It bridged the gap between design and engineering early on and gave contributors something to follow.
But as the system grew annotations fell out of sync. Design debt crept in quietly. Every new pattern became another thing to maintain by hand.
What we landed on
So Miraj and I shifted. Instead of annotating everything after the fact we built a template system that had the rules baked in from the start. Full page designs for every page type TIAA needed to produce at scale. Governed starting points that made the right decision the obvious one.
Before: custom design, review, interpretation, launch. Slow, inconsistent, designer-dependent.
After: pick a template, populate it, ship.
Junior designers and contributors could assemble pages confidently without a separate document telling them how. The system did the work instead of the annotations. When I left it was being set up for AI-based authoring. The structure was already there.
What shipped
0%
0%
more page launches.
0%
0%
growth in advice sessions.
0%
0%
drop in bounce rate.
0%
0%
faster page design.
Client
TIAA
Scope
UX/UI Design, System Design
Contributers
Darrin Amellio, Eric Shoemaker, Miraj Mehta
Duration
2023-2024
Scaling a century-old brand across enterprise marketing
TIAA was mid-rebrand. Eighteen fragmented design systems meant design, engineering, and content were all working from a different version of reality. No tokens. No breakpoints. No authoring logic for the CMS.
Teams couldn't ship consistently. Nobody was aligned. My director pulled me aside and said he needed me to fix it.
So I rebuilt the whole thing from scratch.
Marketing Design System
Marketing Design System
Client
TIAA
My role
UX/UI Design, System Design
Contributers
Darrin Amellio, Eric Shoemaker, Miraj Mehta
Duration
2023-2024
Scaling a century-old brand across enterprise marketing
TIAA was mid-rebrand. Eighteen fragmented design systems meant design, engineering, and content were all working from a different version of reality. No tokens. No breakpoints. No authoring logic for the CMS.
Teams couldn't ship consistently. Nobody was aligned. My director pulled me aside and said he needed me to fix it.
So I rebuilt the whole thing from scratch.
Who was this for?
Before building anything I needed to understand who the system was actually for.
Designers were reinventing structure every page. No shared patterns meant every project started from zero. Developers were getting handoffs that left too much open to interpretation -- states missing, behavior undocumented, questions that slowed everything down. Stakeholders had no confidence the brand would hold as the site scaled.
Defining the problem
I audited the existing pages and found the same problems everywhere. No reusable structure. Inconsistent hierarchy. Bespoke components that made every update its own project.
That audit became the blueprint.
How I built it
I worked atomic from the start. Atoms into molecules into organisms into templates into pages. Every decision at the token level so changes propagated instead of cascaded into manual updates. Everything built in Figma variables mapped directly to TIAA's Ethos atomic system so design and engineering were speaking the same language from day one.
Seventy-five patterns across five breakpoints and four brand palettes. Each one built for AEM's authoring model from the ground up, not retrofitted. Authors could only make decisions that made sense. Consistency stopped being something you enforced and started being something that just happened.
Annotations got us halfway there
Our first instinct was to document every pattern, every state, every behavior. It bridged the gap between design and engineering early on and gave contributors something to follow.
But as the system grew annotations fell out of sync. Design debt crept in quietly. Every new pattern became another thing to maintain by hand.
What we landed on
So Miraj and I shifted. Instead of annotating everything after the fact we built a template system that had the rules baked in from the start. Full page designs for every page type TIAA needed to produce at scale. Governed starting points that made the right decision the obvious one.
Before: custom design, review, interpretation, launch. Slow, inconsistent, designer-dependent.
After: pick a template, populate it, ship.
Junior designers and contributors could assemble pages confidently without a separate document telling them how. The system did the work instead of the annotations. When I left it was being set up for AI-based authoring. The structure was already there.
Tokens and patterns as architecture
I audited the existing pages and found the same problems everywhere. No reusable structure. Inconsistent hierarchy. Bespoke components that made every update its own project.
That audit became the blueprint.
What shipped
0%
0%
more page launches.
0%
0%
more page launches.
0%
0%
growth in advice sessions.
0%
0%
growth in advice sessions.
0%
0%
drop in bounce rate.
0%
0%
drop in bounce rate.
0%
0%
faster page design.
0%
0%
faster page design.