top of page

ServiceNow: Virtual Agent Support

New font feature that would allow users to customize their own chatbots.

TYPE

Chatbot Feature

TEAM

2 Product Designers

1 Product Manager

Content Writer

Engineering Team

DATE

August - October 2022

TOOLS

Figma, Miro, Zoom, Builttools (Internal Tracking Software)

OVERVIEW

ServiceNow is a cloud computing platform that helps companies manage workflows for enterprise operation. In the Virtual Agent (VA) experience at ServiceNow, it makes it easy for employees and customers to resolve issues fast and get what they need, when they need it with an AI powered conversational chatbot. It's used often to resolve issues from HR and IR service desks, among their applications. 

The aim of this project is to design customizable components in the chatbot to create a more personalized experience for our clients (Disney, Microsoft). 

MY ROLE

I was leading the project to be launched on desktop. I collaborated with cross functional teams to deliver the product on Slack, Facebook, Workplace SMS, and web applications.

Problem

Having a strong brand presence is important to our client's products. Specifically, clients that use the Virtual Agent product are frustrated by the lack of flexibility to personalize their chatbot for their brand. Without being able to adjust certain features, client's are frustrated.

Project Preview

Version 1 of adding a text through attachment or URL

Version 4 of adding a font through URL or uploading

Discovery + User Research

I scheduled 2-days of meetings with stakeholders like project managers, designers and engineers to explore existing information around the problem. My research encompassed:

 

  • Validation that there is data to support that adding a customization feature is necessary

  • Card sorting, interviews, surveys

  • Understanding how different platforms are linked into my design

  • Roles and responsibilities of members form different design teams

  • Understanding the crucial information we need for different phases (phase 1, 2, 3)

  • Timeline on the project

  • How is the success of the tasks measured

Qualitative Interviews

Understanding user pain points are important. The complex workflows of a wide variety of users and their interactions with other people need to be laid out. In order to achieve that, I gathered as much as I could from the end users to understand the challenges they face and how they see the app making a difference in optimizing pain areas.

"I have very certain custom fonts that I like, so I would prefer the possibility of being able to add my own fonts." - Client 1 (cannot disclose name)

"When organizations are so complex, they customization so difficult to enable" - Client 2 (cannot disclose name)

“I don't really need custom fonts, but I like the option. To make it easier, I would like a preset list of fonts.” - Client 3 (cannot disclose name)

Solution Exploration

The pain points gathered from users inspired me to create 'how might we' statements. I always see pain as an opportunity.

"I have very certain custom fonts that I like, so I would prefer the possibility of being able to add my own fonts"

How might add a feature where users can add their own fonts?

"When organizations are so complex, they customization so difficult to enable"

How might we add a feature where users can both upload and add their own URL?

“I don't really need custom fonts, but I like the option. To make it easier, I would like a preset list of fonts.”

How might we create a predefined list of fonts so that users don’t need to necessarily upload their own?

Envisioning

Creating a user persona and user flow are crucial. It helps me understand how this user thinks and to understand where their next decision in the flow may take them.

*Click to enlarge and scroll to view more

Challenges + Constraints

1. Initial Design

Using a modal, radio buttons were added due to usability concerns. Links prove to be confusing and content is confusing.

2. Overcoming Usability Concerns

There are usability concerns due to the upload and URL existing within one area in the modal content. When a user toggles between these options, the change could be confusing. Also, we recognized that we have to let users name the font because the file didn't provide that information.

3. Existing Engineering Constraints

We added another button due to engineering constraints. We had to separate the options from the initial interaction. This helped address some usability concerns.

4. Addressing Hierarchy Concerns

This one addressed design concerns of hierarchy on the page as dropdown should be the primary option and adding a font is optional. 

The Solution

The solution was to allow for flexibility in the UI by adding colors, fonts, and imagery customization. In this sprint, we focused on fonts. We landed on this version as it addressed the hierarchy concerns. It also addressed a new engineering dependency as the font needed to be added to 2 separate tables using existing components available for our developers.

ServiceNow makes it easy to customize fonts by clicking a simple button in the platform.

Seeing Results

After releasing onto production, we wanted to see how well the feature was performing. 

61% 
Adoption Rate

9/10
Usefulness of Team

Project Learnings

1. Collaborate and seek feedback early

It's so important to collaborate and ask your peers on feedback. If I create a design in hi-fi and the engineer can't execute the design, I'll wasted time on it. Therefore, it's easier to save a design earlier in the process then when you're near the finish line. 

 


2. Ask questions

The art of getting to answer is digging deep in the trenches for opportunities or problems. It fosters new ideas. I learned to not be afraid to ask as many as I need!

Next Steps

1. So many iterations! The finished result needs to be evolved into a more holistic branding experience. To help our users administer our system easier, we should have one unified center to take care of all the branding needs.

2. To validate this hypothesis, I'm working with our research team to learn more about our customers' brand needs.

More Projects

Flight Centre Change Feature

ServiceNow Design Systems

ServiceNow AI Message Preview

Flight Centre Self Serve Cancel

Responsive Tattoo Application

Cloudtax Voice Enabled Tax Prompts

bottom of page