# Current UI Animation
# AI-Enhanced Dark Mode UI
From Agent Pain Points to Research Insights
I embedded myself in the customer care team for over a week, working alongside 40 agents to observe their daily routines and workflow pain points. This hands-on research, combined with 8 interviews and a full-team survey, gave me both qualitative depth and quantitative data.
The following insights highlight the most common challenges agents faced and became the foundation for all design decisions.
Research Data Findings
Across interviews and surveys, three themes stood out. Agents struggled to hand off tickets without losing context. Supervisors & agents lacked dashboards to track system health and guide actions. And frontline agents were stuck in chat windows handling repetitive queries.
Turning Research Into Design Decisions
We translated agent pain points into clear design moves. Each decision was tied to a real data insight, ensuring the system was not just functional, but measurable, actionable, and built to improve over time.
Prototype Showcase
Enhancing Workflow & AI-Powered Support
These prototypes show how the concepts came to life. Ticket transfers now move with full context across agents. AI confidence thresholds determine when to automate or hand off to a human. And the AI–human collaboration flow ensures every interaction feeds back into training, making the system smarter over time.
# Ticket Transfer Process
I’ll mark this as high priority and transfer it to Ronald, who’s less busy. Adding tags like 'Billing Error' and 'Refund Request' will help her identify the issue quickly.
Ticket Delivered
# Receiving Transferred Tickets
-
When I receive a transferred ticket, I get a notice, and it’s added to my 'Transferred Ticket' list. I can quickly see the urgency and decide whether to accept or transfer it again.
-
If I accept, it’s saved in my chat history with all the details, like who sent it and any previous transfers, so I can easily track everything.
AI-Driven Support, Human-Enhanced Care
Urgency alone was not enough. We added an AI confidence threshold — the AI only replies automatically when it is very sure.
If the confidence is low, the system escalates the ticket: it sends it to the right agent based on workload and risk, and also shows it clearly on the dashboard.
This way, agents are not just handling escalations. They are also watching the quality of AI conversations, and can step in quickly when the AI makes mistakes.
How AI and Humans Work Together
This flow shows how AI and humans divide the work: AI answers high-confidence cases automatically, while low-confidence cases are routed to the right agent based on workload and risk.
Agents don’t just handle escalations — they monitor AI quality, tag high-value chats, and feed insights back into the system. This creates a closed loop where the AI keeps learning and improving over time.
# AI-Enhanced Chat Support Prototype
"With me, our support team can handle customer issues more efficiently. I provide smart suggestions during chats, help you refine responses, and make it easy to quickly send high-quality solutions. The team can browse through multiple AI-generated answers, tweak them, and send the best response in just one click, ensuring a seamless and high-quality customer service experience."
Mapping the Data Landscape
To make dashboards useful, the first step was to organize the signals that agents and managers rely on every day.
We grouped them into three buckets — Operational Data, Agent Performance, and AI Feedback Loop — each one answering a different question about system health, team effectiveness, and AI accuracy.
Role-Based Dashboards in Action
Linking operational data, agent performance, and AI feedback to the day-to-day needs of each role.
Hi -Fi Designs Overview
This section provides a detailed look at how each part of the UI works, especially auxiliary features like adding cases and the agent support panel, ensuring a better understanding of their functionality and user interaction, as well as the overall structure of the web app.
