UX RESEARCH | UX DESIGN | UI DESIGN | USABILITY TEST | DESIGN SYSTEM
In the evolving landscape of customer service, Client aimed to unify their agent assistant on both voice and chat platform by making it one unified entity. The goal was to improve the efficiency of agents by simplifying the interface, reduce response times, and enhance overall customer satisfaction. This case study outlines the entire process of setting up a design system for conversational experience, highlighting research findings, challenges, results, and key learnings.
Note: To comply with my non-disclosure agreement, I have omitted confidential information in this case study. All information in this case study is my own and does not necessarily reflect the views of the platform
Overview
This project aimed to consolidate all the agent assistants used across five different platforms into a single, unified entity with a simplified, cohesive user interface. The goal was to establish a robust foundation for CX consistency, future scalability, digital adoption and build cadence across all teams and deliver cost reduction, lesser time to market and improved rep satisfaction in medium to long term.
This simplified experience would reduce agent training time, eliminate redundancy, and streamline information access.
Each Agent Assistant pulled information from a central knowledge base, but the interfaces and interactions varied widely, creating a fragmented user experience. Our mission was to standardize these interfaces without losing platform-specific functionalities.
Role: Senior UX Designer focused on auditing the current agent assistant and build one Design system for assisted channels.
Duration: January 2024 – May 2024
Tools & Technologies: Figma, Figjam, Google suite, Sketch, Invision
"Vision - To empower agents with a seamless, intuitive interface that unifies all support interactions across platforms, reducing complexity, enhancing efficiency, and enabling faster, more effective customer service."
Step 1 - Understand
Problem Statement
Each platform has its own interface, design patterns, and workflows, leading to inconsistent user experiences, increased cognitive load for agents, prolonged training times, and inefficiencies in customer service delivery. This fragmentation results in lower customer satisfaction and higher operational costs.
How might we create a unified design system that provides a consistent, intuitive experience across all platforms, simplifies agent workflows, reduces training time, and enhances overall customer satisfaction?
Business Challenge
Fragmented User Experience
Each chatbot currently operates with its own interface, design patterns, and workflows, causing inconsistency across platforms.
Inefficiencies in Knowledge Retrieval
The existing chatbots provide knowledge base links and information but lack a unified knowledge retrieval system.
Scalability Concerns
Adding new features and functionalities to multiple distinct chatbots becomes complex, time-consuming, and resource-intensive, posing scalability issues.
Maintenance Costs
Maintaining multiple agent assistant is costly and labor-intensive. Each chatbot has unique technical dependencies, which increases operational costs and risks of compatibility issues.
Key Business Priority
Consistency
Ensure a uniform experience across all platforms to reduce agent cognitive load and improve customer satisfaction
Scalability
Design a system that can easily adapt to future updates and expansions.
Efficiency
Streamline agent workflows to reduce query resolution times and improve overall service quality.
Training
Minimize training requirements by creating a system that is intuitive and easy to learn.
Enhance Operational Efficiency
Streamline support operations by reducing the time agents spend on agent assistant.
My Role
As the senior UX designer, I was responsible for designing a seamless, cohesive interface that balances agent needs, business goals, and operational requirements. I focused on UX audit and identified the UI patterns
My Core Priorities
Design a Unified User Interface (UI) and Experience
Develop a single, intuitive interface that consolidates all existing chatbots into one, ensuring agents have a clear, consistent experience regardless of the platform they are supporting.
Create standardized design patterns to reduce cognitive load, improve ease of use, and provide a consistent look and feel that aligns with brand standards.
Conduct Extensive User Research and Testing
Lead user research initiatives, including agent feedback, stakeholders workshop to gather insights into agent pain points, workflows, and desired improvements.
Use these insights to inform design decisions, focusing on features that will simplify processes, reduce errors, and boost efficiency.
Optimize User Flows and Reduce Cognitive Load
Map and refine user flows to create a simplified, efficient process
Introduce intuitive navigation and layout patterns that streamline the interaction process
Collaborate with Stakeholders and Align on Business Goals
Work closely with stakeholders across business, product, and technical teams to align design priorities with business objectives
Present design concepts and prototypes to stakeholders, gathering their input and securing approvals at each stage of the project.
Document and Guide Development
Provide comprehensive documentation on UI components, design patterns, and user flows, collaborating with development teams to ensure accurate implementation of the designs.
Act as a UX advocate during development to address any challenges and maintain design integrity through the build process.
Develop a unified, streamlined UI for all chatbot interactions, reducing complexity and enhancing agent efficiency.
Principles behind one Entity & Multiple Persona
Step 2 - Define
Priorities
Objective | Expected Outcomes |
Identify patterns, inconsistencies in workflows, UI interactions, and navigation. | A comprehensive understanding of user needs, revealing pain points that impact agent efficiency |
Document business requirements, key workflows | A user-friendly interface with reduced error rates, aligning functionality across platforms. |
Create user flow diagrams that capture end-to-end journeys | Increased agent productivity and improved customer satisfaction (CSAT) through streamlined workflows. |
Create a component library with flexible, reusable components | Enhanced design consistency and efficiency in development by reusing adaptable components. |
Identify key UI elements such as buttons, icons, form fields, modals, and tooltips to ensure consistency. | Visual and functional consistency across the platform, improving usability and reducing training time. |
Define a core navigation framework | A unified navigation experience that minimizes cognitive load and simplifies task flows for agents. |
Build prototypes that showcase core features and workflows in the unified design | Tangible models of the unified design to gather stakeholder feedback and validate usability before full implementation. |
What are the PLATFORMS?
Mobile Voice
When a customer contacts a client representative via a voice call on a mobile network, the representative relies on the Agent Assistant for support during the call. The Agent Assistant provides real-time access to knowledge articles, step-by-step guidance, and relevant information on common issues, reducing average handling time and improving response accuracy, which helps agents resolve customer issues more efficiently.
Mobile Messaging
When a customer contacts a client representative via chat on a mobile network, the representative utilizes the Agent Assistant for quick, relevant content, including preset responses, guided workflows, and personalized support options based on customer context. This enables agents to respond promptly and consistently, enhancing customer satisfaction and ensuring continuity across interactions.
Fios Voice
When a customer contacts a client representative via a voice call on the FiOS network, the representative relies on the Agent Assistant for real-time access to relevant resources, such as guided troubleshooting steps, knowledge articles, and personalized information based on the customer’s service history. This enables agents to provide accurate and efficient support, reducing call handling time and improving the overall customer experience.
Fios Messaging
FiOS Messaging provides support through messaging channels for FiOS customers. The Agent Assistant plays a vital role by equipping agents with tailored content and responses for FiOS-related inquiries. It enables agents to efficiently manage common requests like billing, technical support, and service upgrades, ensuring accurate and prompt resolutions.
Retail, Inside & Indirect
This includes in-store support, partner/indirect agents who support client's customers across various service categories. In these environments, the Agent Assistant provides agents with real-time information on promotions, account details, and product recommendations. It also assists with service activations and troubleshooting, streamlining workflows and creating a consistent experience across Verizon’s retail and partner channels.
Who are the USERS?
Frontline Voice & Chat Agents: These are the customer service representatives who connects with customer daily and help them solve their issues on call or through chat. They rely on chatbot interaction to understand the context of the customer's problem and provide appropriate solutions.
Sales Agents Using POS Device: Sales representatives might use chatbots to generate leads, provide product information, or assist in converting inquiries into sales, particularly for online or automated sales channels.
Retail Store Agents: They are using chatbot in their day to day work to help customer to buy new products, services upgrading plan and more
Handling customer case like Bill handling, order management, troubleshooting, account management, service activation & more...
.
User Pain Point
Different design components and pattern for each platform, increase complexity
Varied workflows across platforms lead to confusion and inefficiency
Difficulty in quickly accessing relevant knowledge base articles due to non-standardized navigation and search functionalities.
Remembering different processes and interfaces increases mental fatigue and reduces overall productivity.
Inconsistent UI interactions and workflows result in more frequent mistakes when handling customer queries.
Data Analysis
In the Data Analysis phase, we concentrated on collecting and interpreting crucial data from agent feedback, customer intents, and call listening. This analysis guided our design choices and help us build design system for one entity. We identified user needs and preferences, highlighted pain points, gathered behavioral insights, and confirmed key assumptions.
UX Audit
The UX audit served as a comprehensive evaluation of the agent assistant platforms, aiming to identify critical issues, inefficiencies, and inconsistencies. This process involved conducting heuristic analysis, and analyzing key performance metrics. By delving into the user experience across different platforms, the audit revealed several crucial insights that shaped our approach to unification.
Customer Cases
Bill Increase
Account management
Troubleshooting
Service activation & Configuration
Perks
Feedback Mechanism
Conversation Summarization
Upselling & Cross selling
Plans & Promos
Training and support
Popular tools
more+
Platforms Common Capabilities
Knowledgebase integration
Typeahead suggestion - terms & direct links
Deep links - Internal & external
Predictive customer insights - IVR speech tag, RCR insights, Insight proposition
Account contextualization - SKU locator, store locator, billing details, plan details...
CCAI conversation flow
Quick launch mechanism
Proactive suggestions
feedback - proactive and reactive
more+
The UX audit surfaced several critical insights that highlighted opportunities for improvement across the agent assistant platform:
Workflow Inconsistencies
Encountered varied workflows, which increased handling times and created confusion, especially for those managing multiple customer segments. Standardizing these workflows became a priority to enhance usability and efficiency.
UI Fragmentation
The audit highlighted inconsistencies in visual elements—such as buttons, icons, and color schemes—across platforms. These disparities led to usability challenges and increase cognitive load and reduce efficiency.
Redundant Processes
We identified several redundant actions that required agents to perform extra steps to complete tasks, leading to longer Average Handling Times (AHT). Reducing or eliminating these steps was key to creating a more seamless user experience.
Navigation Challenges
The audit revealed that agents often struggled to locate essential information due to cluttered menus and non-intuitive pathways. Simplifying navigation and organizing information into easily accessible sections became a critical design objective.
Information Overload
Interfaces displayed excessive information on some screens, overwhelming agents and slowing down decision-making. Reducing cognitive load by prioritizing relevant information was essential for improving agent performance.
Inconsistent Interaction Patterns
The audit identified inconsistencies in how agents interacted with the platforms, with varying patterns in actions like form submissions, feedback flow and task completions. Aligning these interactions would provide agents with a more predictable and user-friendly experience.
Limited Personalization Options
The audit revealed a lack of personalization for different agent roles and tasks, which restricted agents from optimizing the tool for their unique needs. Introducing customizable elements became a focus.
Delayed Response Times
Slow response times were noted due to fragmented access to information. Centralizing knowledge and providing quick access to frequently used resources were necessary to improve response efficiency.
more+
These insights provided a foundation for a more cohesive, streamlined design that would address these pain points, enhance user satisfaction, and increase agent efficiency. By addressing these areas, the unification effort aimed to create a consistent, intuitive platform that would significantly improve the agent experience across all assistant platforms.
Existing Patterns & UI Element
Patterns | Description | Elements |
Personalized Greetings | AA greets the user by name and share intent/keyword based customer information and create a more personalized and enagaging exp for reps | User Data, account history, conversational text, table view |
Conversational UI | It uses a simple message exchange interface including text, links, interactive elements | Chat window, user Input area, send button, text, table, list |
Header | Multiple icons with text links for quick actions | Icons - notification, text |
Smart Reply | AI generated conversation text with CTA | Text Links, CTA |
Typeahead suggestion | share suggestions while user types in input box | Suggestions box, CTA, Links |
Deeplinks | Used in search or guided experience while sharing information to the rep in the form of text link | Text Links |
Guided conversation/ CCAI flow | This pattern guide the user through a series of predefined responses or options. This can make the conversation more efficient and help avoiding misunderstandings and errors | pre defined text, responses, predefined CTA |
Progress Indication | AA suggest something afyer rep types in, indicating progress helps in manageing user experiences | Progress Bar |
Error handling | If the bot doesn't understand a user input, it should respond in a way that helps in guideing the rep back on track | Error Message, Alerts |
Interactive Elements | Use of button, tiles, text links, make the interaction more engageing and intutive | Buttons, Sliders, Forms |
Hints or Tooltips | These provide additional information about a function or feature before a user interacts with it | Tooltips |
& More..
Similarities
Common Customer Case
Common Capabilities
Agents needs & frustration
Google cloud platform
Uniqueness
Variety of device sizes
UI level unique features
Proposed Solution
Centralized Design Language
Create a cohesive design system that standardizes visual elements, interaction patterns, and user interface components across all platforms (Voice, Chat, and POS).
Seamless Cross-Platform Experience
The assistant will be designed with a unified interface and consistent interaction patterns for different platforms, ensuring a smooth transition between different channels.
Reusable Components
Develop a library of modular, reusable components (e.g., buttons, forms, dropdowns, modals) that can be consistently implemented across platforms.
Consistent User Interface (UI)
Ensure that all platforms follow the same UI guidelines, making it easier for agents to transition between different platforms without retraining.
Step 3 - Design
Defining the Design System Structure
The design choices were driven by the need to reduce cognitive load, streamline workflows, and create a scalable system that can evolve with the company’s needs. Each decision was made with the goal of aligning the system's functionality with the needs of the agents and the business objectives of Client
With a solid understanding of requirements, we established the foundational elements and structure for our AA design system
All the Basic things were already there in clients DS, we moved further and started designing the new one with in the guidelines of brand and started building from scratch for conversational library
Core Design Tokens
To ensure consistency, we developed tokens for basic properties like color, typography, spacing, borders, and shadows. These tokens provided a universal language for styling across components
Color Tokens
We defined color tokens for different UI elements like primary, secondary, success, error, and neutral tones, allowing agents to instantly recognize different states and functions.
Typography Tokens
Font families, sizes, and weights were tokenized, ensuring readable and accessible typography for headings, body text, and labels.
Spacing Tokens
Defined Consistent spacing tokens which standardized padding and margins across components, contributing to a balanced and organized layout.
Border Radius & Shadow Tokens
Created tokens for borders and shadows to give the design a cohesive feel. These tokens added depth and emphasis to elements, creating a polished, modern appearance.
Building Basic Components
Using these foundational tokens, we began designing the core components of the library (used the previous components as well by editing it)
Buttons
Designed with multiple states - default, hover, active, disabled, and focused.
Created variants for primary, secondary, ghost, and icon-only buttons to cater to different use cases.
Documented usage guidelines for accessibility, such as focus outlines, ensuring agents could use buttons easily.
Inputs
Developed input fields (text, dropdowns, checkboxes) with states for normal, active, error, success, disabled, and focused.
Provided size variants to meet different interface needs, with styles for outlined and filled versions.
Defined interactive animations using tokenized values for focus, typing, and error display, enhancing usability.
Avatars & Icons
Created avatar variants with different sizes, shapes, and placeholder options.
Established a tokenized icon library with standardized sizes for consistent usage across various features.
Provided usage documentation, ensuring avatars and icons were visually aligned and accessible.
Creating Advanced Components with Multiple States
To enhance the functionality of the platform, we built more complex components with multiple states and interactive feedback.
Chat Bubbles:
Designed customer and agent chat bubbles with states for sending, sent, delivered, and read statuses.
Tokenized padding, colors, and fonts to adapt chat bubbles to different contexts (agent or customer).
Added typing indicators and read receipt animations for seamless user experience.
Notification Toasters:
Created toaster notifications for various alerts (info, warning, error, success) with states for appearing, dismissing, and timed fade-outs.
Integrated close and link actions with tokenized animation speeds for consistent interactions.
Modals and Dialogs:
Designed modals in small, medium, and large sizes, with confirm and info-only variations.
Tokenized dimensions, overlay colors, and border-radius values for a cohesive feel.
Added focus management and keyboard accessibility, enhancing usability for agents.
Building Widgets and Components
Our component library also included more advanced widgets to support agent workflows and increase productivity.
Agent Information Card:
Built cards with agent name, profile photo, status indicator, and contact options.
Created active and inactive states to reflect real-time agent availability.
Standardized colors, font styles, and icon sizes for consistency across cards.
Search Bar with Filters:
Developed an interactive search bar with clear and filter buttons.
Tokenized color, font, and spacing properties to ensure uniformity with the overall system.
Designed states for empty, populated, and focused searches, along with dropdown animations for filters.
Help & FAQ Sidebar:
Created collapsible sections for frequently asked questions and links to resources.
Tokenized spacing, borders, and fonts to align with the design language.
Included hover and open/close animations to improve usability.
Interaction Patterns
Consistent Navigation Flow
A uniform navigation structure was established across all platforms. This included a fixed navigation bar with key actions to reduce cognitive load and make it easier for agents to find information quickly.
Unified Search Functionality
A standardized search bar was implemented at the top of every interface, with predictive text and auto-suggestions to streamline the process of finding customer information, reducing the time needed to access relevant data.
Sequential Task Flow
Task flows were standardized, ensuring that the sequence of actions (e.g., identifying customer issues, proposing solutions, confirming actions) remained consistent across platforms to provide a logical, easy-to-follow sequence that mirrors the natural problem-solving process.
Visual Design Patterns
Typography and Hierarchy
A consistent typography scale and hierarchy were established, using a clear differentiation between headings, subheadings, body text, and labels to enhance readability and ensure that critical information is easily accessible.
Color Scheme
A unified color palette was applied, with specific colors assigned to different types of information (e.g., green for confirmed actions, red for errors, blue for informational prompts) to maintain brand consistency and provide visual cues that aid in quick decision-making.
Button Styles
Standardized button designs were introduced, including size, shape, color, and hover state to ensure that buttons are easily recognizable and functionally consistent across all platforms.
Interaction Feedback Patterns
Standardized Feedback Messages
Unified success, error, and informational messages were created with consistent styling to reduce confusion and make it clear what the next steps are after an action is taken.
Loading Indicators
Consistent loading indicators were used across all platforms, with a clear indication of background processes to improve transparency and reduce user anxiety by informing them that a process is ongoing.
Voice and Chat-Specific Patterns
Voice Command Prompts
Consistent voice command prompts were implemented, guiding agents through voice interactions with uniform language and structure to minimize errors and ensure that voice commands are easily understood and correctly executed.
Chat Interaction Blocks
Chat interaction was standardized with predefined text blocks, quick replies, and response templates to maintain a consistent tone of voice, reduce response time, and ensure that agents provide accurate information.
Component Patterns
Modular Components:
Reusable components such as buttons, dropdowns, modals, and forms were standardized and placed into a shared component library to ensure consistency in look and behavior, and to speed up the development process by reusing components across platforms.
Responsive Layouts
The design system included responsive layouts that could adapt to different screen sizes and devices, especially important for chat and POS platforms to maintain usability across various devices and ensure that the experience is consistent whether on desktop, tablet, or mobile.
Error Handling Patterns
Error Prevention
Input validation and pre-submission checks were standardized across platforms to prevent common user errors to reduce the frequency of errors and ensure that the data entered by agents is accurate and complete.
Contextual Help:
Tooltips and inline help were standardized to provide real-time guidance and reduce the need for external support to empower agents to resolve issues independently, reducing reliance on help documentation.
Design Library
Testing and Accessibility Integration
Testing and accessibility were critical to ensuring the reliability and usability of the design system.
Component Testing
Each component was tested across different screen sizes and browsers, confirming responsiveness and consistency.
User Accessibility
We ensured accessibility by testing all interactive elements with screen readers and confirming ARIA labels for an inclusive experience.
Usability Testing
We conducted tests with agents to validate ease of use, ensuring components were responsive and legible in various states.
Documentation & Handoff
Along with the interactive prototypes , we have also provided detailed design documentation with specifications on dimensions, spacing, font sizes, color codes, and interactions to ensure precise understanding. Shared an organized design system/component library to maintain consistency and adherence to standards.
Component Library Documentation
Create detailed guidelines on each component’s usage and accessibility considerations
Collaboration with Development
Coordinate with developers for efficient handoff, ensuring each component’s tokens are correctly implemented in the codebase.
Version Control
Define processes for versioning updates, and notify stakeholders when changes are made to components or tokens.
Schedule design review meetings for developers to ask questions and provide feedback, ensuring alignment and clarity before development. Collaborate on functional specifications to translate design into technical requirements, including behaviors, interactions, and data flows.
Results & Impact
Efficiency Gains
By creating reusable components, we reduced design and development time, accelerating the product pipeline.
Consistency
Our design system provided a cohesive visual language that improved user experience and created a more polished product.
Accessibility
The library’s focus on accessibility ensured agents could interact with components effectively, leading to higher user satisfaction.
Continuous improvement
Component Library Expansion
Regular Usability Testing
Knowledge Base Updates
User Feedback Integration
Key Challenges
1. Balancing different stakeholder priorities and gaining stakeholder buy-in for the unified system. |
2. Navigating technical limitations of legacy systems. |
3. Ensuring user adoption through effective training. |
4. Balancing the need for consistency with the unique requirements of each platform. |
5. Ensuring scalability for future updates across all platforms. |
6. Integrating data across platforms was challenging due to differing data sources and structures and platform |
Key Learnings
1. the importance of early alignment with cross-functional teams, continuous feedback, and a modular approach to design. |
2. Developed platform-specific guidelines within the design system to address unique needs without compromising overall consistency. |
3. Adopted a modular approach in the design system, allowing for easy updates and maintenance. |
4. Demonstrated the value of the unified system through pilot testing and quantifiable improvements in agent efficiency and customer satisfaction |
5. Building a centralized data repository for all platforms reduced redundancy and ensured a consistent customer view, improving data integration, system reliability, and scalability. |
7. Designing with scalability in mind ensured that the assistant could be rolled out to a broader audience without significant rework. |
Conclusion
The unification of Client's Agent Assistant across multiple platforms was a significant undertaking that required careful consideration of user needs, platform requirements, and business goals. By following a structured design thinking process, we were able to create a cohesive design system that improved both agent efficiency and customer satisfaction.
The project highlighted the importance of consistency in design while also allowing for flexibility to meet specific platform needs. The unified design system now serves as a scalable solution that can adapt to future changes in technology and customer expectations.
Next Steps
Add New Widgets as the platform evolves - Design new widgets for emerging needs, such as complex data visualization components, live customer feedback interfaces, or task automation cards.
Enhance Interactivity and Animation - Introduce more dynamic components, like progress bars, tooltips, and animated loading indicators, to improve user experience and engagement.
Regular Feedback Collection: Schedule regular feedback sessions with agents, designers, and developers to identify any issues or new needs arising from their day-to-day use of the components.
Quarterly Accessibility Checks Ensuring all components remain compliant with the brand standards and are accessible to all users.
Design variations of key components for different agent roles, such as chat-focused agents, task management roles, or customer support, to enhance usability based on user-specific needs.