At Comcast, I led the UX/UI design for Storm-Ready WiFi within the Xfinity App. From early concepts through launch, I collaborated across teams to shape key touchpoints throughout the app—working closely with product managers, researchers, copywriters, and technology. I also built interactive prototypes that simulated outage scenarios, helping us run realistic, moderated research sessions to refine the experience.
My Role
Lead UX/UI Designer
Client
Xfinity
Timeline
18 Months
Team
Isaiah Robinson(me)
The Challenge
How might we create an experience that educates customers during all stages of connectivity, demystifies Storm-Ready WiFi, and highlights the value of their service?
Our Goals
I lead the design of an experience during 6 distinct states of the Storm-Ready WiFi service, that includes:
A horizontal design approach that provides an end-to-end experience
Educational components about Storm-Ready WiFi within the Xfinity app
A dynamic source of truth for their Storm-Ready WiFi service, by providing real-time information about the vitals of their devices.
Storm-Ready WiFi's affect on the Xfinity app
To design the Storm-Ready WiFi experience, I first needed to understand how the product actually works and what that means for customers day to day. The service breaks down into three core states:
Online and ready (Standby):
Storm-Ready WiFi is in a standby state, acting as a WiFi extender in the home.
Network Outage (WAN Failover):
The customer's router has lost internet connection, but still has power. In this state, the Storm-Ready WiFi device connects to the customer's router and keeps it online with unlimited 5G LTE data.
Power Outage (Gateway Failover):
The customer's home has lost power and the SRW device will act as a "hotspot" with unlimited 5g LTE data. The SRW device also has a battery component, that last for up to 4 hours.
Since Storm-Ready WiFi directly impacts a customer’s internet connection, I mapped out how it affects the Xfinity app and the services it supports—helping the team understand where and how the experience needed to adapt.
I then translated these flows into wireframes to show how they could live within the broader customer experience.
User Flows: I created end to end flows of the Storm-Ready WiFi experience for a better overhead view of each step in the customer journey.
Wireframe flows for socialization: Wireframe flows helped me drive crit sessions with the broader design team and design leadership
Visualizing Storm-Ready WiFi in today's app I was able to bring these flows into the App UI to better represent how these flows fit within our experience.
Detail page component exploration: Storm-Ready WiFi was the first device in Comcast’s product suite with dynamic states that customers could actively manage, which introduced new complexity to the app experience. I successfully advocated for a redesigned device details page that could support these evolving states and provide customers with clear, actionable information when they need it.
Research study: Simulating an outage
Throughout this process, we ran moderated testing sessions to gauge user feedback on the Storm-Ready WiFi experience.
We realized that an outage is a emotional moment, and just showing participants a prototype flow of our app wont feel the same as an actual outage moment.
So, for a second research study, I created a prototype that would "Simulate" an outage moment from the customers phone, to gauge in-the-moment feedback of what decisions/feelings/actions participants would make in a outage if they were Storm-Ready WiFi customers.
Key Findings
Expect users to desire and seek out additional information in the Xfinity App: the cause of the outage and whether they can take steps to troubleshoot the issue themselves
During a power outage, awareness of battery level becomes increasingly important to users over time (as outage persists and battery level depletes).
Users want to be made aware of battery life early, as they’re relatively less likely to engage with Xfinity App content during a power outage if they aren’t initially reminded that SRW is relying on a finite battery charge.
Find more information When the user enters the app, they are greeted with the Storm-Ready WiFi card that links them to information about their device.
Battery level Full screen modals give the user direct links to the Storm-Ready WiFi details page, where the customer can see their battery details.
Details page The source of truth for Storm-Ready WiFi product information, the device's dynamic levels for LTE and also for the Battery charge.
The Storm-Ready WiFi details page
The details page is a dynamic hub for our customers to learn more about their device, check their signal strength, check their battery level and troubleshoot their device when an issue arises. This page is custom to the device and has three primary components.
1:
The first component is a line item that links the customer to the Storm-Ready WiFi Explainer page - a full-screen takeover component with product information about how the device works
2:
The second component is a dynamic card dedicated to the device's cellular connection.
3:The third component is a dynamic card dedicated to the device's cellular connection.
Below are the permutations associated with every state of the Storm-Ready device, LTE signal and battery percentage
The full experience
Finalized customer journeys for the Storm-Ready WiFi experience.
Network backup flow
Power backup flow
Evolution of the Outage Experience
With Storm-Ready WiFi now available to the public, we are now at a moment to take a look at the full outage journey for our customers. In collaboration with our Product partners, I worked with three other designers to present our own vision for the outage experience within the Xfinity app. Specifically, I was able to utilize my expertise of the Storm-Ready WiFi journey as a baseline for how we can be proactive and informative within these outage moments.
