BRANDEE DUDENHOEFEr
CONTENT DESIGNER | SILLY GOOSE
Building Visa’s design system for people—and AI
How I helped transform an internal resource into a public platform for 32K+ users, with the structured content foundation to power AI.
ROLE
Staff Content Designer
SCOPE
Taxonomy · Information architecture · Design systems · Governance · Accessibility · AI readiness
PLATFORMS
Figma · CSS · React · Angular · Flutter
IMPACT
~2K → 32K+ active users
NPS 63 → 70
40+ components & patterns
4 code libraries
The challenge
Visa had a design system. It didn’t have a destination.
VPDS had grown across Figma and four code libraries, but guidance lived across internal files, repositories, and documentation. Teams could find pieces of the system—but there was no single place to understand how it all fit together.
As Visa prepared to take VPDS public, that fragmentation became a platform problem. We needed to unify design, code, content, and accessibility into an experience that could stand on its own without internal context.
The challenge wasn’t publishing documentation. It was turning an internal system into a scalable, self-service platform.
No strucure for scale.
Fragmented implementations
CSS, React, Angular, and Flutter had evolved independently, creating differences in naming, metadata, behaviors, and documentation.
Components existed across platforms, but without a shared language or structure connecting them.
No shared architecture
Without a common content model or governance framework, every new component introduced opportunities for inconsistency.
The system worked locally, but couldn't scale reliably across teams, platforms, and regions.
No single source of truth
Guidance lived across Figma and internal documentation sites, leaving teams without a single source of truth.
Designers and engineers could find pieces of the system, but lacked a clear entry point connecting design and implementation.
"One of the main challenges is to find a single place that houses all of this stuff that everyone can easily access."
"Don't use these often—where are these guidelines? I would assume it's in the repository where I would expect it to be."
"I find it confusing between the component files and the guidelines. We're about to have an intern and honestly I don't know where to send her."
We didn’t need more documentation. We needed an architecture that could turn many implementations into one system.
Our approach
Content strategy became the connection between design, engineering, and accessibility.
ALIGN
Create a shared language
I led two-week audit sprints across the component library, bringing Content, Design, Engineering, and Accessibility together to compare names, descriptions, states, usage guidance, and accessibility requirements across Figma and code implementations.
Together, we surfaced where content inconsistencies reflected deeper differences in semantics or behavior and aligned on how to resolve them.
STRUCTURE
Turn findings into a scalable model
I led the development of a shared content model for 40+ components and patterns, translating what we learned through the audits into a consistent architecture for VPDS guidance.
We defined what information belonged, where it belonged, how guidance should scale with complexity, and when exceptions were appropriate—creating consistency without forcing every experience into an identical structure.
UNIFY
Build one destination for the system
I led the content strategy for bringing VPDS into a centralized public experience, partnering across disciplines to connect design, code, content, and accessibility guidance.
Together, we restructured navigation and onboarding, standardized terminology, and centralized guidance so designers and developers could find, understand, and implement VPDS without needing prior knowledge of Visa’s internal systems.
Post-launch impact
32K+ active users
Up from 2K
NPS 70
Up from 63
82.6%
Overall satisfaction
40+
Components and patterns
VPDS evolved from fragmented internal guidance into a governed public platform with a shared architecture across design and implementation.
The public launch gave teams a single source of truth, while the underlying content architecture made the system easier to understand, maintain, and extend across products, platforms, and regions.
“One of the most difficult things to do is creating exemplary experiences and doing that consistently across a global, regionally diverse product landscape. Visa’s design system helps us do both.”
Robb Nielsen, Visa head of Global Design
AI-ready
The structure built for humans was already built for machines.
We designed the content architecture to extend beyond the website, using predictable hierarchy, shared terminology, and standardized structure to make VPDS guidance portable and machine-readable.
As AI became part of the product ecosystem, that foundation translated cleanly into Markdown and enabled engineering to expose VPDS through MCP—turning the same source of truth used by designers and developers into structured knowledge for AI-powered experiences.
