Marketing Design System

Problem

TIAA’s marketing pages were built without a shared system. Colors, spacing, and patterns varied across business lines, breakpoints were inconsistent, and contributors in Adobe Experience Manager had no templates to work from. Designers rebuilt full pages by hand, development dealt with constant rework, and accessibility and quality varied page to page. Marketing had no atomic foundations, no governance, and no scalable way to maintain consistency across TIAA.org.

Problem

TIAA’s marketing pages were built without a shared system. Colors, spacing, and patterns varied across business lines, breakpoints were inconsistent, and contributors in Adobe Experience Manager had no templates to work from. Designers rebuilt full pages by hand, development dealt with constant rework, and accessibility and quality varied page to page. Marketing had no atomic foundations, no governance, and no scalable way to maintain consistency across TIAA.org.

Problem

TIAA’s marketing pages were built without a shared system. Colors, spacing, and patterns varied across business lines, breakpoints were inconsistent, and contributors in Adobe Experience Manager had no templates to work from. Designers rebuilt full pages by hand, development dealt with constant rework, and accessibility and quality varied page to page. Marketing had no atomic foundations, no governance, and no scalable way to maintain consistency across TIAA.org.

Outcome

A unified Marketing Design System that replaced fragmented workflows with reusable templates, atomic foundations, and governed patterns. The system accelerated production, reduced rework, and delivered clear performance gains across TIAA.org.

Increase in enrollment starts.

80%

Faster design-to-dev delivery.

30%

Boost in SEO visibility.

76%

Outcome

A unified Marketing Design System that replaced fragmented workflows with reusable templates, atomic foundations, and governed patterns. The system accelerated production, reduced rework, and delivered clear performance gains across TIAA.org.

Increase in enrollment starts.

80%

Faster design-to-dev delivery.

30%

Boost in SEO visibility.

76%

Outcome

A unified Marketing Design System that replaced fragmented workflows with reusable templates, atomic foundations, and governed patterns. The system accelerated production, reduced rework, and delivered clear performance gains across TIAA.org.

Increase in enrollment starts.

80%

Faster design-to-dev delivery.

30%

Boost in SEO visibility.

76%

What we built

We created a scalable Marketing Design System using an atomic approach to unify color, spacing, typography, and layout across all marketing experiences. Seventy five reusable patterns became the building blocks for every page, each with dedicated breakpoints and responsive behavior.

We delivered a default system library, flexible page templates, and structured documentation that made it possible for contributors to assemble aligned pages in minutes. Clear governance and usage rules kept patterns consistent as adoption grew.

What we built

We created a scalable Marketing Design System using an atomic approach to unify color, spacing, typography, and layout across all marketing experiences. Seventy five reusable patterns became the building blocks for every page, each with dedicated breakpoints and responsive behavior.

We delivered a default system library, flexible page templates, and structured documentation that made it possible for contributors to assemble aligned pages in minutes. Clear governance and usage rules kept patterns consistent as adoption grew.

What we built

We created a scalable Marketing Design System using an atomic approach to unify color, spacing, typography, and layout across all marketing experiences. Seventy five reusable patterns became the building blocks for every page, each with dedicated breakpoints and responsive behavior.

We delivered a default system library, flexible page templates, and structured documentation that made it possible for contributors to assemble aligned pages in minutes. Clear governance and usage rules kept patterns consistent as adoption grew.

How we built it

We audited existing pages to identify inconsistencies, duplicated components, and conflicting styles. This informed the atomic foundations that brought multiple marketing systems into one unified structure.

I partnered with brand and design teams on palette alignment while refining spacing, grids, and token usage. With engineering, I ensured patterns mapped directly to AEM and documented every behavior and rule so development and QA had reliable guidance.
Governance included weekly reviews, a shared checklist, and enforced use of approved patterns. Templates removed the need for annotation and cut design and QA time significantly.

How we built it

We audited existing pages to identify inconsistencies, duplicated components, and conflicting styles. This informed the atomic foundations that brought multiple marketing systems into one unified structure.

I partnered with brand and design teams on palette alignment while refining spacing, grids, and token usage. With engineering, I ensured patterns mapped directly to AEM and documented every behavior and rule so development and QA had reliable guidance.
Governance included weekly reviews, a shared checklist, and enforced use of approved patterns. Templates removed the need for annotation and cut design and QA time significantly.

How we built it

We audited existing pages to identify inconsistencies, duplicated components, and conflicting styles. This informed the atomic foundations that brought multiple marketing systems into one unified structure.

I partnered with brand and design teams on palette alignment while refining spacing, grids, and token usage. With engineering, I ensured patterns mapped directly to AEM and documented every behavior and rule so development and QA had reliable guidance.
Governance included weekly reviews, a shared checklist, and enforced use of approved patterns. Templates removed the need for annotation and cut design and QA time significantly.

What I learned

Atomic systems work when they are simple enough to use and flexible enough to scale. Templates reduced guesswork and made design significantly faster.
Holding the system together required clear boundaries and the willingness to push back when teams attempted one off solutions. The strongest proof of success was when more than five hundred pages were created using system patterns, which showed that the Marketing Design System had fundamentally changed how TIAA built and maintained its marketing experiences.

What I learned

Atomic systems work when they are simple enough to use and flexible enough to scale. Templates reduced guesswork and made design significantly faster.
Holding the system together required clear boundaries and the willingness to push back when teams attempted one off solutions. The strongest proof of success was when more than five hundred pages were created using system patterns, which showed that the Marketing Design System had fundamentally changed how TIAA built and maintained its marketing experiences.

What I learned

Atomic systems work when they are simple enough to use and flexible enough to scale. Templates reduced guesswork and made design significantly faster.
Holding the system together required clear boundaries and the willingness to push back when teams attempted one off solutions. The strongest proof of success was when more than five hundred pages were created using system patterns, which showed that the Marketing Design System had fundamentally changed how TIAA built and maintained its marketing experiences.