BRANDEE DUDENHOEFEr
CONTENT DESIGNER | SILLY GOOSE
From scattered guidance to an MCP-ready system that scales.
The Visa Design System began as fragmented guidance across files, tools, and teams. Over three years, it was re-architected into a governed, developer-focused platform used by more than 32,000 people globally—and structured so its content could be consumed not just by humans, but by machines.
Overview
Building a scalable, accessible system for a global platform
When we began modernizing the Visa Product Design System, the challenge wasn’t a lack of components—it was the lack of a shared structure to support them.
​
Design and engineering had evolved in parallel. Designers worked in Figma, while engineers maintained separate implementations across CSS, React, Angular, and Flutter. Each stream produced usable outputs, but they weren’t connected.
​
On the surface, the workflow made sense: design lived in Figma, code lived in repositories. In reality, each platform evolved independently:
-
Components existed in multiple places, with different names and behaviors
-
Design examples and code examples were disconnected
-
Guidance varied by platform, author, and moment in time
-
There was no consistent way to explain when, why, or how to use a component
​
As principal content designer across the Visa Design System, my role was to lead a content-driven effort to align design, engineering, and accessibility—shaping the system’s structure, governance, and readiness for scale.
Key challenges
Where structure broke down as the system grew
A system without a system
Multiple libraries (CSS, React, Angular, Flutter) evolved with different naming conventions, labels, metadata, and documentation approaches. Components existed across platforms, but without a shared content model, semantics, or structure to unify them.
​A system without scale
Without a unified content design system, governance, or repeatable templates, every new component increased inconsistency and maintenance cost. The system worked locally, but it couldn’t grow reliably across teams, platforms, or regions.
A system without a home
Guidance lived across internal Figma, Sketch, and internal code repos, leaving teams without a single, trusted source of truth. Designers and engineers could find pieces of the system—but not a clear entry point or authoritative reference.
"One of the main challenges is to find a singe 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."
These weren't edge cases, they were symptoms of a system without a shared content strategy.
Our approach
Using a unified content strategy as the backbone
We approached the work in deliberate stages, with content strategy guiding how design, engineering, and accessibility came together as a single system.
Impact
From internal tool to globally adopted system
By the time the system launched publicly, it had evolved from scattered internal guidance into a governed platform teams could rely on. Adoption expanded from roughly 2,020 internal users to more than 32,000 global active users, driven by a clearer information architecture, consistent documentation, and a single source of truth for design and development.
The result wasn’t just broader usage—it was stronger alignment. Designers and engineers could finally reference the same guidance, use components consistently, and build with confidence 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
Future-ready
Structured for scale—and for AI consumption
Because the system was built on consistent content models, shared language, and standardized metadata, it was inherently ready for what came next. The guidance could be exposed through an MCP server with minimal rework, making it consumable by AI tools, internal assistants, and future developer experiences without restructuring the content itself.
​
What began as a content-led effort to create clarity became durable infrastructure—designed for humans first, but structured so machines could understand and extend it as the ecosystem continues to evolve.