In a bid to improve the product design and development process, Visa Inc. today announced the public release of its Visa Product Design System, a platform aimed at helping developers build secure and accessible payment experiences more efficiently.

Visa initially launched the platform internally in 2018 to allow its product teams to build payment processes and products using predefined designs and workflows.

Today’s release follows as many developers find themselves in need of ready-to-use tools to simplify workflows for payment experiences while ensuring accessibility and security, Visa said. The company has already addressed these issues for decades and its platform allows developers to get started without reinventing the wheel, building on existing best practices.

“Product teams that deliver these experiences need resources that simplify workflows to ensure consistency and reusability from concept to code,” the company wrote in the announcement. “With new regional accessibility regulations emerging globally, it’s crucial for product and technical teams to stay ahead with adaptable, smart tools that meet evolving standards.”

There’s an 82% chance that any given American owns a credit card and a relatively high chance they have used a credit card app or website, according to a report from Motley Fool Money. Although the total numbers are difficult to come by, there are around 1.3 billion Visa credit cards in circulation, and the company accounts for 37% of all cards in circulation and almost 32% of the total payment volume.

Internally, Visa used VPDS to design key experiences it launched over the years, including Visa Flexible Credential, Visa Payment Passkey and Visa Protect. According to the company, implementing the platform reduced design time by 20% and development time by an estimated 25%.

The platform provides access to detailed guidelines, design libraries, best practices, accessibility standards and documentation designed to enable teams to get started quickly with user-centered experiences. The libraries themselves are made up of accessibility-tested components that can be pulled out by developers and plugged together for either web or mobile apps.

The company also said it provides what it calls “design tokens,” which it harkened to as “the DNA of design.” These building blocks store design decisions – such as colors, typography and spacing – in a reusable format. The tokens can be imported into the popular user interface prototyping tool Figma to adjust visual properties.

“VPDS streamlines developer’s workflows by reducing duplication and ensuring that coded implementations align seamlessly with design specifications,” the company said. “This alignment minimizes rework and accelerates the development process.”

The platform includes support for popular web and mobile development frameworks including Angular, Flutter, React and HTML/CSS styles. Visa added that the platform’s codebases are documented and will continue to be updated to support each of these frameworks to keep development teams up to date.

With the public release of VPDS, Visa said the platform’s standards, framework, and unification will make it easier for current and future partners, including established fintechs, emerging startups and banks, to build on the same standardized tools. This, in turn, will foster greater collaboration across the developer ecosystem and support the creation of scalable, secure payment experiences that seamlessly interact with merchants and customers.

Image: Visa