top of page

Responsible of the UI and UX aspects of the Virtual Agent.

Virtual Agent

Role
Product Design

Timeline
Jan ‘23 - April ‘23

Responsibilities
UI, UX, Research, UJM, Flow

Team

SolarWinds IT Service Management (ITSM) is a software solution that helps organizations manage their IT services more effectively. It provides tools for logging and tracking service requests, resolving incidentsand problems, managing changes, and maintaining a knowledge base.

Organizations can streamline their IT service delivery processes, improve efficiency, and enhance customer satisfaction. Offering intuitive features for logging and tracking service requests, SolarWinds ITSM ensures a structured approach to managing incoming tickets. This helps organizations prioritize and address service requests promptly, leading to improved response times and customer satisfaction.

About Solarwinds
ITSM Product

The Virtual Agent end-goal is to help requesters (portal users) quickly resolve issues without getting a real agent involved (improve self-service and incidents reduction) and with 24/7 availability. The virtual agent can help with simple or routine issues, allowing real agents to focus on more important/complex tasks (improve productivity) and accelerating response times (reduce MTTR)

HCL Chatbot uses AI technology to solve ordinary issues while mimic human conversation, understand user language better, ask additional questions to get context, respond to the queries in real-time, and hand-off a conversation to a human agent when required.

HCL Chatbot is a white label chat it can be rebranded and 
customized to the brand and design goals. 

About the
Virtual Agent

One major issue we faced was the absence of a Chatbot in our web portal app, which put us at a disadvantage compared to our competitors. Since most of our competitors already offer this feature to their customers, we were losing potential sales and revenue due to the gap in our service offerings. In order to stay competitive and attract more customers, it was essential that we address this problem fast as possible and bridge the Chatbot gap in our portal app.
 

  • Real Agent Must be involved
    The absence of a Chatbot forces us to rely solely on live agents to resolve customer issues, which can result in slow response times and user frustration. With a Chatbot, customers can quickly and easily find solutions to common issues on their own, without the need for a live agent.

     

  • Low Availability
    We know are customers live agents has limited availability, which can lead to longer wait times and reduced customer satisfaction. By implementing a Chatbot, we can offer our customers a more accessible and cost-effective service solution that is available 24/7.

     

  • Simple Issues
    For quick and simple issues, a Chatbot can be much more efficient and cost-effective than a live agent, the Chatbot can provide a seamless and personalized user experience, guiding the customer through the support process and resolving their issue quickly than live agent.

Problems

  • Admins
    The admins persona uses the settings of the virtual agent in the service desk. They can easily turn it on or off and configure it according to your specific needs. In addition, they have access to valuable analytical information that allows them to monitor how many users are actively engaging with the chat feature. With this level of insight, you can optimize your chat usage and tailor it to specific use cases for maximum impact.

     

  • Requesters
    The requester persona has the option to talk with the virtual agent in the service portal and help them (portal users) quickly resolve issues without getting a real agent involved, such as creation of ticket.

User Personas

I used the "how might we" questioning method in the context of a virtual agent this allowed me for the generation of inventive solutions while ensuring a focus on addressing the most crucial problems. By framing questions using "how might we," it encourages creative thinking and opens up possibilities for innovative approaches to designing and improving the virtual agent. When applied to a virtual agent, "how might we" questioning prompts us to consider various aspects of its functionality, user experience, and problem-solving capabilities. For example, "How might we improve the virtual agent's ability to understand and respond accurately to user queries?" or "How might we enhance the virtual agent's conversational skills to provide a more human-like interaction?"

How Might We
Method 

To fully grasp and evaluate the feature and its challenges, I meticulously mapped out all competitors who has the virtual agent capability.

Competitors 

Thorough the research I collected and explored inspirations and ideas from direct competitors, the broader ecosystem, prevailing design trends, and big apps in the market, all tailored towards enhancing the Virtual Agent. I meticulously mapped out all the corresponding flows and research using Figjam. Below, you can find screenshots from the research.

UI.UX Research 

  • Chat with a Live Agent

  • Admin Settings and configuration for the Virtual Agent - Service Desk

  • Virtual Agent Console/Analytics Hosted by HCL integration on the Service Desk

A comprehensive map of the user experience when engaging with the virtual agent chatbot, demonstrating each UI screen and scenario. A key tool for aligning development and project management teams prior to creating wireframes and visual designs of the virtual agent feature.

  • The Virtual Agent Open Action - Portal Users (Requesters)

  • The Virtual Agent Inner Actions - Portal Users (Requesters)

  • History Actions in Virtual Agent - Portal Users (Requesters)

Flow of the Screens
by Notes

Design Review
The purpose of the design review  to verify that the final product aligns with the designated design specifications and to offer constructive feedback on the user interface (UI) design, if required. This process aims to guarantee that the end result faithfully represents the intended design while also allowing for necessary improvements and refinements to the UI, ensuring a user-friendly experience.

Handoff
In the handoff phase, I met with the development team, explained the design details thoroughly, and ensured a comprehensive understanding of the project requirements. This streamlined the transfer of responsibilities and minimized the chances of overlooking important elements during development.

Handoff Phase and Design Review

Please find below several screens from our mobile app and web app, illustrating the service portal's virtual agent chat feature. These screens offer a visual representation of the chat interface.

UI Screens

In the "Open Chat" flow, users can effortlessly access the virtual agent chat by clicking on the FAB.
Upon opening the chat, they will be greeted with a delightful loading animation. The virtual agent then suggests a few common options to the user, or the user can simply type anything they need help with, and the virtual agent will try to assist them.

Open Chat

In the "Show Open Tickets" flow, users can effortlessly view all of their active tickets through two simple methods: by clicking on the designated "Open Tickets" button or by entering a prompt related to ticket status. This intuitive approach empowers end-users to access their open tickets promptly and conveniently.

Show Open Tickets

In the "Create New Incident" flow, users can easily open a ticket within the chat. They simply need to click on "Create new incident" or type the prompt, fill up the fields, and click on "Create".

Create New Incident

In the "Show Closed & Open Tasks" flow, users can easily view all the open tasks and closed tasks in the chat. Additionally, they can click on a specific task to access detailed information. Furthermore, users have the option to complete regular tasks or Approval task (approve/decline) 

Show Closed &
Open Tasks

In the "Search Knowledge" flow, users can effortlessly search for articles that will help them solve their problems within the chat. All they need to do is click on "Search Knowledge" and type the relevant query or prompt, and the virtual agent will promptly find the appropriate article for them!

Search Knowledge

In the "Show Assigned Tickets" flow, users can effortlessly view all the tickets assigned to them and access specific ticket details. Additionally, they have the capability to add comments to the ticket directly within the virtual agent chat.

Show Assigned
Tickets

In the "Request New Service" flow, users can conveniently click on the button provided in the chat suggestions or type a prompt and describe the relevant service they need. The virtual agent will then identify the specific request they require and suggest placing an order for it if desired.

Request New
Service

In the "Chat History" flow, users can conveniently click on the history icon in the navbar. This allows them to view all the actions they have taken in the past, along with the relevant chat content. Additionally, users have the option to print the chat history if needed.

Chat History

In the "Chat with a Live Agent" flow, users can easily type to communicate with a live agent. If the virtual agent doesn't understand, it will suggest connecting with a live agent.
*Available on web only

Chat with a Live
Agent

In the "Service Desk Virtual Agent Settings" flows, admin users can easily disable the option for requester users to communicate with the virtual agent or access the live agent chat. They also have access to a inner page where they can view all the analytics and other settings related to the virtual agent.
*Available on web only

Service Desk Virtual Agent Settings

We used Virtual Agent Character as commonly used when people interact with chatbots. It was our natural choice to include it in the design. It's important to add a face that the user can recognizable face, which enhances the user experience and makes it more human-like, ultimately delivering a more satisfying user experience.

Virtual Agent Character

We were thrilled with the tremendous success of the virtual agent bot on our service portal. Users adopted it much faster than anticipated, and it exceeded all the expectations we initially set. I cannot share the Pendo data due to data security reasons, but we surpassed our initial target of 100 additional organizations that opened the feature for requester users, which greatly exceeded our expectations. Of course, our users provided some feedback to improve the virtual agent, but the launch was very successful.

Outcome: Feature was
Highly Adopted by Users

The SolarWinds Service Desk virtual agent has achieved remarkable success, garnering widespread attention in the news. It has swiftly become a coveted asset among our customer base, with high demand stemming from the invaluable solutions it offers. The virtual agent has had a profound impact on our business objectives, notably driving revenue growth as customers eagerly upgrade to higher-tier plans in order to access this essential feature.

Virtual Agents Making News Headlines

My Role and Challenges 

Role - Product designer 
As a Product Designer I held complete design-ownership over the features and tickets for both the web and mobile apps of the virtual agent. My role encompassed the entire design process of the virtual agent feature, from ideation and brainstorming to user research, user experience (UX), user journey mapping (UJM), user interface (UI) design, and prototyping. I took on full responsibility for ensuring that the feature met the high standards set by SolarWinds, delivering a top-notch user experience to our customers.

Challenges

 

  • How do we customize the chatbot's responses to ensure they align with our organization's?

  • How do we design the integration in a way that minimizes disruptions to existing workflows and processes?

  • How do we make the chatbot integration seamless for portal requesters without letting them know that it’s a service of another company?

  • How can we seamlessly integrate a chatbot for portal requesters without
    revealing that it is a service provided by another company?


Despite the challenges posed by the virtual agent feature, I was able to overcome them
through the use of good UX design and thorough user research. 

bottom of page