Xfinity app Redesign
ROLE
Motion design lead
YEAR
2023
CONTRIBUTION
Visual & Interaction design, Prototyping, Design Handoff
TEAM
Comcast Xfinity design team
DESCRIPTION
The challenges - Xfinity's services were spread across multiple apps, resulting in a confusing workflow and an inconsistent user experience. Additionally, there was a need for a strong visual update to align with the recent brand change and to enhance the app's personality.
The solution - I collaborated with the design team to consolidate all services and new features into a versatile core app with a newly defined information architecture. Drawing from the new brand identity, we developed the visual metaphor 'Brilliance of Light,' which serves as a high-level narrative for design, helping to convey the core business values of simplicity, personality, and awesomeness.
Motion System
Developing the Xfinity motion design system was a major collaborative effort among multiple design and engineering teams, involving extensive design studies on core business values, brand updates, feature roadmaps, and existing challenges.
As the sole motion designer on the team, I successfully developed the motion guidelines and a token library to enhance service performance and user experience while ensuring consistency with the parent brand.
Security Features
WiFi Motion and Security Toggle were the major new features in the 2023 product roadmap. WiFi Motion allows customers to use stationary, WiFi-connected devices to create motion detection zones that can sense physical movement. The Security Toggle offers users a simple way to switch between Home and Away modes with various customization options.
After numerous POC designs and iterations in interaction and visual studies, I successfully prototyped the entire Security feature using Origami and handed off the specifications for live production.
Journey Continues
It’s been an incredible journey working with the Xfinity team, and together we’ve achieved so much awesomeness, more than I can share here. However, I'm also focused on future improvements in both our workflow and motion technologies.
Aligning design and development early on, guided by a comprehensive framework, would enhance team collaboration and communication efficiency. As a designer I am always open to new trends like GenAI and animation solutions like Rive and Spline 3D, and I believe these technologies will greatly enhance future design efforts.
WiFi Stateful Header
Drawing inspiration from the Xfinity brand’s purple light waves and 3D-rendered devices, I designed this dynamic Stateful header for the WiFi section. The unique looping animations offer an engaging way to display the current states of devices, moving beyond the traditional icon and text copy treatment. Through the collaboration with the dev team, we were able to implement this solution flawlessly for production, making it a scalable and customizable component for all devices across Xfinity and its syndication partners.
Smart Home Controls
Custom microinteractions for new feature widgets are a key application of Xfinity motion. For smart home controls, I defined multiple device states using a system of colors, shadows, and depth elevation. Real-time interactions were inspired by physical objects like light, lock, and thermostat, incorporating behaviors such as calibration wave movement, adjustment ticks, and color changes. Sound and haptics were also crucial in providing appropriate feedback to users.
