Visa Gen AI Hub // The Chatbot Builder
Reimagining how chatbots are built at Visa
O V E R V I E W
Visa’s Generative AI Hub is where employees explore generative AI products and create their own chatbots. The original project goal was to update a chatbot form to the latest design system. However, discovery research revealed the entire end-to-end experience needed reimagination due to scattered workflows and user pain points. With a fixed three-month timeline, I focused on delivering maximum impact.
After prioritizing opportunities, I rapidly iterated and ultimately delivered robust designs and prototypes. The final solution provided an intuitive chatbot development experience with advanced system message capabilities and integrated management workflows, all unified on a singular platform.
By simplifying and streamlining the process, I empowered employees to build chatbots independently, unlocking the full potential of generative AI across the organization.
-
Role
Lead Designer. Owned end-to-end design execution, from hands-on discovery to iterative design and delivery, while leading a tiger team of four senior design consultants for ongoing feedback.
-
Company & Type
Visa, Internal tool (desktop)
-
Duration
August - October 2024 (3 months)
-
Tools
Figma, Microsoft CoPilot 365 Suite, Excel, Generative AI
T H E C H A L L E N G E
Reimagining how chatbots are built
How might we enable any Visa employee to intuitively create chatbots so teams across the organization can benefit from generative AI?
D I S C O V E R Y R E S E A R C H
Product understanding & user pain point takeaways
Users 3 distinct roles
Technical Documentation 27 artifacts analyzed
💡 Defining the chatbot’s system message and temperature properly are critical to it’s success
💡 Chatbots are only as smart as the documents they are “fed” as knowledge
Existing User Feedback Survey 23 participants
💡 Users desire better understanding on customizing chatbots
Heuristic Evaluation 6 flows evaluated
💡 User burden to research how to fill out form with no information within the form
💡 Default error states with no information on how to rectify
💡 Confusing data requirements (“ntid”) and incorrect data validation
💡 No way to save progress on creation form that requires detailed research to complete
Process Diagram 15+ distinct steps
Examined end-to-end process of creating, managing, and publishing a chatbot using demo videos and experimentation to fill knowledge gaps.
💡 8+ platform switches
💡 Steps and status not clearly communicated
Design Goal Prioritization
*
Design Goal Prioritization *
1
Empower users to feel confident and properly guided during chatbot creation process
2
Reduce technical jargon and obstacles
3
Clearly communicate the process and steps
D E S I G N & I T E R A T I O N
Key design decisions over 10 rapid review cycles
Progressive disclosure, input sections, and automatic progress saving
1. Multi-step Wizard
After evaluating 20+ successful system messages, I determined most had common elements.
2. System Message Builder
I then designed a “Mad Libs” inspired concept to ease user burden of writing from scratch.
Initial idea was to allow users who needed extra guidance to use “guided” workflow and those comfortable with process to use “advanced”/”custom”. However, this design forced an either-or-decision.
3. Guided v. Custom System Message
Ultimately, I decided all users would benefit from the guided input process. An additional custom field could be used for more control allowing for flexibility in use.
4. System Message Input & Preview Accessibility
Initial accessibility concern with input field changes immediately affecting preview pane while typing.
By using auto-save, I was able to apply the input changes upon exiting each field input and push the saved content to the preview pane.
The original publish workflow involved three platform switches and provided no clear status visibility, especially problematic with multiple chatbot owners.
The redesigned workflow allows users to remain on a single platform, with descriptive and visible status updates throughout each stage.
5. Publishing
Previously, chat and chatbot management lived on separate platforms, creating fragmented access and obscured features.
6. Information Architecture
Although not within the original scope, mapping the information architecture revealed that combining platforms would deliver the optimal experience.
T H E S O L U T I O N
Intuitive and integrated chatbot development experience
26 flows delivered for happy, edge, and error paths
Chatbot Creation
Progressive disclosure multi-step wizard
Real-time name-based lookup allows users to find people using familiar names, avoiding obscure usernames and backend validation errors.
Innovative fill-in-the-blank & preview system message builder
Next step transparency
Chatbot Management
Consistent chatbot management across the platform
Access to knowledge documents for uninterrupted workflow
Clear publishing and approval visibility without context-switching.
Information Architecture
New navigation proposed based of in-depth analysis
Unified management portal and chat site experience
C O N C L U S I O N
By reimagining Visa’s chatbot creation experience, I delivered an intuitive, end-to-end workflow. The experience empowers employees to build and manage chatbots independently and helps unlock the potential of generative AI across the organization.
Next Steps
Engineering implementation is ongoing with platform’s unified information architecture launched.
Stakeholder Feedback
Learnings
Be bold: Went beyond a simple reskin to deliver a full experience overhaul, surprising and delighting stakeholders.
Stay flexible: Ongoing development and shifting requirements meant we had to iterate quickly and adapt continuously.
Lead by example: Taking ownership of end-to-end delivery while leading more senior designers strengthened my confidence and clarified my leadership style.
