Button Text

Comcast Xfinity: Celestial App

Celestial app logo on a purple background with overlapping shapes

Comcast Xfinity had several disparate systems used by agents to manage customer data and sales tools across their lines of business. These tools are merging into one new app called Celestial.

Merging multiple apps into one is no small feat; in addition to all the functionality and data to bring over, Celestial is also part of Comcast's commitment to hiring a more diverse workforce. This means the new app will be held to a higher standard of accessibility criteria than any other in the Xfinity ecosystem.

Our Celestial product team was made up of five pods, each with product owners, business analysts, project managers, design leads, and designers. Overseeing the whole project we had a few leaders from product, a creative director, and a design lead.

Each pod was working on a different subset of the application. Making use of the newly defined Xfinity Design System (XDS), our five pods collaborated closely together to align on patterns, create reusable components, and work on our own distinct features to replace the older generation of apps.

I started working on Celestial-related work in February 2022 as a UI designer, moving around pods as needed. I ended my tenure on the project in February 2024.

Skills

UI/UX Design, App Design, Design Systems, WCAG Compliance

All photos are property of Comcast Xfinity.

visual showing the different apps being mapped to Celestial

A visual representation of all products eventually being absorbed by Celestial

Pod: ACSR Gaps

Prior to Celestial officially starting, I was apart of a pod called ACSR Gaps. Our goal was to phase out a system used by Comcast agents called ACSR, which was the precursor to Einstein360. While many of ACSR's features made it into Einstein360, not all did; most of these features were related to billing processes or user management.

Since ACSR was on a tight timeline to be phased out, we couldn't wait until the Celestial infrastructure was built. Instead, we began designing with XDS and plugged the designs into the current Einstein360 interface, hence the disjointed styles you will see below.

It was challenging to meld the two very different design systems; however, we did make significant improvements to the UX and general information architecture of the features we brought over.

Despite our efforts, it was well-known among our teams that much of ACSR would be throwaway work once these features were ready to be brought into Celestial; as a result, we didn't do much preliminary research or user testing. However, I found that ACSR Gaps was a great way to test the limits of XDS; I was able to experiment and takes notes for how we'd bridge the gap between a marketing-focused design system and an information-dense product like Celestial.

ACSR Gaps ran from February 2022 to August 2022.

KEY OUTCOMES

  • Resolved over 140 "gaps" or missing pieces of functionality by bringing ASCR features into E360
  • Improved UX of features by grouping tasks, changing field types based on best practices, and reducing the number of screens in order to limit loading times
  • Created a better hierarchy of information to distinguish low priority tasks from high priority ones
  • Gathered data about using XDS that would inform our approach for Celestial
  • Fostered a more inclusive experience by implementing chosen name and pronoun fields into user accounts
visualization diagram to show old flows vs new flows

Simplifying flows was one of the primary objectives on ACSR Gaps. This diagram shows an example of how I reduced the number of pages needed to adjust user preferences.

screenshot of usage and service details in Einstein360 app

Another challenge we faced is that the 360s are not fully responsive (as seen in this example for usage details)... all the more reason for us to start Celestial!

screenshot of updating chosen name in Einstein360 app
The chosen name and pronoun initiative was one of our most important features to add, allowing us to design for a more inclusive experience. This feature has launched to selected regions and has had over four thousand interactions in its first six months.
screenshot of deleting users in Einstein360 app
My favorite things to design on this project were the slightly nuanced mini-flows, such as how to edit or delete different kinds of info. These types of patterns were inconsistent in the 360s, so I tried to keep them as similar as possible for ACSR features.

Pod: Retail store

After ACSR wrapped up, I moved to the pod responsible for taking the old Retail360 app and translating that to its new space within Celestial. Our pod explored the features most applicable to retail agents: checking customers into the store, managing queues, creating appointments, and handling equipment exchanges. For our work, we primarily focused on tablet screen sizes since that device is what will be most used by our subset of users.

Before undertaking any design work, each pod member visited our nearest Xfinity store to conduct observational research and contextual inquiries. I watched retail agents use the existing app to check customers in and manage equipment exchanges. Talking to them, I identified some of their core frustrations: long loading times, not being able to quickly add customers to the queue, and issues with the app's driver's license scanner. While not all of these would be addressed right away, our pod used the information we collected to keep the user at the forefront of our conversations.

After formalizing the research, our pod's two UX-focused designers made personas, user journeys, and other materials to present back to stakeholders in order to help refine our roadmap and create alignment between business goals and ideal user experiences.

In the meantime, I was tasked with working on the first UI element of the retail space in Celestial: the store space header. This navigational component was designed with the flexibility to extend to other spaces such as customer accounts and inventory management.

We spent most of our time focused on queue management: our UX designers held an OOUX workshop with our key stakeholders before moving into low- and mid-fidelity wireframes. Using these wires, myself and our other UI designer created more mid-fidelity designs to ideate with our stakeholders.

I was on the retail pod from September 2022 until early 2023.

KEY OUTCOMES

  • Completed 5 different store visits and gathered data from roughly 40 different retail employees
  • Designed the first Celestial-specific component: the space header
  • Held first set of OOUX workshops with retail stakeholders
  • Set standards of research frequency for other pods
screenshot of store ribbon in celestial app
The store space header (top center navigation area) was our pod's first UI element to complete. Deceptively complex, this component went through many iterations until we found a structure that would work for all other spaces in Celestial. This version was an old WIP iteration.
screenshot of OOUX workshop sticky notes
An screenshot from an OOUX workshop led by our pod's UX designers. The purpose of the workshop was to define associations between objects for our check-in flow.
screenshot of user flows diagram
Using the OOUX work, business requirements, and additional research, our team created various flow diagrams. We used these to validate that the flows are meeting both business and user goals.
screenshot of work-in-progress Celestial design to manage queues
My last assignment on the retail pod was to experiment with different wireframes for checking a customer in and managing the queue. We tended to iterate in a mid-fidelity style, pulling from existing libraries when possible.

Project Challenges

Day-to-day, the biggest challenges I faced as a UI designer on the ACSR and retail pods were the limitations set by the design system, Xfinity Design System (XDS).

Started before Celestial, XDS was initially created to bring unity across customer-facing experiences, mainly the Xfinity.com website, the My Account portal, and the Xfinity app. Early on in my team's work, I identified that since these experiences serve a different purpose, the resulting design system doesn't meet the robust needs of a product like Celestial. As a result, I was only on the retail pod for a short period of time before moving to my next Celestial adventure: the Celestial Design System (CDS).  

Learn more about CDS

Credits

  • Think Company

    Chris Hungate
    Senior Design Lead, Celestial

    Casey Hewens
    Design Lead, ACSR Gaps

    Nicole Kutos
    Senior UI Designer, ASCR Gaps + Retail Pods

    Sara Havekotte
    UX Designer, ACSR Gaps + Retail Pods

    Husna Ansari
    UX Designer, ACSR Gaps + Retail Pods

    Angelica Suarez
    Producer, Retail Pod

  • Comcast Xfinity

    Lea Refice
    Executive Director

    Philip Sorrentino
    Creative Director

    Austin Grutze
    Design Lead, Retail Pod

    Matthew Bailey
    Product Owner, Retail Pod

    Matt Gastgeb
    Senior UI/UX Designer, Retail Pod

    Nouela Johnston
    Experience Designer, XDS

Next Project:

Comcast Xfinity: Celestial Design System