Product Design: Scorpion - Customer Experience Center (CXC)
Work
Overview
CXC is a desktop software that enables Scorpion agents – 30 in Dallas and 30 in Manilla – 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
The Problem
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 Responsibilities
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.
User Research
Summary
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
Overall Layout Is 'Clunky'
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 Hard 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
Chat Cards Are Hard Interact with
The left vertical nav bar shows chat cards as icons. Agents can 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 Journeys
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.
Design
Summary
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
II sketched up some possible layouts and showed them to my coworker. 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
Hi-Def 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.
Usability Study
Summary
Though the audience was small, we still wanted to make sure the new design met the agents’ day-to-day needs. It was very important that the user understood the new UX/UI patterns and that they could access the client’s information very quickly.
Preparation
-
The team: UX Researcher led the study. I build the prototype, assisted on prepping and conducting interviews
-
Audience: 45-50 agents
-
Survey for participants selection – 8 questions
-
Information Goals:
-
Is the user able to login?
-
Is the user able to open a new communication/chat?
-
Is the user able to find the knowledge base tab?
-
Is the user able to locate a specific type of information in ‘knowledge base’?
-
Is the user able to see ‘important communication’ immediately?
-
Is user able to re-access ‘important communication’ once it has been closed?
-
Prototype
With the study goals set, I created a prototype in Adobe XD containing five different tasks for the user to complete.
Interviews Findings
-
Sessions: 8 half-hour sessions over 3 days
-
Participants: 8 agents (3 in Manila & 5 in Dallas, TX)
-
Tasks:
-
“Enable chat” UI
-
Find “services provided, referrals” (In Knowledge Base)
-
Find “business hours” Find “important information”
-
Find “billing email/phone”
-
Find “location costs & fees”
-
1
Enable Chat UI
-
All of the participants understood that they needed to toggle on availability to be able to access the chat UI.
-
All participants were able to successfully navigate to the chat screen.
2
Chat UI
-
All participants understood how to select a chat.
-
Users understood where they would enter information to respond to the customer and tried to click on the response. field in chat.
-
Color coding was mentioned several times by participants in both the demo and usability sessions.
Recommendations
-
Add visual cues to indicate how long the chat has been in session. Consider color, a time stamp or timer.
-
Consider listing chats in chronological order so user know which are oldest.
3
Services Provided, Referrals
-
All agents were able to successfully navigate to the Services Provided section and find Services
-
Users expected to find referrals under Services Provided, but some were unable to find it despite being in view of the screen.
Recommendations
-
Currently, referrals will state yes or no. Consider using similar direct language and relevant information/contacts following.
4
Important Information
-
All participants expected to find important information in the Knowledge Base.
-
Some users saw the banner with important information or recalled it from training.
-
Some expected the information to be it’s own section
Recommendation
-
Consider adding an “Important Information” tab/section in the Knowledge Base.
-
Consider labeling it “Important Information” because it is what the agents are familiar with.
5
Business Hours, Weekends
-
All agents were able to successfully navigate to the Services Provided section
-
Users expected to find referrals under Service Provided, but some were unable to find it despite being in view of the screen.
Recommendation
-
Currently, referrals will state yes or no. Consider using similar direct language and relevant information/contacts following.
6
Billing, Email, Phone
-
All participants were able to find Billing in the Knowledge Base, Business Info, Locations Hours
-
All participants were able to find the email and phone numbers
-
Some would refer customers directly to billing, others preferred to refer them to the POC to address the issue.
7
Locations
-
3 out of 8 participants went to the the Locations Section to find if the business had a location in a specific city.
-
The majority of the users went to Service Area within the Knowledge Base to find city information
-
Most would search by ZIP Code
Recommendations
-
Include this section and usage in training sessions. Agents perceived this section as static, not interactive and will need reinforcement.
-
Consider making number of locations more prominent.
8
Billing, Email, Phone
-
All of the participants went to Service Pricing and Fees in the Knowledge Base to find cost and fees.
-
After discovering that individual prices/pricing structure was not listed, many would refer client to POC to let them know price.
-
Some were confused about some of the phrasing (consultation vs estimate), but were able to answer the customer’s question.
Recommendations
-
Consider best practice guidelines for standardizing terms when setting up client accounts
Refined Designs
Summary
I made some adjustments to the comps to address the few design and usability issues that were raised. The main feedback from the study focused on how the content was arranged and presented.
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.
Delivery to Dev
Once the hi-def screens were updated and signed-off, I created all components and style guides, which included annotations of the components' animations and expected behaviors. I then handed them over to the developers.
Takeaways
Impact
Agents were thrilled with the designs and the product's new capabilities. The overall consensus was that they can finally start using the new features to help them improve the productivity.
What I Learned
There are no small audiences. When I was first handed this project, I was told the target audience was an internal group of 60 agents. However, our team decided to conduct thorough research and studies to ensure we created a product that met the agent's needs. It was rewarding to witness the agent's enthusiasm for the new designs during the usability study. That justified the extra time I invested in the project.