(04) — Case Study · Visa
Visa Product Design System
The component infrastructure behind design.visa.com — unified across four frameworks.
VisitRole
Design Engineer
Company
Visa
Timeline
2021 – 2025
Focus
Design Systems · React · Angular · Flutter · Astro · Accessibility
4
framework libraries unified
100%
of component pages powered
1
public design-system launch
Overview
VPDS is Visa's product design system — the components, patterns, and guidelines behind Visa product interfaces, published publicly at design.visa.com. I worked across the system for over three years: helping take the libraries public, building the code-integration infrastructure that powers every component page on the site, and hardening the component libraries themselves.
Gallery
Challenge
A design-system site that documents four parallel libraries — React, Angular, Flutter, and CSS — needs every component page to show live, framework-specific code examples that stay deep-linkable and shareable. State (selected framework, variant, code panel) lives in three places at once: the URL, the session, and the client.
Approach
I led a unified code-integration system across the four libraries with a priority-based multi-layer state sync — URL over session over client — so deep links, persistence, and shareability never conflict. It powers every component page on design.visa.com.
Beyond the site: built the icons page with Astro, React, and Nano Stores for fast icon search and usage; designed a shared interaction service layer for the Angular library, replacing per-component logic with a single source of truth; and extended the Flutter library with enterprise interaction patterns like nested and indeterminate states.
Outcome
VPDS launched publicly with its component documentation fully powered by the integration system. The work carried accessibility and performance improvements across the libraries — and the design-system foundation became the base for my later platform work, from Blitz Code to event demo systems.