top of page

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.

Old-Screens.jpg
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
CXC Personas-Clair.jpg

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.

CXC Personas-Ron.jpg

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. 

CXC Personas-Sharisse.jpg

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.

CXC Personas-Martin.jpg

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
CXC UserJourney-Clair_edited.jpg

Clair

Goal:

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

CXC UserJourney-Ron_edited.jpg

Ron

Goal: 

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

CXC UserJourney-Sharisse_edited.jpg

Sharisse

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

CXC UserJourney-Martin_edited.jpg

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.

User-Flow-CXC.jpg
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.

paper-wires.jpg
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.

low-def-comps-CXC.jpg
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

CXC Personas-Clair.jpg

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.

CXC Personas-Ron.jpg

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. 

CXC Personas-Sharisse.jpg

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.

CXC Personas-Martin.jpg

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
User-Flow-CXC.jpg
low-def-comps-CXC.jpg
paper-wires.jpg
CXC UserJourney-Clair_edited.jpg

Clair

Goal:

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

CXC UserJourney-Ron_edited.jpg

Ron

Goal: 

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

CXC UserJourney-Sharisse_edited.jpg

Sharisse

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

CXC UserJourney-Martin_edited.jpg

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.

Old-Screens.jpg
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.

comparison-analisys-CXC.jpg
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

Styles-CXC.jpg
Styles-CXC.jpg
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.