TIAA (Teachers Insurance & Annuity Association)

Designing for scale and consistency

I led the creation of TIAA's Marketing Design System as part of an enterprise rebrand, unifying how accessible digital experiences were designed, built, and scaled across the organization. My role spanned experience design, UX strategy and creative leadership.

experience-patterns-2

Starting with Home & About.

Home and About were the starting points — the highest-traffic, highest-impact pages to launch first. What began as two pages evolved into a set of reusable components that would shape the Marketing Design System. These supported marketing web and extended across lines of business, bringing greater consistency and scale.

As part of my role, I established the foundation for how the team would work: setting up Figma environments, processes, and ways of working. Communication channels and collaborative workflows were built so the team could move efficiently and adapt as challenges emerged.

Client:  Retirement & investment solutions provider to 5M+ participants across education, healthcare, and nonprofit.

Contribution:  Digital Design Director, UX Strategy & System Designer

Team: 5 - UX, Design, Content
Darrin Amellio, Jeremy Bell
Eric Shoemaker and others

Timeline:  Aug 2023 – Jun 2025

 

Home-About-framed-3

Design was only half the work. Everything had to work in AEM (Adobe Experience Manager - CMS) with build and authoring constraints. Sometimes that meant making trade-offs: adapting patterns to fit how they'd be built and maintained, defining hierarchy, aspect ratios, and responsive behavior to ensure consistency from design through implementation.

We also had to be mindful of complexity. More pattern variants might give designers flexibility, but these options created challenges for authors trying to build pages quickly in AEM.

We used design tokens to control color, typography, spacing, and states. That way, when something changed, it updated across the system instead.

Patterns-designed-4c

 

The TIAA Marketing Design System is the digital expression of TIAA Brand. A collection of 75+ reusable components, patterns, and variants, guided by clear standards, that can be assembled to build any number of web experiences across the org’s lines of business.

compoent-library-4

Budgeting for what's next

Building the system sometimes meant making hard choices about what to build and when. Every component represented real budget, and I helped prioritize the strongest use-cases and potential for repeated use.

Even a "simple" button could cost thousands as it moved through design, development, QA, accessibility review, and AEM implementation. This process shaped decisions about where to focus design energy, what to build first, what to delay, and sometimes, what not to build at all.

TIAA-components

Creating efficiency

I'm a systems thinker and often apply this approach throughout my design process. By defining guidelines and standardized page templates (Product & Offer, Informational, and Marketing), we established the foundation for consistency and velocity.

page-templates-2

These templates were integrated directly into the CMS, allowing legacy content to migrate into the new visual language faster and with less friction. They also left room for new variations to emerge based on validated use cases.

For teams, templates reduced time to publish and shifted focus to content strategy. They delivered visual cohesion across lines of business and streamlined the transition from legacy pages to rebrand.

For users, consistency builds familiarity. Clear structure and repeatable patterns make content types easier to identify and navigate with confidence.

page-template-types-6

Design guardrails

I invested time upfront to create design and experience guidelines that defined layout, hierarchy, spacing, and pattern usage.

Without clear guidelines, inconsistency creeps in and pages drift, patterns get reinterpreted, and the experience can fragment.

These guardrails maintained consistency while giving designers enough room to push design solutions. The investment, (which had leadership buy-in for early), kept the experience cohesive across lines of business and gave the design language greater longevity.

tiaa-style-guide

Building a source of truth

Documentation isn't exciting work, but it's what makes a system actually scale. I helped define and write documentation that became the shared source of truth across design, development, and product. It reduced back-and-forth, sped up handoffs, and helped teams design and build more consistently.

Each component documented structure, behavior, responsive rules, interactions, and content constraints. It didn't eliminate all questions or assumptions — nothing does — but it gave teams a reliable reference point to work from.

expanding-panel-documentation
Standard-hero-Component-2
stacked-component-2
50-50 copy

Designing for everyone

How customers experience and interact with TIAA matters. I worked closely with TIAA's Accessibility team to make sure patterns met contrast and focus requirements from the start, drawing on accessibility training and WCAG AA standards.

I also collaborated with content writers and the design team to ensure the language and experiences we created were inclusive and clear for diverse audiences, which makes complex financial information more approachable regardless of background or familiarity.

By building these considerations into templates, components, and tokens, teams could move faster knowing experiences would be usable and compliant across devices and audiences. The .org site achieved a 96% WCAG AA compliance rating.

color-visions-2

The Chapter navigation was designed to rely on structure and typographic hierarchy, instead of color dependent, ensuring it remained clear across vision modes as an effective wayfinding tool.

Working smarter with AI

As AI improved, we started using it where it made sense. It helped synthesize competitive research, surface themes in user feedback, and keep documentation and naming consistent across teams.

AI also handled routine tasks; meeting notes, critique prep, and status summaries that freed up more time to focus on challenges and refine our approach.

At the same time, design and engineering began exploring how AI might fit into our workflows. The AI integration and tools were still evolving, but we tested early connections between AEM and Figma through MCP (Model Context Protocol), exploring how the component library could connect more directly to the build process and support more consistent experiences.

Reflection

For about two years, I worked with an incredibly talented design team and cross-functional partners to help establish the foundation for TIAA’s digital experience and design system. I helped shape the patterns, structure, and experience principles that defined how the brand shows up across digital channels.

The work helped guide the org through a major rebrand, legacy migrations, and ongoing marketing initiatives. It created a system teams could rely on as the digital ecosystem continued to evolve.

Looking back, I’m proud of the impact we made together. It balanced craft, strategy, and execution at enterprise scale.

Outcomes

180%

96%

67%

75+

Increase: Monthly page launches

WCAG AA Compliance rating

Decrease: Design > Dev hand-off errors

Components & variants created

Selected Works

Digital RebrandExperience Design and Strategy

VZ +playUI, UX, Digital Strategy

Past ProjectsUI, UX, Digital Strategy

Conversational DesignProject type

Select ProjectsProject type