Timeline
January 2024
January 2024
Team
Design: Sara Choi
Developer and team lead: Nicole Berreth
Developer: Orion Qin
Developer: Luke Miller
Design: Sara Choi
Developer and team lead: Nicole Berreth
Developer: Orion Qin
Developer: Luke Miller
Role
UX designer, content designer
UX designer, content designer
Platform
Figma
Figma
Background
Over the last couple of years, the Visa Product Design System (VPDS) team has been constructing and refining a robust repository of digital components, foundations, and guidance to set standards and create cohesive branded product experiences across the company.
Visa Product Design System (VPDS) code libraries
Built by Design @ Visa, VPDS is an enterprise-level ecosystem that bootstraps designing and building front-end applications for developers. This internal system currently supports the following code libraries:
• HTML/CSS
• Angular
• React
• Flutter
• Angular
• React
• Flutter
Problem space
As our system grew in scale and maturity, so did demand for support, largely from development teams across the business that frequently need design and front-end guidance. Because the VPDS team is smaller and our resources are large, it takes time for developers requesting help to get the answers they need.
Create, grow, guide
In the 2024 Global AI Hackathon, our team explored applications of artificial intelligence in enhancing operational processes and increasing productivity throughout the organization, starting with the design system.
In our analysis of the activity of developers on the Visa Product Design System (VPDS) team, we considered its:
Extensive reach
The VPDS developer universe covers four programming languages for each of the 30+ components in Nova.
Support communications
VPDS developers spend 10-18 hours a week on support communications. 75% of their sessions are 1:1 with other developers requesting help.
Human capital
The VPDS developer team consists of 11 people supporting 5+ design system versions. The team resides in the North America region and supports global Visa teams across the company.
Project proposal
Naturally, our proposed solution came in the form of a chatbot. The VPDS Virtual Assistant functions as a librarian available at any time to help visitors navigate the Visa Product Design System knowledge universe.
Trained on the internal architecture of components and their documented examples in the VPDS Nova libraries, the coded version of the VPDS Virtual Assistant helps users navigate the VPDS developer universe and alleviates the workload of the VPDS core developer team. It functions as a widget that can be integrated into all our sites.
Anatomy
A bit ironically, I created some work for our developer team in creating our hack meant to eventually reduce their workload. As AI-powered components and flows would be new introductions to the design system, this was our opportunity to kickstart design considerations for product teams across the company.
For a design component like this, I separated the necessary elements of the static chatbot shell from the dynamic generated content. Review a breakdown of the chatbot anatomy below.
Closed and loading session
The VPDS Virtual Assistant starts in the closed state (left) and automatically loads the bot greeting in the empty state (right).
A. Icon button (required): Button provides mechanism for invoking the chatbot from its closed state.
B. Title (optional): Name of the chatbot follows Visa’s descriptive naming structure for products.
C. Close and minimize buttons (required): Buttons for enabling the user to temporarily minimize the chatbot or officially end their chat session.
D. Start timestamp (required): Inline text confirms the chat session has started.
E. Loading animation (required): Visual indication to user signals an event is in progress and provides assurance the chatbot isn’t frozen.
F. Content area (required): Space between the chatbot header and prompt input area displays prompts entered by the user and responses generated by the bot.
G. Multiline input component (required): User types or copies and pastes a prompt into this text area.
H. Submit button (required): User sends their prompt to the bot by pressing the submit button.
I. Elevation shadow (optional): Visual distinction helps the user identify the chatbot layer from surface content.
Active session
The VPDS Virtual Assistant generates responses in an active session with a user.
J. AI response frame (required): Block of content pertaining to the bot is shown in blue.
K. Avatar (optional): Avatar for the bot uses the initials variant of the component. Avatar for the user can use the image or initials variant.
L. AI-generated response (required): Text response generated by the bot can reflow to multiple lines.
M. Response buttons (required): Copy and thumbs up/ down icons appear at the end of each AI-generated response for the user to copy it and provide feedback on the answer quality.
N. User response frame (required): Block of content pertaining to the user is shown in white.
O. Tabs (optional): Tabs allow the user to toggle between code generated with different syntax extensions (in this example: TypeScript and JavaScript XML).
P. Code snippet frame (optional): Code generated by the bot appears below its text response.
Q. Code snippet copy button (required): Copy button allows user to copy only the code frame content.
R. Vertical scrollbar (optional): Code in the code snippet frame scrolls vertically only. Scrolling side-to-side is difficult for the user when horizontal space is limited.
Ended session
The VPDS Virtual Assistant displays a dialog message when a user ends the session.
S. Scrim (required): Temporary surface layer darkens screen content to bring attention to dialog (T).
T. Dialog (optional): Pop-up message requires user to confirm their decision to end the session.
U. End timestamp (required): Inline text displays record of user’s decision and confirms the chat session has ended.
V. Closing directions (required): Inline text instructions appear after the end time timestamp to provide the user with next steps.
Minimized session
The VPDS Virtual Assistant collapses to the minimized state when closed.
W. Frame (required): Icon button elongates to the same width as the expanded chatbot.
X. Expand button (required): Chevron icon faces the direction of movement.
Walkthrough
Developers invoke the chatbot by pressing the icon button, triggering the main chatbot frame to pop up and display a greeting. They can then type in a prompt, with difficulty levels ranging from a simple question such as which version of a development platform VPDS currently supports to a more complex request like asking the bot to provide sample code for a content card using Nova components.
Walkthrough video of the VPDS Virtual Assistant in action
The code interface mirrors the same styling as seen in the Nova code libraries to match the mental models of developers, intending to make their interactions with the VPDS Virtual Assistant feel natural and intuitive. Users can copy generated responses into their own workflows to review and test the information using the copy button as well as provide feedback on the quality of the answer with the thumbs up and thumbs down icon buttons.
Impact
The capabilities of the VPDS Virtual Assistant transcend humans' physical limitations and bring product teams this much closer to unlocking the full potential of AI for human-AI co-creation.
Reduced wait times
The autonomous, digital nature of the VPDS Virtual Assistant makes it capable of serving multiple users at a time.
The autonomous, digital nature of the VPDS Virtual Assistant makes it capable of serving multiple users at a time.
Comprehensive and convenient access
Its vast knowledge base of the VPDS universe streamlines users’ resource search and reduces friction.
Its vast knowledge base of the VPDS universe streamlines users’ resource search and reduces friction.
Rippling benefits
VPDS developers can address other critical or high priority projects, decreasing time to market for product teams and boosting efficiency.
VPDS developers can address other critical or high priority projects, decreasing time to market for product teams and boosting efficiency.
Future scope
We anticipate the incorporation of a chatbot component into the Visa Product Design System in the near future as a logical next step in AI-powered design.
As we plan for this next development in the evolution of our design system, we have several next steps to prioritize:
• Providing a mechanism for saving conversations, similar to the way Visa’s Secure ChatGPT stores chat threads.
• Enabling the chat to re-open where the user left off if they open the chatbot in another tab.
• Training the bot on data covering our design foundations, components, and style guide.
• Providing a mechanism for saving conversations, similar to the way Visa’s Secure ChatGPT stores chat threads.
• Enabling the chat to re-open where the user left off if they open the chatbot in another tab.
• Training the bot on data covering our design foundations, components, and style guide.