XM360 Customer service platform

Year: 2017-2019
Team: 3 UX designers and a dedicated engineering team
My role: Senior Designer (in-house)

In the beginning

Xfinity Mobile began with a bootstrap mentality, but the runaway success of the offering meant that the care and service side of the business quickly outgrew the lightweight tools that has been assembled to manage customer issues. While skilled technicians could use specialized diagnostics and network tools to troubleshoot complex customer issues, the most common issues were best dealt with by a basic level of support known as “Tier 1.” These common types of call do not require an expert network technician, and as the service grew its user base, the existing support teams were inundated with customers needing help with their billing issues, account management questions, and new device activations, to name a few. The only tool this group of agents had was a hastily assembled set of flows in ZenDesk, which was little more than a list of possible actions an agent could perform for the customer. Understandably, this off the shelf tool lacked the flexibility and comprehensiveness to truly serve our customers.

Laying the groundwork for a platform

My design team was tasked with creating a new tool from the ground up that would serve the needs of the entire Tier 1 level of care as well as sales for Xfinity Mobile. This daunting ask was made all the more challenging by a tight deadline and a dev team that was already awaiting designs to build by the time our team was assembled. We began by arranging an information architecture based on how the mechanics of connecting phones to a cell phone service works, and hanging our MVE jobs to be done onto that structure. We then set to work ironing out wires, flows, and eventually, UI concepts to build our platform around.

Iterating our way to a System

Capturing the evolution of XM360 is challenging, because each part of the tool truly grew organically from the initial basic designs we made and slowly solidified into a proper UI system as we designed our way through the initial functionality. Working in parallel across different areas of the application, the team had frequent design check-ins to hash out a shared kit of UI parts. Our development partners were also kept close in this platform building exercise to ensure that our design decisions were also sound software decisions, given the capabilities and weaknesses of the underlying system. Most crucially, we kept our end-users close with workshops, informal concept reviews, and site visits to gather feedback from the agents themselves. We hashed out a product design relationship in this process that still continues to this day, just over a year since the official launch of XM360.

As the business evolves, so too does our care platform. The slides below are an illustration of the latest iteration of our service offering, which includes a shared data plan as well as an Unlimited option.

Collaboration & Inclusive design

A key to the success of XM360 was the effort we put into bringing product, developers, and our end users together. Below are some examples of the collaborative processes employed to ensure that all voices were heard, from product, design, development, and end users.

On-site workshops

I led field research that incorporated development team members as well as designers to gather feedback from our users, test new launches, and prioritize roadmap items.

Design whiteboarding

Working quickly with designers to hash out new flows and features in a way that satisfies business requirements & tech constraints while still being intuitive for the user.

New features workshop

To begin phasing out a third party tool and incorporate the functionality in our own tool, I planned and executed a workshop with a team of specialists who would be using the new features extensively. This workshop helped me prioritize the MVP features and improve upon the existing functionality instead of doing a direct copy of the old tool.

On-site for launch

When our tool went live, we were there along with some of our best developers to train, observe, and debug on the fly. Not everything worked, and we were there to own it and be accountable to our users.

Developer team walkthrough

I often used our shared office walls as a way to walk teams of developers through new flows and features. This sort of open discussion ensured that concerns were addressed openly and everyone left with a clear sense of the work to be done.

Whiteboarding with product

This sort of whiteboarding exercise was key to turning a set of requirements into a working user story or flow. It was also key for identifying missed requirements or logical inconsistencies before development effort had been wasted.

Quarterly planning

We took ownership of the design backlog for XM360, and worked to ensure that we were steadily advancing the product while also incorporating the new features demanded by the business.

Task flow diagramming

Our tool was designed to make complex backend processes easier for the end user, which meant we needed to do a great deal of work to handle all edge cases without adding undue complexity to the most common use cases.

UI pin-ups

A hallway shared by design teams, development teams, product managers, and care representatives allowed for passive feedback gathering and socializing of new features.

Visual QA

Although tedious at times, I took great efforts to provide clear, actionable visual QA feedback in my tickets. Combined with side-by-side walkthroughs of live code before being pushed to production, we were able to push for quality and consistency in our UI.

A living platform

The job was far from over on XM360 after our initial launch, and we continued to refine the tool to serve the growing needs of the business. We bega neach new feature or front-end refinement with in-depth impact assessments and concepts to ensure that engineering, business, and care stakeholders were all on the same page before any work began. In addition to these changes, we took it upon ourselves to continue gathering feedback to gain a deeper understanding of care team needs from the agents themselves. The gallery below is a collection of artifacts we created to share our research findings and justify our roadmap items.