Virtual Agent Chatbot
Designing conversational interfaces experiences @ ServiceNow
Type
Role
Time
Team
Tools
Methods
Product Design Intern
UI/UX design, Web design, Strategy
10 weeks (Jun-Sept 2021)
Me, 1 Designer, 1 Product Manager
Figma, Miro
Mockups, User persona, Competitive analysis, Heuristic analysis
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. I spent my time designing a custom cards experience to make the layouts more flexible for the Virtual Agent chatbot. I also created custom scalable components and updated the Figma Conversational Interfaces team library.
Impact
I conceptualized and built 16 different UI layouts of conversational interface experiences which targeted various use cases and helped in defining the Virtual Agent product strategy and future roadmap. The custom components that I created were used across various use cases and added to the team library so that future designers can expedite their work process.
Design process timeline
Context
Virtual Agent is ServiceNow’s chatbot. It currently supports multiple interfaces for the conveniences of users, including web, mobile devices, Slack, Microsoft Teams, etc. The chatbot currently has cards that are predefined with information that has a fixed layout and customers can use these cards to customize how their chatbot experiences appear to their own customers.
🔎 Challenge
The author building a Virtual Agent chatbot experience can go in and define the data and information in the cards, but they can't customize the layout of these cards. ServiceNow customers have requested the option to customize existing card layouts and make these cards configurable in order to better define their experiences.
💡 Solutions
First, I gained a better understanding of the chatbot space through reviewing existing literature, researching competitor chatbot card interfaces, and syncing with the UX Research team to understand our user personas. I completed a heuristic analysis to break down the basic elements of the cards and worked with PMs/Developers to determine the parameters and variations of what cards would look like on different platforms. I worked with another Designer to analyze and integrate an existing system that we have as a potential foundational framework. Then, I created the components and produced 16 different UI layouts and cases that I delivered to my team, who used my work as a foundational framework.
💭 How can we design a custom card experience to make the layouts more flexible?
Prior to this project
Previously, these cards contained different information and content, including but not limited to: text blocks, records, input fields, boolean choices, tables, images, videos. These cards have different appearances based on the different platforms they are shown on, including mobile, web, Microsoft Teams, and Slack.
Understanding the existing space and current users
To set up the context for this project, I reviewed prior literature on chatbots, their use, how companies leveraged them, the properties for their business, and the general principles behind the Conversational CX space. I conducted a competitive analysis of the interfaces of our competitor chatbots to understand the existing industry standards and worked with the UX Research team at ServiceNow to gain information on the user roles behind Virtual Agent. The main users who use these card layouts are Support Desk Managers and Developers.
Understanding the foundational framework and different platforms
I did a heuristic analysis exercise to take each existing card and break them down by their individual elements to understand the different components that make up varying types of cards and their use cases. Knowing that the cards might have different appearances based on the platform that they are on, I did a cross-analysis of comparing the corresponding interface appearances based on the platform that the cards were being presented on. This was important to consider, knowing that our chatbot is presented on web, mobile devices, Slack, and Microsoft Teams.
I continued to work with my stakeholders, who were Product Managers, Developers, and Designers, to clarify existing limitations and constraints, as well as to define different variations and parameters for each component. I worked with another Designer to analyze an existing tool builder system that we have as a potential foundational framework.
Visualizing the possible layouts
Then, I created the component wireframes in Figma and began exploring variations of card formats, with different possible UI layouts and example use cases. I also designed custom components and variants for the Conversational Interfaces team library and helped to establish the Figma file structure for the team through making designs responsive and resizable, aligning to design system guidelines, and following proper naming conventions.
I am limited in sharing final designs, but please reach out to learn more!
Outcome - Defining product roadmap, simplifying future workflows
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, as well as to determine requirements for the desired future UX and what's needed to support it.
Personal Takeaways
Working with Product Managers and Developers allowed me to experience design thinking on a broader level and understand how both technical constraints and design thinking can have an impact on influencing product decisions. I developed my soft skills of communicating with different partners and acknowledging different aspects of a product. This project didn’t follow a linear design process, so it taught me the importance of communicating with my team and asking questions to understand how the project fits into the bigger picture of the product roadmap.
On the other hand, from creating custom scalable components, I was able to develop more of my hard skills. Whether it was watching YouTube tutorials, setting up office hours with other designers, or spending time on Figma working on the components, I improved my actual design skills and attention to detail. This project also allowed me to see how a design system and library fits into a company's workflow.
Overall I had an amazing summer, despite it being remote. Thank you to Alisson and Rita for being such a great mentor/manager to me, the Early in Career and Design Program teams for so many fun intern activities throughout the summer, Wen and the rest of my team for working with me, Rachael, Jen, and John for helping me out on my projects, and my entire team for making this internship so rewarding!