Virtual Agent Chatbot
Designing conversational interface experiences for ServiceNow's chatbot platform
Background
ServiceNow is a B2B SaaS company specializing in making "the world of work, work better for people." Over the summer of 2021, I worked as a Product Design Intern on the Conversational Interfaces team, designing a custom cards experience to make layouts more flexible for the Virtual Agent chatbot — and creating scalable components that updated the Figma Conversational Interfaces team library.
Impact
I conceptualized and built 16 different UI layouts of conversational interface experiences targeting various use cases, helping define the Virtual Agent product strategy and future roadmap.
The custom components I created were used across various use cases and added to the team library so future designers can expedite their work.
Design process timeline
Context
Virtual Agent is ServiceNow's chatbot, supporting multiple interfaces including web, mobile, Slack, and Microsoft Teams. The chatbot's cards were predefined with a fixed layout, and customers could use them to customize how their chatbot experiences appeared to their own users — but couldn't customize the card layout itself.
Challenge
ServiceNow customers requested the option to customize existing card layouts and make cards configurable, in order to better define their own chatbot experiences.
"How can we design a custom card experience to make the layouts more flexible?"
Prior to this project
Cards contained a range of content — text blocks, records, input fields, boolean choices, tables, images, and videos — with different appearances depending on the platform they were shown on.
Understanding the existing space and users
I reviewed prior literature on chatbots and conversational CX, conducted a competitive analysis of competitor chatbot interfaces, and worked with the UX Research team to understand the user roles behind Virtual Agent — primarily Support Desk Managers and Developers.
Understanding the foundational framework
I ran a heuristic analysis, breaking each existing card down by its individual elements to understand the components that make up varying card types, then cross-analyzed how the same cards appeared across web, mobile, Slack, and Microsoft Teams. I worked with another designer to evaluate an existing tool-builder system as a potential foundation.
Visualizing the possible layouts
I created component wireframes in Figma, explored variations of card formats with example use cases, and designed custom components and variants for the Conversational Interfaces team library — making designs responsive, aligning to design system guidelines, and establishing clean naming conventions.
I'm limited in sharing final designs from this internal project — please reach out to learn more!
Outcome
I produced 16 different UI layouts and cases that I delivered to my team, who used my work as a framework in defining the product strategy and vision for Virtual Agent, and to determine requirements for the desired future UX.
Personal takeaways
Working with Product Managers and Developers let me experience design thinking on a broader level, understanding how technical constraints and design thinking together influence product decisions. This project didn't follow a linear process, which taught me the importance of communicating with my team and asking questions to understand how the work fit into the bigger product roadmap.
Creating custom scalable components pushed my hard skills forward — from watching tutorials to setting up office hours with other designers to hands-on Figma practice — and showed me how a design system and library fits into a company's workflow.
Thank you to Alisson and Rita for being such great mentors, the Early in Career and Design Program teams for so many fun intern activities, Wen and the rest of my team, and Rachael, Jen, and John for helping me out on my projects.