Scaling Visa’s Design System for public launch

VPDS had grown across multiple disconnected sources. Design documentation lived in 9 different Figma files while developer code examples were hosted across 4 different sites. The result was a system that existed, but had no single home. Designers and developers each had to navigate different tools, files, and sites just to find the guidance they needed.

The first challenge was scale. With dozens of components and guidelines to document, we needed a system that could be authored quickly and consistently, without every page being built from scratch. I helped define a component guideline template. I started by standardizing padding between headers and sections, and establishing a repeatable pattern for do's and don'ts guidance across every component page. This meant any new page could follow the same structure, cutting down on inconsistency and design decisions that had previously been made page-by-page.

Once the template was defined, I partnered with engineering to break each content section into its own reusable component in code, rather than static, one-off pages. I went hands-on in VS Code to help author content directly from Figma into HTML, using Git to manage and ship changes.

Previously, icons lived on a separate, one-off site disconnected from the rest of VPDS. The landing page was a long, text-heavy explainer covering code languages and SVG basics, with the actual interactive lookup buried on a secondary page. Because this is a developer-heavy section of the site, I set up calls with engineers to understand what is actions are important for them to have and any friction they'd experienced with the old site.

I redesigned this experience to live natively within the new public site, making the available actions for each icon — copy HTML, copy SVG, download — immediately clear rather than requiring developers to dig for them. I also introduced multi-select, letting developers batch-select and export multiple icons at once instead of repeating the process one icon at a time.

Before this, VPDS had no illustrative style at all, making it difficult to skim and distinguish components at a glance. I designed a new thumbnail style, using real components as the basis, but abstracted them by stripping out text and replacing it with skeleton-like visuals that hinted at each component's structure without rendering actual content. This gave every page a distinct, at-a-glance identity, making the system easier to scan and navigate across dozens of components and guidelines. This became the visual standard applied across all pages going forward.