Work
Customer
Experience Center (CXC)



Overview
CXC is a desktop software that enables Scorpion agents – 30 in Dallas and 30 in Manila – to provide chat support to businesses, either partially or fully. The software allows agents to retrieve business information and communicate it to customers through chat.
Project Duration
July 2021–February 2022
Product Statement
The existing design for finding client information was outdated and convoluted, making it difficult for agents to chat with customers effectively. Some basic elements were already established, but they needed to be rearranged and simplified.
Goal
Improve the CXC product so agents can deliver better service to customers through chat, enabling them to access relevant information quickly and easily, while managing multiple chat sessions at the same time. This will enhance the customer satisfaction and loyalty, as well as the agent productivity and efficiency.
My Role: Lead Product Designer
During the initial phase of the project, I contributed to user research. However, my primary responsibilities were during the interaction and visual design phase. Here, I created wireframes, hi-def comps, constructed prototypes for testing, established a design system, and provided support during usability study interviews.
Design Process
Research and Discovery
To start on the preliminary research, my colleague and I organized a session with the product's stakeholders to understand what they wanted to achieve with the new design. The stakeholders demonstrated how chat agents work with the current dashboard and what challenges they encounter on a daily basis.
To find out the main issues with the current design, we conducted a research study. We defined the research goals and recruited agents who use the CXC dashboard every day for a qualitative interview. We distributed a survey with ten questions to 20 agents and selected five of them for a Zoom session.
We conducted interviews with the agents and learned about their main challenges. We created four personas based on the insights we gained: Two personas reflected the team in Dallas, TX and the other two reflected the team in Manilla. We defined the users' problems, formulated hypothesis and proceeded to the ideation phase with some valuable data to inspire our brainstorming.

Pain Points
1
Need to covert more inquiries to leads
The user has requested a more structured and user-friendly dashboard layout. The new screens will be redesigned to meet the user's needs.
2
KB Info is not Easy to Access
Knowledgebase content is not well-separated, which hinders information retrieval. Using text hierarchy and submenus will improve content organization.
3
Business Location Is Difficult to Access
The location dropdown is not showing the complete name of the location, which causes confusion. A tab with all the locations and their addresses would be helpful.
4
Interaction with chats cards is difficult
The left vertical nav bar shows chat cards as icons. Agents would be able to interact with customers more easily with larger cards will contain actions like Transfer/End Chat.
Personas

Clair
Problem Statement:
Clair is a novice Chat Support Agent in the Manilla team who needs to quickly search, find and relay information via chat because customers need to know specific information about the businesses and improve her performance.
Hypothesis:
If Clair can easily navigate the dashboard layout, then she’ll be able to answer chats quickly and improve her performance.

Ron
Problem Statement:
Ron is a Conversation Specialist in the Dallas team who needs a search feature in the knowledgebase tab because he must search and find important information quickly.
Hypothesis: If Ron can use a search feature in knowledgebase, then he can find customer requested info about the business more quickly.

Sharisse
Problem Statement:
Sharisse is a Conversation Specialist Manager in the Dallas team who needs to be able to se a clear warning on the dashboard at because she needs to help agents answer chats during peak times.
Hypothesis: If Sharisse can check on the chat volume while logged off, then she’ll be able to make herself available quickly to help agents at peak times.

Martin
Problem Statement:
Martin is a Conversation Specialist in the Manilla team who needs to se a timestamp counter on each chat card because he wants to prioritize chats that have been on hold the longest.
Hypothesis: If Martin sees a time counter on the chats cards, then he will see the chat has been on hold the longest and will be able to decide which needs his attention first.
User Jouneys

Clair
Goal:
To be able to scroll through knowledgebase and find information quickly.

Ron
Goal:
See business location and be able to change it, then search knowledge base to find answer to customer inquiry.

Sharisse
Goal:
To be able to check chat queue so she can help agents answer chats at peak times.

Martin
Goal:
To be able to prioritize chats by answering the chat that has been waiting the longest.
Ideation
Wireframes and Flows
The design phase was the next step after we finished ideating. I was in charge of this part, since it's my main expertise. The user flow was straightforward, and once established, I quickly sketched up some paper wireframes, then moved on to building low-def comps. After approval from the stakeholders, I then created high-fidelity designs, defined styles and UI patterns, while following accessibility guidelines.

Paper Wires
I sketched up some possible layouts and showed them to my coleague. We quickly decided on the best features from each design and merged them into a final version.

Digital Wires
Next, I created low-fidelity comps, defining the dimensions and positions of the components. I then showed the screen to stakeholders and got their approval.

Pain Points
Research and Discovery
To start on the preliminary research, my colleague and I organized a session with the product's stakeholders to understand what they wanted to achieve with the new design. The stakeholders demonstrated how chat agents work with the current dashboard and what challenges they encounter on a daily basis.
To find out the main issues with the current design, we conducted a research study. We defined the research goals and recruited agents who use the CXC dashboard every day for a qualitative interview. We distributed a survey with ten questions to 20 agents and selected five of them for a Zoom session.
We conducted interviews with the agents and learned about their main challenges. We created four personas based on the insights we gained: Two personas reflected the team in Dallas, TX and the other two reflected the team in Manilla. We defined the users' problems, formulated hypothesis and proceeded to the ideation phase with some valuable data to inspire our brainstorming.
Design Process

Clair
Problem Statement:
Clair is a novice Chat Support Agent in the Manilla team who needs to quickly search, find and relay information via chat because customers need to know specific information about the businesses and improve her performance.
Hypothesis:
If Clair can easily navigate the dashboard layout, then she’ll be able to answer chats quickly and improve her performance.

Ron
Problem Statement:
Ron is a Conversation Specialist in the Dallas team who needs a search feature in the knowledgebase tab because he must search and find important information quickly.
Hypothesis: If Ron can use a search feature in knowledgebase, then he can find customer requested info about the business more quickly.

Sharisse
Problem Statement:
Sharisse is a Conversation Specialist Manager in the Dallas team who needs to be able to se a clear warning on the dashboard at because she needs to help agents answer chats during peak times.
Hypothesis: If Sharisse can check on the chat volume while logged off, then she’ll be able to make herself available quickly to help agents at peak times.

Martin
Problem Statement:
Martin is a Conversation Specialist in the Manilla team who needs to se a timestamp counter on each chat card because he wants to prioritize chats that have been on hold the longest.
Hypothesis: If Martin sees a time counter on the chats cards, then he will see the chat has been on hold the longest and will be able to decide which needs his attention first.
1
Need to covert more inquiries to leads
The user has requested a more structured and user-friendly dashboard layout. The new screens will be redesigned to meet the user's needs.
2
KB Info is not Easy to Access
Knowledgebase content is not well-separated, which hinders information retrieval. Using text hierarchy and submenus will improve content organization.
3
Business Location Is Difficult to Access
The location dropdown is not showing the complete name of the location, which causes confusion. A tab with all the locations and their addresses would be helpful.
4
Interaction with chats cards is difficult
The left vertical nav bar shows chat cards as icons. Agents would be able to interact with customers more easily with larger cards will contain actions like Transfer/End Chat.
Personas




Clair
Goal:
To be able to scroll through knowledgebase and find information quickly.

Ron
Goal:
See business location and be able to change it, then search knowledge base to find answer to customer inquiry.

Sharisse
Goal:
To be able to check chat queue so she can help agents answer chats at peak times.

Martin
Goal:
To be able to prioritize chats by answering the chat that has been waiting the longest.
User Jouneys
Pain Points
Ideation
Wireframes and Flows
The design phase was the next step after we finished ideating. I was in charge of this part, since it's my main expertise. The user flow was straightforward, and once established, I quickly sketched up some paper wireframes, then moved on to building low-def comps. After approval from the stakeholders, I then created high-fidelity designs, defined styles and UI patterns, while following accessibility guidelines.

Paper Wires
I sketched up some possible layouts and showed them to my coleague. We quickly decided on the best features from each design and merged them into a final version.
Digital Wires
Next, I created low-fidelity comps, defining the dimensions and positions of the components. I then showed the screen to stakeholders and got their approval.
UI Ideas
Since this was a product for internal use, I spent little time doing a thorough analysis of the competition. Instead, I looked for some online sources to inspire me for the new UI designs.

Styles
I created new patterns and styles and incorporated icons from Scorpion's existing collection.
Accessibility Considerations
I followed the industry's Web Content Accessibility Guidelines to develop the new designs:
-
Legible text size
-
Colors with optimal contrast ratio
-
Navigable interface using keyboard


High-Fidelity Comps
The final designs were polished and refined, combining simplicity and elegance. The stakeholders were delighted and gave us the green light to test them with the real users, the agents.
The Final Product
With the data collected from the interviews, we were able to address the users pain points in design and make the necessary adjustments in time for development. Now, Scorpion agents have a brand-new, user-centered designed tool that caters to their needs.