Our Projects
Customer
Experience Center (CXC)
Overview
The Customer Experience Center (CXC) is a desktop application designed to empower Scorpion’s support agents—30 in Dallas and 30 in Manila—to provide efficient chat support to businesses. This tool enables agents to access and relay business information seamlessly during customer interactions.
Project Duration
July 2021–February 2022
Product Statement
The existing CXC interface was outdated and convoluted, hindering agents from effectively assisting customers. While some foundational elements were in place, there was a pressing need to reorganize and simplify the user experience to enhance agent productivity and customer satisfaction.
Goal
Our objective was to revamp the CXC platform to enable agents to deliver superior customer service via chat. This involved streamlining access to pertinent information, facilitating the management of multiple chat sessions, and ultimately boosting customer satisfaction, loyalty, and agent efficiency.
Our Role
As the lead product design agency, genioLAB spearheaded the user research phase and took primary responsibility for interaction and visual design. Our contributions included creating wireframes, high-fidelity compositions, interactive prototypes for testing, establishing a cohesive design system, and supporting usability study interviews.
Design Process
Research and Discovery
To initiate the redesign, genioLAB organized sessions with key stakeholders to understand their objectives for the new interface. Stakeholders provided demonstrations of the current dashboard, highlighting daily challenges faced by chat agents.
We conducted a comprehensive research study to identify primary issues with the existing design. This involved defining research goals and recruiting daily users of the CXC dashboard for qualitative interviews. A survey comprising ten questions was distributed to 20 agents, from which five participants were selected for in-depth Zoom interviews.
Insights from these interviews led to the creation of four personas representing the teams in Dallas and Manila. These personas helped us define user problems, formulate hypotheses, and proceed to the ideation phase with valuable data to inform our brainstorming sessions.
Pain Points
1
Need to covert more inquiries to leads
Agents required a more structured and user-friendly dashboard layout to efficiently convert customer inquiries into leads.
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
With clear goals and research insights in hand, genioLAB facilitated a collaborative ideation phase focused on simplifying the agent workflow and increasing efficiency across chat sessions. The team conducted design sprints to explore potential layout structures, interaction patterns, and information hierarchies. Ideas were vetted against the user personas developed during the research phase, ensuring every proposed solution was grounded in real-world use cases. From this, we identified the core components that would drive the new CXC experience: chat prioritization, lead conversion tools, and streamlined access to customer data.
Wireframes and Flows
Once ideation was complete, genioLAB transitioned into the design phase. Our team led the creation of user flows and low-fidelity wireframes, quickly sketching out initial concepts to visualize how agents would navigate the new dashboard. These early-stage sketches helped define the overall structure of the application and how key tasks would be completed.
After internal review and alignment, we moved into creating low-definition comps, which were shared with stakeholders for feedback. With approvals in place, we developed high-fidelity screen designs, defined UI styles and interaction patterns, and ensured compliance with accessibility standards. The end result was a clean, intuitive interface tailored to the high-volume, multitasking environment of customer support teams.
Paper Wires
To kick off the wireframing process, we explored several layout variations through rapid sketching sessions. genioLAB designers reviewed concepts collaboratively, quickly identifying the most effective elements from each iteration. These features were then combined into a single, refined layout that served as the foundation for our digital prototypes. This agile approach helped us align quickly and move confidently into the next stage of design.
Digital Wires
After aligning on layout direction through sketches, genioLAB created a set of low-fidelity digital comps to define the dimensions, hierarchy, and structure of each component. These wireframes illustrated key screens and interactions in a simplified format, allowing stakeholders to focus on functionality and user flow. After presenting the designs, we gathered feedback, made refinements, and received approval to move forward into visual design.
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 Explorations
Because the Customer Experience Center was an internal tool, our UI approach prioritized functionality and clarity over market differentiation. Rather than conducting extensive competitor analysis, genioLAB gathered inspiration from trusted design sources and internal platforms, pulling elements that emphasized simplicity, speed, and task-based workflows—core to the needs of Scorpion’s agent teams.
Styles
We developed new design patterns and interface styles that felt modern yet cohesive with Scorpion’s existing visual system. The UI incorporated elements from the company’s established icon set and evolved into a consistent, modular component library—one that could scale across future screens while supporting maintainability and clarity.
Accessibility Considerations
Accessibility was a core pillar of our design process. genioLAB followed Web Content Accessibility Guidelines (WCAG) to ensure the product was inclusive and usable by all support agents. Key considerations included:
-
Legible text sizes for different screen resolutions
-
Sufficient color contrast for all interface elements
-
Keyboard-navigable layouts to support assistive technologies
High-Fidelity Comps
The final UI was polished and refined to reflect a balance of elegance and clarity—supporting agents in high-stress, fast-paced workflows. The design introduced intuitive visual cues, clean layouts, and functional responsiveness across screen sizes. Stakeholders were highly satisfied with the outcome and gave the green light to proceed with usability testing.
User Testing and Validation
Even though the user group was relatively small, validating the design with real agents was essential. we worked closely with Scorpion’s UX Researcher to ensure the new UX and UI patterns aligned with the agents’ real-world needs. The focus was on speed, clarity, and the ability to access critical client information without friction.
Preparation and Goals
-
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
-
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
To simulate real-world scenarios, genioLAB designed an interactive prototype in Adobe XD. The prototype featured five tasks aligned with key workflows support agents perform daily. Each task was used to test comprehension, efficiency, and the discoverability of critical features within the redesigned dashboard.
.jpg)
Interview 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.
Recommendations: N/A
2
Chat Cards 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
Recommendations:
-
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.
Recommendations:
While evidence-based decisions were still evolving, my team and I collaborated with engineering, product marketing, and data science teams to develop a plan for integrating research insights into daily workflows.
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.
Recommendations: N/A
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
Service Price and Fees
-
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
Refining Designs
Following usability testing, genioLAB reviewed and refined the high-fidelity designs to address minor usability concerns surfaced during the study. The primary feedback focused on the way content was organized and presented—specifically how quickly agents could scan for relevant information. Adjustments were made to spacing, labeling, and hierarchy to enhance readability and reduce friction in high-volume workflows.
Design System and Components
Once final screen designs were approved, we built out a robust design system to support scalable development and consistent implementation. This included a comprehensive component library and style guide, along with annotations detailing animation behavior, interaction states, and accessibility guidelines. The design system was handed off to the engineering team with full documentation to ensure seamless integration and maintain fidelity through development.
The Final Product
Armed with insights from user interviews and research, genioLAB delivered a redesigned Customer Experience Center that directly addressed agent pain points and aligned with real-world use. The new interface was clean, intuitive, and tailored to the agents’ needs—giving them the tools to work more efficiently and with greater confidence. The final product was well-positioned for a smooth handoff into development.
Takeaways
Impact
Feedback from agents was overwhelmingly positive. The new features and UI enhancements were praised for improving clarity and ease of use. Agents shared that, for the first time, the platform felt like it was designed for their workflow—not just layered on top of it. Across the board, teams reported being better equipped to manage conversations, locate critical information, and move through tasks with less effort and frustration.
Agency Learnings
Challenges: One of the biggest challenges was creating a simple, effective user experience that worked for a diverse set of agents—particularly for those based in the Philippines, where English was often a second language. Clear communication, visual cues, and content hierarchy were all critical to delivering a product that felt usable and intuitive for everyone.
Key Takeaways: This project reinforced a core principle at genioLAB: there is no such thing as a “small” audience. Although the product was intended for a relatively modest internal group of 60 agents, we approached the work with the same rigor as we would for a large-scale public platform. Conducting thorough research, testing our assumptions, and refining through iteration resulted in a product that agents genuinely embraced. Seeing their enthusiasm during testing validated the investment—and reminded us why user-centered design is always worth the effort.