CUSTOMER SERVICE WORKBENCH DETAILS PAGE REDESIGN
Role
Design Owner/Solo/UX Designer
Highlights
Self-driven/Obvious Data Feedback
Duration
02/2023-03/2023
BACKGROUND
Customer service workbench-order details page is an important module for customer service staff to search information and then solve consumers' problems online.
However, data showed that over 25% customer service staff found it hard to search information in the details page, over 1/3 staff complained that details page was MOST DIFFICULT TO USE.
Data source: 2022 Q4 survey, including 805 valid questionnaires.
Design aims: Enhancing information query efficiency, improving better experience of FINDING.
USER RESEARCH
To figure out the real situation, I went to customer service working places.
-Observing user operation
-Interviewing
After interviewing, 3 main pain points have been summarized.
Image source: Took in Xian & Shanghai working spaces by me.
Findings👀
Problem 1. Unreasonable page layout.
Problem 2. Information lacks hierarchy.
Problem 3. Inappropriate container - dialogues.
Problem 1. Unreasonable page layout
Information was all tiled, forming an extremely long list.
Users had no choice but kept scrolling up and down,trying to find target information.
Why the page is soooo long!I'm losing my patience!😡
Problem 2. Information lacks hierarchy
All the text fields were on the same hierarchy, without hierarchical logical relationship.
All the information were at the same level,just like an Excel sheet❓...
Problem 3. Inappropriate container - dialogues
Big dialogues are everywhere.Almost all secondary content was hosted in large pop-up dialogs, although the amount of information is not large. Users had to open and then close,open and close...Just for look over a few words.
I'm too tired of the game of opening and closing, help me...
DESIGN THINKING&METHODS
The 3 problems above all indicates different shortcomings of supporting users FIND information.
Finding something is such a common action which happens in our daily life all the time.
Imagine finding a pair of socks.FINGING is combined by 2 parts basically:
🏃♀️2.Reaching out
-Stand up
-Walk to grab it
💡1.Recognize where it is
-In my drawer?
-On the bed?
-On the floor?
The 2 parts above indicates design optimization methods：
Cognitive level
Physical level
1.Enhance mental anchors
Memorize information locations better.
2.Lower physical effort
Reduce long operation patterns.
DESIGN OUTPUT
Before
Problem 1. Unreasonable page layout
AFTER
Brand New Modular Layout
In the new version, I discarded the old long long list layout, and reorganized modules in one screen.Compared with long list layout, module layout could contribute more to users' muscle memory.
I placed different modules from top to bottom/left to right based on their priority.In this way, users can memorize the location unconsciously, and reach information faster.
✨Mental anchors settled
Fixed modules, build muscle memory
Space efficiency had been improved significantly.There would be no longer blank wasted space and tedious scrolling.
Haha, No longer need to scroll up and down！
✨Screen efficiency release
200+%
All the Information reorganized in one page
Before
Problem 2. Information lacks hierarchy
All the information were at the same level,just like an Excel sheet❓...
AFTER
Sort out information hierarchy logically
In the previous version, all the text fields were laid out flat without logical relationship.So I sorted out fields with product manager and business side,basing on 3 sorting logics：
0. Default
text fields
text fields
text fields
text fields
text fields
text fields
text fields
text fields
text fields
text fields
text fields
text fields
text fields
text fields
text fields
text fields
text fields
text fields
text fields
text fields
Step1.Close or not
text fields
text fields
text fields
text fields
text fields
text fields
text fields
text fields
text fields
text fields
text fields
text fields
text fields
text fields
text fields
text fields
text fields
text fields
text fields
text fields
Step2.Sequential
text fields5
text fields6
text fields1
text fields2
text fields3
text fields4
text fields1
text fields2
text fields3
text fields4
text fields1
text fields2
text fields3
text fields5
text fields6
text fields1
text fields2
text fields3
text fields4
text fields7
Step3.Containment
text fields1+text fields2
text fields5
text fields6
text fields3+text fields4
text fields4
text fields3
text fields1+text fields2
text fields1
text fields2
text fields3
text fields1+text fields2
text fields3+text fields4
text fields6
text fields5
text fields7
For example, the old logistics module was just a list filled with text fields while the new version has a clear hierarchy, not just a “straightforward narrative”.
Nice!No longer looks like a sheet of excel!
Step1. Close relationship
Before
Problem 3. Inappropriate information container
I'm too tired of the game of opening and closing, help me...
AFTER
Choose suitable information containers
Instead of popup dialogues, popovers are more appropriate view for details page.They are less interruptive, cause fewer effort than open&close, and won't obscure too much other information.
No need to keep opening and closing！Oh yeah！
· What's more: Specific guideline
To make sure the usability of popovers, I also built up detailed guidelines.For example, limit the orientation and position of them, covering the parent information as little as possible.
· What's more: Different users expectations-different icons
In the old version, no matter opened a dialogue or a new page, there were all text links UI style. Everytime user clicked, they had no idea what would open on the screen.
In the new version, I use a jump out icon to aware users they would land in a new page.When open a popover, I still use text links.
✨Design results: Enhanced the efficiency of FINDING,
improved the cost-effectiveness for the company.
38
Reduced manpower/day
37.6%
Reduced page dwell time
13%
Reduced bounce rate
7s
Reduced call duration
75%
Consumer Satisfaction
60.3%
Consumer Satisfaction