Client

Comcast Xfinity

Role

UX Designer

Duration

Jan 2023 - Aug 2023

Overview

The Team

RADAR, the Rapid Agent-Assisted Diagnosis and Resolution system, is an application designed to facilitate Customer Care Operations for Xfinity. It achieves this by interfacing with the Flow Engine to enhance the efficiency and effectiveness of customer service processes.

Product Manager (1) UX Designer (1) UI Designer (1) Frontend Developer (2) Backend Developer (6)

The Challenge

The Design Process

My role involves conceptualizing and designing RADAR from 0 to 1. This includes cross-functional collaboration with the client, offshore developers, the product manager, and to ensure the application meets the specified requirements and aligns with the client's needs. Through continuous communication and feedback, I will guide the design process, oversee the development phases, and contribute to the successful implementation of RADAR to optimize Customer Care operations for Xfinity.

  • Understand

  • Ideation

By Precisely outlining its objective, strategic approach, and the anticipated value from the Business Standpoint, we get the full image of RADAR. By clearly defining these critical elements at the outset, we established a robust foundation for the project, facilitating effective planning, execution, and communication with all stakeholders. This ensures alignment with the company's vision and objectives, setting the stage for successful project outcomes.

Problem Statement

  • Xfinity needs to reduce operational inefficiencies and elevated costs associated with the use of disparate non-billing vendor applications so that the company can swiftly integrate new functionalities, align better with business objectives, and improve overall service delivery through a consolidated in-house solution.

  • The agents need a seamless, efficient user interface by consolidating multiple non-billing vendor applications into a single, integrated in-house system so that they can perform their tasks more effectively, reduce time spent on system navigation, and improve the quality of customer service.

During the ideation stage, the primary focus is on concepts and wireframes. This period is crucial for gaining a deeper understanding of user flow and UI styles through communication and feedback.

User Flow for Agents

The challenge is to design 3 screens - Sign in, Feature Overview, Main Dashboard, with a intuitive navigation scheme to help agent users solve a ticket faster.

  • Execution

Given the extensive scope of the RADAR application, the team initially concentrated on designing key features such as Login, the MVP Dashboard, and Business Features (including Search and Update Account, Payment Arrangement, and Subscriptions). Additionally, the focus included Admin features, such as Access Control.

Based on user feedback, I developed the next iteration of the main dashboard design, incorporating a more comprehensive navigation structure and integrating the "Search Customer" feature across all pages, rather than limiting it to a single location. This adjustment enables users to access account information quickly and seamlessly from anywhere within the platform. These enhancements aim to improve work efficiency for agents and reduce the overall ticket resolution time.

The backend improvements significantly impacted the main dashboard design. The process logic shifted from updating an existing account to creating a new account, followed by migrating the existing customer information into the new one. This change allows agents to simply enter the New Core Account Number and Update Wireless Biller, streamlining the user flow and leading to a faster ticket resolution process.

  • Execution

Visual design takes place during the execution stage, commencing with the approved wireframes. During this phase, I collaborate closely with the offshore UI designer in India, providing them with the necessary requirements and guiding the process to ensure alignment with project goals. Additionally, I also work closely with front-end developers to ensure precise implementation of the designs.

Given the extensive scope of the RADAR system, the team initially concentrated on designing Key Features such as Sign-In, Feature Overview, Business Features (including Search and Update Account, Payment Arrangement, and Subscriptions), and Admin (Access Control).

User Flow for Admins

The challenge is to design 2 pages for admin users - Access Control page to serve as a directory and Requests page that allows admins to handle access requests in a centralized manner.

To address the diverse range of situations and user requests, I designed customized error screens for various scenarios. I ensured that the Error Messages were clear and concise, providing plain language explanations and actionable steps for resolution. My approach followed best practices such as maintaining consistency across messages, avoiding user blame, and placing the messages near the relevant areas. Additionally, I adopted a friendly tone to enhance the overall user experience.

The Style Guide adheres to Xfinity's existing design language, incorporating the brand's colors, typefaces, and overall look and feel.

  • Delivery

In my role as the design lead, I provide continuous support to both the development team and the client. This involves offering guidance, addressing any design-related queries or challenges, and ensuring that the design vision is effectively communicated and maintained throughout the project lifecycle. Additionally, I facilitate collaboration between the design, development, and client teams to foster a cohesive and successful project outcome.

Result

These outcomes reflect the development of RADAR with enhanced performance and user experience.

  • Resulted in securing funding of $325,000 for the next phase of design and development.

  • Estimate a 30% reduction in average ticket solving time.