English

Customer service redesign

Airport transfer

Trip.com is the biggest online travel agency in Asia with 400 million+ users.

Typical user

Customer service agents

Scenario

Deal with calls and try to solve issues for customers.

Goal

Increase efficiency Reduce task-handling time

Other contributor

PM Frontend Dev Backend Dev

My role

UX & UI design UX research

Project timeline

Dec 23 - Apr 24

Typical user

Customer service agents

Scenario

Deal with calls and try to solve issues for customers.

Goal

Increase efficiency Reduce task-handling time

Other contributor

PM Frontend Dev Backend Dev

My role

UX & UI design UX research

Project timeline

Dec 23 - Apr 24

What is the customer service system?

A 2-page web-based system to help solve customer inquiries

Who are our users?

Frontline agent
Frontline agent
Start tasks from scratch
Handle multiple tasks at once
Start tasks from scratch
Handle multiple tasks at once
Second-line (complaints) agent
Second-line (complaints) agent
Handle transferred tasks
Quickly clear all tasks
Handle transferred tasks
Quickly clear all tasks
PM & Engineer
PM & Engineer
View order details and debug

(<5%)

View order details and debug

(<5%)

Goal

Reduce agents’ task-handling time

Higher efficiency = Lower customer service costs

Limitation

Every space matters!

As the most frequently used page by customer service agents, 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 scroll becomes a huge workload.
Challenges

Clunky workflow

Constant tab switching

Understanding scenarios and workflows

After interviewing an expert user and shadowing agents
Product direction

A new framework that streamlines task dealing

Combine task and order page

Step 1

They are intertwined, so they should be on the same page

Separate information and action

Step 2
After presenting to agents, we found that contacts and actions are integral to their task flow, but the proposed framework didn't meet their needs.

Streamline task workflow

Step 3

Task switching

Multitasking is a core part of the agent's workflow, so we introduced「My Task」feature to help agents switch between tasks and manage priorities.

Iteration 1 - A floating drawer

「My Tasks」on the order page as an entry to open a drawer with task lists.


✅ Saves space

✅ More information when expanded


❌ 1 extra click

❌ High time cost for second-line agents who clear dozens in brief shift windows

「My Tasks」on the order page as an entry to open a drawer with task lists.


✅ Saves space

✅ More information when expanded


❌ 1 extra click

❌ High time cost for second-line agents who clear dozens in brief shift windows

Iteration 2 - Expand and collapse

「My Tasks」as an expandable module.


✅ Remembers expand/collapse state, so it fits both roles

✅ Saves 1 step

✅ Raised visual hierarchy to avoid confusion

「My Tasks」as an expandable module.


✅ Remembers expand/collapse state, so it fits both roles

✅ Saves 1 step

✅ Raised visual hierarchy to avoid confusion

Design strategy

Dynamic for 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 cognitive load.

Second-line agent

Clear all tasks

They 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

They 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

Average task dealing time
Average task-handling time

1.89min

From 11.35 min
Customer service cost

17%

Reflections

01

Leverage Expert Users who might have the deepest understanding of the system - its frictions, gaps, and the edge cases.

02

Often, users don’t know exactly what they need. Instead of jumping to designs based on their requests, focus on understanding their scenarios and allow room for discussion.

Create a free website with Framer, the website builder loved by startups, designers and agencies.