Better Together: Integrating Xfinity Mobile into the Xfinity App
Imagine managing all your Xfinity services through a single app. The "Better Together" initiative aimed to integrate Xfinity Mobile into the Xfinity app, creating a unified platform to manage all services. As a key revenue stream for Xfinity, the successful MVP launch of Xfinity Mobile has now grown to serve over 1.5 million users.
​
As one of the first designers on this project, I played a key role in shaping the foundation of the Xfinity Mobile experience and ensuring its smooth integration with the Xfinity app.
​Impact summary
Started from zero, now used by 1.5 million users and generating 2.4 million monthly unique visits.
Role:
UX/UI designer
Project Type:
Mobile app design
Duration: ~ 6 month
Story behind
Xfinity Mobile is a key revenue service for Xfinity, providing a complete experience from device and data plan buy flow to account management. As per the "Better Together" initiative, Xfinity Mobile was one of the first standalone businesses to integrate into the existing Xfinity app, stepping toward building a single platform to manage the entire Xfinity ecosystem.
I was brought into the project due to my extensive experience with the Xfinity Mobile standalone website and app, as well as my deep understanding of XM’s complexities. I joined the Connected Living XM team as a UX designer to build the framework of the experience shortly after the first phase started.
Project goals
Integrate Xfinity Mobile into the Xfinity App
Merge Xfinity Mobile to part of the Xfinity app, delivering a single platform for a holistic service experience.
Understand users and meet their expectations
Translate user insights based on user research to create an intuitive and cohesive experience.
Ensure successful migration before legacy app sunset
​
Migrate Xfinity Mobile users from the legacy site to the Xfinity app before the timeline with minimal disruption.
User insight as a starting point
In the first phase of the design, we focused on creating the framework for the Xfinity Mobile experience within the Xfinity app. The team began by conducting user research in collaboration with the research team to explore and analyze the motivations, habits, preferences, and behaviors of existing Xfinity Mobile users. The research findings will guide us in identifying user pain points and challenges, enabling us to translate these insights into solutions that improve the overall experience. Both quantitative and qualitative studies were conducted, providing a strong foundation for the project's direction.
Key findings included:
​
-
75% app users want a combined app to manage all their services in one platform.
-
Users want specific area for XM features
-
The XM App is most frequently used to check data usage and billing information.
-
Users want an uncluttered, intuitive, and modern interface.
-
Having all XM and Xfinity features in one place would likely encourage users to explore the app's other features/settings.
"My ideal would be having all of my Xfinity service options on one combined services page that allows me to do all my actions quickly"
Key Considerations
In the initial phase of designing the MVP XM experience, I focused on two critical elements for developing the framework.
First, the Information Architecture (IA) serves as the backbone of the user experience, providing a solid foundation for building, iterating, and evolving the experience. A well-thought-out IA allows users to navigate intuitively and complete tasks easily within the app.
Second, Data Usage Visualization, as a key interactive feature proven by the research, offers clear insights into data consumption for users to monitor. Since data usage directly affects users' bills, this feature ensures that users can quickly track their consumption and act proactively.
User flow and Information Architecture (IA)
Integrating XM into the Xfinity app was more complex than simply transferring the existing structure. The challenge is that the Xfinity app now serves multiple purposes beyond just managing Xfinity Mobile, which has expanded the scope of the bottom navigation bar. The bottom navigation covers broader areas instead of being dedicated solely to XM features. This means users can no longer rely on the bottom navigation to quickly move between XM pages, requiring us to design a more linear cognitive flow.
Xfinity Mobile Legacy App
We structured the user journey into a three-page flow:
-
XM Landing Page: Enter from the service tab, offers a high-level overview of the account, presenting a summary of all lines under the account.
-
Line Entity Page: Provides detailed information and management features for individual lines.
-
Device Entity Page: Focuses on detailed information and management features for individual devices.
This flow begins with high-level account information, then progresses to line details, and finally to specific device details. Research insights reveal that data usage is the most frequently used feature by users. Therefore, the XM landing page prioritizes displaying data usage details for all account lines. Once users decide to take action, they can dive deeper by selecting a specific line. Since managing plan-related features becomes the primary use case after purchasing a device and plan, the line entity should be placed at the top level than device entity.
Once the three-page structure was established, I organized features accordingly. This structure allowed users to intuitively navigate to the pages and find relevant information based on their needs.
Data Usage Visualization
The research findings shows that data usage was one of the most interacted feature in the XM experience. The team decided to use visualization to make this data more accessible and easily scannable. The data visualization allows users to monitor their current and historical data consumption and helps them make informed decisions, such as preventing data overage.
By The Gig (BTG) shared data graph
The graph on the XM landing page is designed to monitor BTG users' current monthly data consumption. BTG data plans allow users to purchase a shared data bucket for up to 10 lines. If the purchased data is exceeded, an additional gigabyte is automatically added to the account with an extra charge. The graph displays different states based on data usage: one state when the account exceeds 80% of the purchased data and another when it surpasses the data bucket limit.
The segmented bar graph displays all lines sharing the data bucket for the current cycle, with color coding to differentiate each line. The graph enables users to understand how much data each line has consumed and take action if needed.
Monthly data usage chart
Based on the research, users wanted a tool to predict their data usage. To address this need, we designed a monthly data usage chart that allows users to analyze historical data for up to six months. This feature enables users to understand their usage patterns better, make informed decisions about selecting the right data plan, and avoid data overage.
What didn't go as we planned
During the page structure design, the team recognized the importance of emphasizing critical messages, especially regarding data usage status. The original scope included various banners to convey different types of messages and I collaborated with the product team to create a priority list for these banner messages. However, when we shared the design with the engineering team, we discovered they didn’t have the development capacity to implement the banners API in the MVP experience.
Despite the setback, the team saw the value of these messages and explored alternative solutions. We decided to leverage other communication methods, such as email and push notifications, and teamed up with Push notification team to quickly add Xfinity Mobile data usage messages. Once the necessary API integration is available, the team plans to do a fast follow-up to implement the banners.
Final designs
Impact
The XM MVP experience launched in July 2023 to 25% of customers. Following a successful partial migration, the native XM app was sunsetted, and all users fully transitioned to the Xfinity app by September. The migration proceeded smoothly with minimal impact on customer containment and call volume. Nearly 11 months after the integration, 1.5 million users accessed XM accounts through the Xfinity app and generated 2.4 million monthly unique visits. The Xfinity Mobile integration supported the Xfinity app consolidation strategy, marking a successful execution of the "Better Together" initiative.
Iteration
New look and feel
As the Xfinity app continues to evolve for a better experience, its look and feel have transitioned to a more modernized interface. This visual evolution introduces new bold brand typography and color, more breathable spacing, and a cohesive use of icons and images. Additionally, we re-evaluated and simplified the content to reduce clutter and enhance readability. The Xfinity Mobile experience was updated to align with the rest of the app.
Make it native
After successfully launching the MVP, the team continued to develop the product in line with user feedback and business objectives. As the product evolved, the team aimed to integrate all features into a full native flow. We are strategically phasing out deliverables while managing limited resources. Currently, the app displays the status of features and provides details to assist users. Our goal is to implement full add and remove capability by the end of Q1 2025, and we are proactively working on this solution.
Reflection
Start from users
This project was large in scope and presented the challenge of designing the new Xfinity Mobile experience in the Xfinity app from the scratch. User feedback on the legacy XM site highlighted both its successes and areas for improvement, serving as the starting point for the design. Backed by data, we identified the problems, defined the design direction, and delivered successful solutions. The new Xfinity Mobile experience strengthened relationships between users and the product, as evidenced by business growth.
Designing a Component for a Design System
The two new data visualizations introduced in the Xfinity Mobile experience showed their potential to become integral components of the design system. Developing these components required extensive collaboration with both the design system and development teams. Our goal was to create flexible components that could accommodate various data types. Through multiple sessions, we successfully defined the structure to maximize adaptability for different use cases. Currently, different parts of the app are utilizing these components to address various needs.