#ux/ui.designer{
position: adaptive;
float: right;}
float: right;}
Visa Product Design System (VPDS) is Visa's global design language developed to support the needs of its digital product lines and to unify the visual and experiential assets across all teams and projects at Visa.
This new focus on developing a more comprehensive system aims to streamline the design process, enhance collaboration, and ensure a consistent, user-friendly experience across all of Visa's digital products.
To construct and support this system, I was responsible for designing components and creating their documentational guidelines (mobile and desktop) as well as developing and leading the VPDS testing and Q.A. process for design.
Staff Designer
• 3 Designers
• 2 Content Strategist
• 1 Accessibility Lead
• 3 Development Teams
For years, Visa has struggled to maintain a cohesive design language with its product and services, an issue that has caused misalignment with teams as well as repeat work. So with the new brand redesign launch at the 2021 Summer Olympics, Visa established a new design team to build, maintain, and expand the official Visa design system in coordination with this rebrand effort.
This new focus on developing a more comprehensive and unified system aims to streamline the design process, enhance collaboration, and ensure a consistent, user-friendly experience across all digital products.
- Design and develop UI/UX components for the new design system to be product-ready and incorporated throughout all product lines at Visa
- Create documentation and guidelines for the components with best-practices, component specifications and web standards as well as guidance around relevant Visa product experiences and features
- Develop new standards and processes for the VPDS testing process and to incorporate more community engagement into the development of VPDS
- Designing the components to be flexible and adaptable enough to work in both generic and Visa product use cases
- Collaborating with VPDS cross-functional teams to develop a Q.A. process that also takes into consideration their feedback to ensure the components can be for even non-design teams at Visa
- Fostering community engagment with Visa employees and maintaining communication channels for feedback loops
Using the new rebrand assets as a starting point, I worked with my design and dev teams to reformat many of these assets for digital use and to develop the foundation of Visa Product Design System.
(click image to learn more)
While developing the VPDS foundation with my team, I also started researching design articles, UX studies and other design systems to ensure I was up-to-date on the best practices and insdustry standard when designing my components and other parts of VPDS.
(click image to learn more)
Another aspect of my research process was studying the issues within current Visa components and product lines, and looking for ways these problem can inform and improve the overall comprehensiveness of VPDS.
(click images to learn more)
- While there are some excellent studies and best-practice online resources to be utilized, many public viewable systems proved only to be a good starting framework for a system due to little to no community feedback/interaction after release
- A number of Visa products related to my components showcased a need to have more direct guidance and standards around Visa specific experiences as well as genenric interactions
- There were many elements of rebrand system as well legacy Visa design work that are key assets that need to be studied and incorporated into VPDS to help achieve a completely unified Visa design system for all its product lines
1) Designing my selected components and guidelines so that they follow best practices as well as VPDS design standards
2) Creating documentation on Visa specific functionalities and experiences within relevant component guidelines
3) Collaborating with dev and other cross-functional teams to develop the VPDS QA testing process on components and work sessions to edit guidelines
4) Work with other teams to develop a open space for users to communicate issues or ask questions
(click image to learn more)
(click image to learn more)
(click images to learn more)
- Some of the Visa's product experiences and features have to be simplified in documentation to ensure they can be reusable in other products
- QA found that some of the components needed modifications to support specific dev needs so as to keep the design system and the development teams' code bases aligned
1) Making corrections and finalizing components and guidelines for launch
2)Running the VPDS office hours to conduct feedback loop to gain user insight on component usage and additional improvements for future releases
