Haptik's Agent chat page overhaul.
Resolving user queries in less time is one of the most crucial parts for Haptik clients. For years customer support team has been chatting with these users to resolve user queries. To reduce the workload of agents Haptik has introduced chatbots which allow these agents to focus on the more critical steps in finding solutions to customer's problems.
From a UX perspective, it's important to focus on the end-to-end experience in addition to business goals. So we conducted user research and defined key problems and redesigned the main Agent Chat page of the legacy product called "Smart Agent Chat" to address the problems we found.
​
As a result, we redesigned the My chats page of the "Smart Agent Chat tool" to fix these problems and run tests to iterate on the go. We were able to reduce the response time of support agents by a staggering 33%
My Role
I was the only Product Designer who worked on this project.
I was working very closely with my product manager, we both together laid down the goals and metrics to achieve and discussed with stakeholders (Design head and Product Head).
I then took it further on my own to conceptualized flows, created visual designs, and communicated the interactions to developers.
Post-launch, I conducted usability testing and analyzed the usage along with the customer requests to improvise the feature.
Background
Haptik is an AI Chatbot platform for enterprise teams and provides an end-to-end solution to resolve and automate customer support queries. "Smart Agent Chat tool" is one of their legacy product on which the customer support team chats with their users and try to resolve the queries. These chats are mostly first attended by the bot and if the bot is unable to answer them they get redirected to a customer support agent.
Brief
Reduce total time taken by a support agent to respond to a user query. Make the tool more user friendly and easy to use.
Why solve for Customer support agents?
They are 75% user base for the tool. They spend 90% of their time every day on this tool. They are power users.
Previous solution
This was a very old design and agents were not able to make full use of it due to bad user experience.
Before
As the smart agent chat tool was very old, a lot of features were confusing and difficult to use. It was very difficult for an agent to differentiate between various chats that were assigned to them. Eventually, the tool became cluttered with different options and not user-friendly as we observed by negative feedback on support tickets.
Yes, it was just a brain explosion 🤯
After
Even when thinking about the influence on business metrics, it's essential to keep in mind a user-centered approach. That's why we decided to take a look at Agent chat tool from a different angle and looked at videos of how the agents interact with the older tool and look for patterns and also validate the problems agents reported. This helped us to see the new perspectives for further experimentation for the business, but with a better experience for our users.
My Design Process
User Research
Wireframe
Competitor Research
Design
Design Solution
User Testing
feature prioritization
Iterate
User Research
We started with "WHY" and conducted user research to unveil the main problems of the existing chatting experience of users of different clients. To identify these problems, different types of secondary and primary research methods were used:
— Interviews with stakeholders, NPS, and Tickets clustering
— Qualitative survey to gather the main problems quickly
— In-depth interviews & usability testing to observe real behavior
Based on our learnings, we were able to craft the persona of the user for whom we are building the product.
​
Pointing out a few problems faced by the users-
​
1. The top bar indicates chats but does not indicate which among these is a new chat
2. No mental model for the agent, the entire dashboard talks about the user
3. No metrics for the agent to track his activity
4. Difficult to navigate online and offline status
5. possibility of human error was more when the agents had to choose to close the chat action vs waiting for the user.
6. The Right Side of the tool was very overwhelming
7. No keyboard shortcuts
User Persona
Ashish The Multitasker
Ashish is incredibly busy. He has to solve user queries on the Agent chat tool by chatting with the user and answer on-call queries. His attention is diverted all the time to keep track of both mediums
Kushal The single tasker
Kushal handles only chat queries on the Agent chat tool. He spends 70% of his time on the Agent chat tool and 30% of his time on other support tools which provide in-depth details of the user.
Scenarios of how both the above personas use the tool - Job stories
​
As we chose to solve the needs of our users, the most important task was to understand the use cases. I worked on Job Stories as they refine the situation based on context and motivation to answer “When and how will users use the agent chat tool?"
​
-
When Ashish is on call he gets diverted and he forgets to get back on the chat platform and reply to his users.
-
When Kushal wants to go for lunch break he goes offline but he still keeps receiving chats and is unable to have lunch.
-
Kushal manually keeps a track of how many users queries he has solved every day
-
When Kushal gets a chat message from a user he wants to get notified and see the number of messages the user has sent to decide the urgency.
-
Ashish wants to know if the user is active or not if he does not receive any reply for more that 3 mins, so that he does not have to wait and can close the chat
Qualitative Data​
We conducted user interviews with -
Chat and call Agents - 10
Team leaders - 7
They are the hands-on user for the tool and contributed to 95% of our persona.
Insights
-
99% of agents received chats even after they go offline.
-
It was difficult to differentiate and take action on which chat the agent should pick first from the assigned chats.
-
Going offline was confusing as they were just going on a break and not logging off
-
TL should get a nudge if the agent needs help to close the chat.
-
Wating for user action should be automated
UX Goals derived from research
Holistic View
Personalize the dashboard to motivate the agents to achieve their daily goals.
Simplify Decisions
Enable users by providing features to effortlessly take decisions by making the tool suggest next steps to the agent
Boost Performance
Help agent with timely information to so that they can help the customers more quickly.
Insights from competitor research
I noticed something common amongst all the features that agents liked. All of them helped agents make their decisions faster and assisted them to provide a consistent experience to their customers.
Design solution
The main idea I followed was optimizing the user experience for clarity, not only for simplicity. According to the previous insights where there was no visibility and decision-making was difficult, users couldn't perform and achieve their goals as expected. So that I organized my thoughts in a simple matrix, highlighting the existing problems with actual behavior and matching them with an optimal behavior. This approach usually helps me to come to potential ideas quickly and then embody them into design solutions.
.jpg)
Feature prioritisation
We have listed all the challenges based on our analysis and findings. The next step would involve us prioritizing the problems so that we can scope out the problem space and build the product in phases.
​
This is where stakeholder collaboration comes into play. This is useful because we rarely have time to complete all of the tasks on our wish lists. When we use the matrix to choose activities intelligently, we can spend more of our time on the high-value activities that keep us moving forwards.
How to fill the matrix?
1. List the major activities that you want to or need to complete in different sticky notes.
​
2. Score these on impact (from, say, 0 for no impact to 10 for maximum impact).
​
3. Place the stickies on the Y-axis based on the impact. Timebox this activity.
​
4. Score each task based on effort involved (from, say, 0 for no real effort to 10 for a major. effort). Do not move the sticky notes along the Y-axis. Timebox this activity.
​
5. Prioritize appropriately, and eliminate low-impact activities.
At the end of the activity, you will have a matrix-like above which clusters the tasks into 4 different buckets. We will be picking up all the “Quick Wins” (high impact, low effort) and “Major projects” (high impact, high effort).
Quick wins
1. Active chats
2. Live chat stats
3. Agent status
​
Major projects
1. Notification
2. User Details
3. Notes visibility
4. Agent performance
Wireframes
1
1
4
2
5
3
1
4
Agent profile and chats
The left-hand side of the tool was dedicated to agent activity. Most of the agent's actions are on this side of the page.
Chat focused screen
The centre part of the screen is where the agent is very focused most of the time. So a lot of short cuts were introduced, some being smart suggestions (saved replies) which reduced typing for the agent and will also reduced time and error.
Snoozed chats
This feature will help the agent to snooze the user when he is waiting for him to get back and move on another chat.
Notes
Introducing notes right beside reply so that the focus stays same.
User details and tools
This section was focused on the user the agent is chatting with. All information the about the user available was shown here.
2
3
5
Final Designs
We divided the screen in 3 parts- to create a mental model for the users-
-
Left hand side(LHS)
-
Center of the page​
-
Right hand side
Left hand side - Before (old)
Left hand side - After (new)
New Left hand side
This section was on the left side of the screen which showcased agents about their current activity and gave visibility of all the live chats.
Below are the sections it contains -
-
Live chat stats - count of the agent during the day
-
Active chat - All users the agent is chatting with at present with and made sure they receive notification when a user is sending a message
-
Agent status - online, on a break
-
Agent performance and shif details
Live Chats stats
This section was focused on the user the agent is chatting with. A clear breakdown of chats at an individual and team level helps the agent gauge and understand the load of support requests at any given time. All information the about the user available was shown here.
The active chat section gives a clear picture to the agent about the number of chats and their state. This helps the agent prioritize which chats to tackle first.
How do tags work?
The different color tags supported with the number of messages and time will help the agent understand which user is waiting longest and needs immediate attention. It also allows the agent to clearly define read and unread messages. This will reduce the agent's time in deciding which chat should be picked up next.
All tags we used
We wanted to give agents an experience as close to a commonly used chat platform like Whatsapp, Facebook messenger to keep the key fundamentals the same.
This would ensure that the agents can relate and connect to it better.
Notification visual signifier
To make sure users don’t miss any critical chat, we implemented notifications.
Challenges
-
Looking for balanced sounds that are fun and alerting, without being too intrusive.
-
Shortlist and narrow events that need the most attention.
Here are the sounds we selected
-
New Chat Pinned Event - Smiling face with heart eyes
-
New Message Event - Chime
Agent status and Performance
Agent status
The agent status section gives the user a glimpse of their day.
It also allows them 1 click access to log in and log out. This is handy for the multiple breaks taken during the day.
​
​
Agent Performance
The agent performance dashboard gives the user a real-time view of their performance. This helps them gauge and improve their performance over time.
Active chats
Center section Before (old)
Center section After (new)
Center section (new)
We did not change any functionality here just changed the component styling to match with the entire page and introduces few indicators.
​
-
The most significant change we brought in was changing the position of waiting for user button from right to left.
-
This resulted less human error and help us move towards building a mentol model for the the users, that is they have to close the chat it;s on their right and if they wanted to but the user in waiting bucket it was on the left.
-
Overtime this will become muscle memory for the users​
-
Couple of other signifires that we suggested anre in the below screenshot
Right hand side Before (old)
Right hand side After (new)
Right hand side (RHS)
This section was on the right side of the screen which showcased all the user details with whom the agent is chatting presently. It also allowed switching between the internal CRM tool to fetch user data easy, as we opened it inside the tool itself
​
Below are the sections it contains -
-
User details - It showcased all the important and basic information followed by the user history and notes to highight any concerns
User details
The user detail section educates the agent on everything they need to know about the user.
How will this feature help?
1. It provides easy access to all user information and history which helps the agent understand the user better and solve the query faster.
2. Helps the agent gauge if the user is a first time user or a repeat user and the type/nature of queries raised in the past
Notes
Notes are critical pieces of information written down by the agent while chatting with a user. They especially help the next agent that chat’s with the user in a future scenario. It enables a high level of personalization and consistency in service while improving the average response time for the next agent that services the user.
IMPACT OF THE REDESIGN
1. We observed a reduction in FRT (First Response Time, ie average time taken by the agent to reply to the first message to the user) by a staggering 33% (3.2 ms to 34 secs).
2. We saw a reduction of 294% (18 ms to 5 ms) in average response time which saved millions of dollars in support costs annually for our customers.
3. The impact was widely received and acknowledged by OYO, Kotak, Zurich Insurance, and many more of our flagship customers.
ROADMAP
Going back to the prioritisation framework, we established that the “Quick Wins” are the low-hanging fruits. The “Major Projects” are prioritised right after the Quick wins. The “Thankless tasks” and “Fill-ins” form the next part of the backlog. In other words, the Roadmap of the product.