Finding strategy for communication
Communication is key, but how well does the Xfinity app do this with users? Does the app offer a clear and cohesive visual strategy for displaying communication across various services, devices, and situations? I identified inconsistencies, evaluated them, and proposed improvements to enhance clarity and consistency in communication.
Role:
UI designer
Project Type:
Design strategy
Duration: ~ 1 month
Problem
The Xfinity app uses various components to communicate status and states across services, devices, and situations. However, these indicators are scattered throughout the app without a clear strategy, resulting in inconsistent visual representations. To ensure an intuitive user experience, it is essential to evaluate and enhance the current communication indicators for improved consistency and clarity
How it started
This audit originated from a critique session with my leadership where I presented a project showcasing the status of Xfinity Mobile features. During the session, the Creative Director questioned why we were using one component over the other to show the status of the feature and I realized that I couldn’t provide a strong rationale beyond the fact that this was the existing pattern used by Xfinity Mobile.
This led to a broader discussion, revealing a lack of clear guidelines for visual communication indicators. One of the intriguing aspects of visual design is that there are rarely "wrong" answers—what matters is having a solid rationale behind the decisions. I decided to conduct an audit of the Xfinity app to provide an effective and clear visual design strategy recommendation for communication indicators.
Approach
The audit involved gathering examples from various sections of the app to conduct a comprehensive review and gain a better perspective on its design system. This approach allowed me to identify patterns and inconsistencies that were not apparent in isolated reviews. After collecting a substantial number of examples, I categorized them into groups based on communication types: service and device statuses, feature statuses, awareness, descriptions, and eligibility. This categorization helped me develop strategies for content hierarchy, color, placement, and messaging to ensure consistency across the app.
The audit also required extensive communication within the team to gather examples and collaboratively develop the rationale behind the recommendations. I facilitated several group sessions to discuss the suggestions, ensuring they were scalable, adaptable, and easy to understand. Through these discussions, we agreed on the best strategy for visual communication indicators across the app.
The recommendations
Tags
Purpose: Show the highest priority message and awareness on the page
-
Status Tags: Reserved for the highest priority items (ex. billing impact, device status, service status, user action required).
-
Callout/Awareness Tags: Keep the copy concise, preferably a single word.
Guidelines: Only one tag per line item is allowed; if more detail is needed, utilize other components such as the secondary line.
Before: Multiple tags used in a single line item, message different priorities, cluttering the interface.
After: Clear tag used for high-priority status, use secondary line for additional information if needed.
Secondary line
Purpose: Use for message with lower priority and more descriptive.
​
Guidelines:
-
Copy should be simple and concise, limited to a maximum of 2 lines.
-
Avoid using color unless indicating the highest priority (e.g., an outage).
Before: Long copy and multiple colors used
After: Short copy with limited use of color to communicate only high priority message
Third slot
Purpose: Dedicated to settings (On/Off).
Guidelines: Maintain a neutral message with blue indicating "On" and grey indicating "Off".
​
Before: Mixed colors for settings, used for different call to actions and status
​
After: Use for settings only with established color pattern
Icon color + Secondary line
Purpose: Show the states of devices and sensors
Guidelines:
-
Icon color and secondary line should indicate the same states
-
Use red text only for trouble (ex. outage, no battery)
Device states:
Online - Green | Offline, Paused - Grey | Trouble - Red
Sensor states:
Default - Grey | Active - Blue | Trouble - Red
Impacts
The recommendations improved overall usability and clarity by providing cohesive and consistent communication throughout the app. Users can now quickly and easily understand messages through the consistent use of components, colors, and placements. These changes have made the app more polished and well-organized. The recommendations establish unified design guidelines that will serve as a reference for decision-making in future projects.
Reflection
Think holistically
This audit highlighted the importance of a holistic design perspective. By evaluating the app as a whole, I developed a comprehensive visual communication indicator recommendation that works across different parts of the app. Focusing solely on individual pages or components lacked a strong rationale, but seeing all components together allowed me to connect the dots and develop the strategy. Additionally, it is crucial to continuously evaluate the entire design system as the app evolves to ensure a consistent user experience.
Collaborative Efforts
The collaborative sessions with the team were the highlight of this project. Engaging with teammates who designed and used these components brought diverse perspectives, leading to well-rounded and practical solutions. As a single designer, I lacked the comprehensive knowledge and details about these components to develop a strong rationale on my own. Collaboration ensured that the recommendations were effective and scalable, aligning well with the needs of both users and businesses.