Back
SOP Configuration tool for Customer Service Platform
0 to 1 Design · Interaction Design · UI Design

Overview
Standard operating procedure (also known as SOP) is a set of step-by-step instructions to help workers carry out routine operations. I was the only designers to designed this SOP flow builder to help agents to standardized their working flow.
After building this flow builder, more than 900 SOPs were applied for agents under e-commerce line which highly increased agents’ working efficiency.
Timeline
2021.09 - 2021.11
Role
Product Designer
Responsibility
User research, Interaction design, UI design
background
Current Stage
Save money
Future
Make money
Ultimate Goal
Find money
Company spend too much money on hiring agents for customer service
As company’s e-commerce is growing continuously, company had spent tons of money to hire more people for customer service which is undoubtedly a huge expense for the company.
Therefore, how to decrease hiring cost and maximize agent’s efficiency becomes our main goal. "Number of Agents Every Million Orders" was our main metric for measuring success in 2021. We really wanted to control or even reduce the number of agents under the condition of increasing orders to help the company save money.
As Number of Agents Every Million Orders is hard to execute directly, we transfer the data into executable one, Average Handling Time. Less handling time every agent uses, more orders they are able to handle.
Problem
Agents spend most of the time on diagnosing user problems, searching, and providing answers for users
We’ve found that agents spent most of the time on diagnosing user problems, finding answers for users and filling our ticket, which accounts for 55% of the total processing time
55%
of the total processing time
In order to understand how this problem happened, we had a deep interview with agent.
👩👩👩
Consumer
Where is my order?
The quality of the clothes I bought is not good, can I return it?
👨
Agents
SOP_Logistics.pdf
SOP_Refund.pdf
...
Consult

1. As user’s problem varies, It was super difficult for agent to reply user’s feedback directly depend on their own knowledge preparation.
2. Even though agent had already understand user’s problem, it’s still cost them a lot of time to find the right answer.
3. As most of the problem cannot be answer in one time, the efficiency was much lower when agents needs to find answers multiple times.
Goal
HMW helps agents to solve users' problems in a much faster and standardized way from users joining the line, through communicating, till leaving?
FINal design
Provide multiple types of nodes for different using scenario
To meet business requirements, we provide different types of nodes to help them use the most appropriate one for different scenarios








Provide different features for node interaction experience
We visualized the nodes, so that operators are able to connect every nodes into a completed flow if they finish the detail set of SOPs in advance in a much easier way

Connection
just connect nodes into a flow by draging line between two seperated nodes

Copy
Copy nodes and its sub-nodes so that user doesn’t need to create the same nodes twice

Searching
Make it easy for user to find any nodes they want
Form builder to support agent judgement & execution nodes
Even though we hope that all tasks can be automated through the system, due to the complexity of the business itself and unpredictable risks, there are still many nodes that need agents to complete.
Therefore, we designed a form builder to support agents’ node so that they can config all the forms by themselves freely.

Form Template
For those frequent used form, it can be saved as template

Applied on workspace
It will be applied on IM/Call/Ticket workspace after form is published to public

Minimize risk by building error reporting mechanism
System will check flow’s integrity before publishment. If flow is not completed, for example, there is a misconnected branch, system will provide alerts in advance to assure everthing is connected.

Data is displayed in the builder so that user can iterate SOP based on it
SOP would not be done in one time, user will iterate it in order to continuously decreased agent’s average handling time

Launch metrics
Number of Agents Every Million Orders decreased by
60%
Average Handle Time decreased by
15%
SOPs has been configured in the builder
80%
After launch
Canvas was in a mess and hard to be located on a specific node when there were hundreds of nodes in one flow
Automation tool met user's expectations overall, while using experience on canvas needs improving

Search
We designed a search feature, users can find nodes in a much faster way

Autolay
We added a mini map and auto-layout feature to improve user's experience

Summary
More frequent and earlier communication with our user
What we do well is that after the project is kicked off, I collaborated with the product manager to do user research directly and quickly. We found user’s pain point and set the goal based on it.
Moreover, as this platform is also closely related to technical support, we listen to their voices at the very early stage to ensure that our platform can be developed successfully.
Execute MVP version strictly
Due to the acceptance of a large number of voices from different directions in the early stage of the project, we did not strictly consider the time cost when formulating the MVP scope, resulting in the overall design & development time being extended due to the increase of some non-core functions.
Therefore, when working on a brand new project, it is necessary to strictly formulate the scope of the MVP version. When new voices are added, it is necessary to carefully consider whether to add these new functions into our MVP scope.