WEATHER INTERFACES
Designing Scalable, Data-Dense Weather Experiences at National Scale
ABOUT
Launching Fox Weather as a new national network required designing a complete system for presenting real-time and forecasted weather data across multiple product surfaces, including broadcast, mobile app, and live streaming experiences.
I led the design of a modular weather visualization system—templates, interaction patterns, and data layouts—that enabled teams to quickly and accurately communicate complex weather information while remaining legible, accessible, and adaptable to constantly changing conditions.
This work balanced data density, usability, and performance under the constraints of live media production and real-time updates.
Weather data is:
-
Time-sensitive and constantly updating
-
Probabilistic and often uncertain
-
Consumed in high-pressure moments (severe weather, emergencies)
So, how might we design weather experiences that help users quickly understand what’s happening and what to do—without overwhelming them—across broadcast and digital platforms?
At the same time, we needed to:
-
Support rapid production workflows
-
Maintain visual consistency across the network
-
Scale the system as the network launched and grew
PROJECT OR FILE
The Fox Weather app is free and downloadable here
MY ROLE
I was responsible for end-to-end design of Fox Weather’s data visualization system, including:
-
Defining information architecture for weather templates
-
Designing modular UI components and layouts
-
Expanding and maintaining the Fox Weather design system
-
Partnering with product, engineering, and editorial teams
-
Prototyping and validating designs using real data scenarios
The Result
A still from a live broadcast streamed to the Fox Weather App utilizing side panel data, in-studio infographics, and banner information at the bottom of the screen
THE CHALLENGES:
CONSTRAINTS OF MEDIA & CLARITY IF INFO
-
Live broadcast limitations: All graphics had to conform to strict technical and safety requirements dictated by control room systems.
-
Multi-surface consistency: Designs needed to work across broadcast, mobile app, and streaming contexts.
-
Data variability: Weather data could be incomplete, delayed, or change rapidly.
-
Accessibility: Information needed to remain legible for a broad consumer audience under varied viewing conditions.
Screen safety layout diagram
Multi-surface forecasts: for broadcast and in-app
PROBLEM STATEMENT
Weather audiences need a way to quickly understand current and upcoming weather conditions—and the actions they should take—across broadcast and digital platforms, without being overwhelmed by excessive information or inconsistent presentation.
TITLE OF THE CALLOUT BLOCK
SOLUTIONS:
DESIGNING FOR DATA DENSITY & UNCERTAINTY
Weather forecasting requires communicating confidence, urgency, and change over time.
Key design decisions included:
-
Progressive disclosure: Prioritized the most critical data (alerts, temperature, timing) while allowing secondary details to appear contextually.
-
Modular layouts: Designed interchangeable panels that could adapt to different weather events without redesigning entire screens.
-
Graceful degradation: Templates were designed to handle missing or partial data without breaking the experience.
-
Visual hierarchy: Used scale, contrast, and grouping to guide attention during high-stress moments.
Examples of weather alert systems from other sources
Fox Weather Alert System
Finished Designs
A CLOSER LOOK:
A major component of the system was a persistent side panel that sat adjacent to live video.
We designed:
-
Weather-specific panels (winter storms, hurricanes, wildfires, aviation conditions)
-
Modular components that could be rearranged or swapped based on available data
-
Variants that accounted for promo overlays and broadcast safety zones
This allowed production teams to quickly tailor visuals to the story while maintaining consistency.
THE SIDE PANEL SYSTEM
COLLABORATION &
EXECUTION
Overall, in this project I partnered closely with:
-
Product managers to align design decisions with editorial and business goals
-
Engineering teams to ensure designs were technically feasible in live environments
-
Weather presentation teams who populated templates with real-time data
High-fidelity prototypes in Figma were used for alignment, iteration, and handoff.
IMPACT
-
Enabled consistent, scalable weather reporting across broadcast and digital platforms
-
Improved clarity and usability of data-dense weather information
-
Accelerated production workflows through reusable templates and patterns
-
Supported rapid growth and evolving content needs of a new national network