Scaling Visa’s design system for a public audience

Guidance, design assets, and implementation resources had developed across documents, Figma files, internal sites, and code libraries. As VPDS expanded, users needed clearer paths between those resources with simplified access points. After rounds of user research, competitive analysis, and in-depth information architecture planning, I worked with cross-functional partners to address key pain points and help turn distributed material into a navigable system.

Turning distributed resources into a simplified experience was a multi-phase project. As we worked to consolidate, simplify, and standardize our resources, the system was still actively expanding.

Before adding new components to the system, we needed our guidance structure to be scalable. After investigating the most useful information for our users, I helped develop a shared content model that brought usage, behavior, content, accessibility, and development guidance into a predictable hierarchy.

Each page tested the structure: could it accommodate the detail this component needed while keeping guidance consistent across the library?

Applying our new content model across 42+ components meant deeply investigating the contents of our system. Ensuring accurate guidance for each element meant examining how it worked across development frameworks. Simple naming differences frequently revealed inconsistencies in component variants, examples, or coded behavior.

Content design quickly became the connective infrastructure between disciplines. By investigating inconsistencies to ensure written guidance was accurate, we drove a significant standardization effort across development libraries, resulting in a more usable, scalable system.

With clearer guidance in place and Figma pages translated into an MVP website, additional research helped us examine whether our proposed navigation matched what people expected to find. Based on additional user research, I helped revisit the distinction between Components, Patterns, and Flows and advocated for reintroducing Patterns with a clearer definition.

For the public launch, guidance needed to support people without Visa’s internal context. I contributed to onboarding pathways and Getting Started guidance across React, Angular, CSS, and Flutter, working with engineering partners to balance a consistent structure with each framework’s implementation requirements.