Project timeline
Goal
Dec 23 - Apr 24
Increase efficiency
UX & UI design
PM
Frontend Engineer
Backend Engineer
Other Contributor
My role
What is customer service system?
A system for customer service agents to resolve user issues. When a customer calls, the agent opens the related order and creates a task to track and address the problem.
Order page
Info & Actions
Task page
Filling record and Tracking
Who are our users?
Frontline agent
Start tasks from scratch
Work on multiple tasks one time
Second-line/Complaint agent
Handle transferred tasks
Quickly clear all tasks
PM & Engineer
View order details and debug
Goal
Reduce agent’s task dealing time
More efficient = Less cost for customer service
Every space matters!
As the most frequently used page by customer service agents, this page accounts for 95% of their work time. Instead of a clean, spacious layout with strong hierarchy, they prefer a dense structure that minimizes scrolling and clicks. When a single action is repeated 1,000 times, 1 extra click becomes a huge workload.
Challenges
Constantly switching tabs
The flow is not streamlined
Order page
Task page
Understanding scenarios and actions
After interviewing expert user and shadowing agents to see how they approach daily work, we found:
Main tasks (over 90%)
What agents do
Cancel, refund or modify order
Answer customer inquiry
Internal communication
Check information
Actions
Fill task forms
Check information
Fill task forms
Check information
Transfer task
Calls/texts
Transfer
System flow
Solve
Second-line agent
Customer
Design approach
A new framework that streamlines task dealing
Step 1
Combine task and order page
Navigation
My tasks
Task 1
Task filling
Task actions
Task 2
任务处理
Order search
Info
Info
Info
Contacts
Info
Actions
Info
Actions
Info
Actions
Navigation
Task page
+
Order search
Info
Info
Info
Contacts
Info
Actions
Info
Actions
Actions
Info
Actions
They are intertwined, so they should be on the same page
Before
Iteration 1
Step 2
Separate information and action
2 columns to make the layout more scalable
Navigation
My tasks
Info
Contacts
Order actions
Task 1
Task filling
Task actions
Task 2
任务处理
Order search
After presenting to agents, we found that contacts and actions are integral to their task flow, but the proposed framework doesn't satisfy that.
Iteration 2
Step3
Streamline task dealing
Navigation
My tasks
Info
Task 1
Task filling
Contacts
Order actions
Task actions
Task 2
任务处理
Order search
What task?
Do I need to respond?
Actions needed to solve the task
Complete task
Iteration 3
Task switching
Ideal - Integration with internal messaging app
Our ideal solution was to embed this feature into the internal IM app. Most agents use two screens: one for the order page to manage tasks and the other for the IM app to handle calls and messages. Integrating the feature into the IM app would preserve space on the order page while offering a holistic view.
However, this approach was deemed unfeasible due to high engineering costs and the need for cross-departmental cooperation, as the IM app belongs to another team. We decided to abandon this direction early on.
Multitasking is a core part of the agent's workflow, so we introduced a "My Task" feature to help agents switch between tasks and manage priorities.
Iteration 1 - A floating drawer
We attempted to incorporate "My Tasks" into the order page as an entry point for a drawer containing task lists. This design saved space and only drew the agent’s attention when switching tasks.
However, for second-line agents, who often handle the "clear tasks" scenario—completing or transferring dozens of tasks quickly during short breaks—the drawer added an extra click for each task, which was unacceptable for them.
Iteration 2 - Expand and collapse
Now, "My Tasks" functions as an expandable module on the page, retaining its expand/collapse state and meeting the needs of both first-line and second-line agents.
I aimed to make "My Tasks" stand out because, unlike the tasks below it that are directly linked to orders, "My Tasks" serves as a more efficient system tool and includes tasks unrelated to orders. To eliminate confusion, I elevated its visual hierarchy for better distinction.
Dynamic for different scenarios
The key challenge in a B2B system is accommodating different roles accessing the same page with varying needs. I maintained the basic structure but implemented dynamic adjustments to fit different scenarios.
Frontline agent
On call with the customer
The system automatically creates a task under the related order, with GPT generating a call summary to save agents' time. They can view all relevant information on first screen.
Frontline agent
Multiple tasks with the same order
The average number of tasks per order (for those with calls) is 1.7. For tasks within the same order, we collapsed in-progress tasks and provided key information to help agents identify and prioritize them. Completed tasks were also collapsed to reduce noise.
Second-line agent
Clear all tasks
Second-line agents handle tons of transferred tasks and must complete them quickly when taking breaks. The expanded My Task module helps them switch and complete tasks efficiently.
PM & Engineer
View order details and debug
PMs and engineers occasionally use this page to check information and identify issues with an order. Often, there are no tasks, but they may need to contact others or make changes to the order.
Final delivery
Before
After
Impacts
Reflects
Expert users are invaluable for 2B
Expert users have the deepest understanding of the system—its frictions, gaps, and the scenarios they work with—making them an invaluable resource for feedback and prototype testing.
Be patient and test it out
Often, users don’t know exactly what they need. Instead of jumping to high-fidelity designs based on their requests, focus on understanding their scenarios and providing a prototype to discuss. This can reveal overlooked needs. So we should always stay open and get our hands dirty.
Customer service cost
17%
Average task dealing time
1.89min
From 11.35 min
Typical user
Customer service agents
Scenario
Deal with calling and try to solve the issue for customer.
Airport transfer
Customer Service