Introduction
Celestial is Comcast’s design system for their Xfinity products that follows the OOUX methodologies. My team was responsible for the internal, agent facing side of the Xfinity Mobile experience. Occasionally we’ve worked with the consumer facing team to ensure alignment on experience and branding.
Xfinity Mobile 360 Design System
Creating and optimizing iterations of the component library that works
The Problem
Comcast Xfinity Mobile team faced numerous challenges that the design team had to overcome, things like access to production accounts, and having a defined design system we could use to deliver high fidelity designs for our developing partners. Without direct access, we relied on our developers to send us screenshots, and old feature launch demonstration videos and the lack of a design system library further complicated the situation, making it difficult to create screens efficiently.
The Solution
In tandem our cross functioning product team delivering designs and launching features, it was our mission to construct a comprehensive cohesive end to end experience for our agents in consolidating our components to create a leaner and more efficient system. We constructed Celestial design system library using the OOUX methodology because of the effective use in object oriented components that applies to our many scenario Xfinity Mobile supports that goes beyond successful and fail journey paths.
The Process and Iteration
As our project progressed, it became increasingly evident that there were significant disconnects between design intentions and what the development team was producing. This discrepancy was particularly highlighted when we received visual quality approval requests from the development team. Upon closer examination, it became apparent that there were numerous undocumented screens and flows within our agent-facing tool, resulting in a noticeable lack of user empathy, inefficiency, and inconsistencies throughout the system. These issues were not only impacting the user experience but had more serious consequences, including cases of fraudulent transactions by our retail agents who found the 'correct' processes too convoluted to navigate with ease.
In response to these challenges, we took a proactive approach. Working closely with a dedicated developer and development coordinator, we systematically documented the inconsistent experiences and identified areas where enhancements were necessary.
Collaboratively, we implemented a robust system for annotating design hand-offs, ensuring clear communication regarding design changes, content modifications, and behavioral expectations within the user experience. This marked a pivotal moment in our project, allowing us to bridge the gap between design and development and ultimately create a more coherent and user-friendly system.
The Structure
Best Practices
Documentation of best practices when it comes to design handoffs formatting, naming conventions, content language and when it’s appropriate to create a new component.
Utility
Documenting components for design blueprinting, wireframe, impact maps and annotations for deliverables.
Foundations
Houses the base of our components like typography, colors, icons and graphics.
Components
Consists of larger patterns like navigation, inputs, banner and toast messages, buttons, cards, modals, widgets, and tables.
Compositions
Contains complex relationships of components that relates to a certain user journey process like device troubleshooting, installation, billing or returns.
