#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 conducting research, designing components and their user experiences, running user testing and Q.A. sessions, and producing the final deliverables of the design of the component build (desktop and mobile) with guidelines and documentation.
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 some of the first UI/UX components for the new design system to be used and incorporated throughout all product lines at Visa
- Create documentation and guidelines for the components with best-practices and web standards as well as guidance around relevant Visa product experiences and features
- Develop new standards and processes to standardized the VPDS design workflow 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 other Visa teams and partners regularly in designing, documenting and finalizing the component design and guidelines
- Fostering community engagment with Visa employees and maintaining communication channels for feedback loops
(click image to learn more)
(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 or updates
- 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 from the legacy systems and rebrand system that are key assets that need to be studied to help achieve a completely unified Visa design system for all its product lines
1) Designing my assigned components and guidelines so that they follow best practices as well as VPDS design standards
2) Incorporating documentation on Visa specific functionalities and experiences within relevant component guidelines
3) Collaborating with dev and other cross-functional teams to develop QA testing process on components and work sessions to edit guidelines
4) Work with other teams to create a feedback loop and communication
(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
