Design System | weather.com

The Weather Channel · 2006 – 2016 · Component Library, Mobile UI Kit & Cross-Platform Design System

Design Sprints & Team Critiques

The work didn't happen in isolation. A core part of the creative process at weather.com was rapid critique, printing designs at scale, hanging them on glass walls, and running the team through structured reviews. These design sprints drove convergence on everything from app typography and weather narrative language to UI color palettes, iconography, and cross-platform layout decisions. We focused on an interative and incremental approach with all product development sprints.

Weather Channel design sprint, mobile app designs printed and hung on glass critique wall

Weather Channel team critique, full glass wall covered in printed app designs, color palettes, and phone mockups

Weather Channel design critique. Love/Ugh voting on printed app design, 75% Love 25% Ugh

Weather Channel design sprint, printed weather app screens showing Muggy and Sunny Hot Muggy Bright states

Design System | weather.com

With hundreds of millions of users, the Weather Channel app had a staggering reach. I joined TWC in 2011 as its first dedicated mobile designer, and over the next five years led visual design and UX for the company's mobile apps across iOS and Android.

The work below covers redesign work for the Weather Channel mobile apps. Most of the design and UX from that release shipped and remained in place for years afterward.

Product Strategy, Art Direction, UX & UI Design · iOS & Android Applications

Mobile App Redesign

The redesign started on paper. Dozens of sketches and wireframes explored a swipe-to-detail interaction model, a calendar view for extended forecasts, and alternate home screen navigation. Each iteration was stress-tested against real usage patterns before the team converged on the shipped structure.

Wireframe sketches for swipe/detail mode, calendar view, and alternate navigation patterns for the Weather Channel app redesign

Main feed wireframes, part 1 and part 2, showing location and settings, conditional statements, and module customization

Wireframes for feed module, article, news menu, category section, and full content list

Wireframes for main feed module, expanded current conditions, and expanded hourly forecast

Hand-drawn rainfall and temperature graph sketches for the daily forecast detail view

Wireframes for settings, main feed, and expanded current conditions for today and hourly

Sketches mapping weather states like dry, about to rain, raining, and severe to app modules, alongside a 'Hey You, bring an umbrella' notification concept with radar and travel widgets

Home Screen Ideation and Testing

Home screen concepts moved through structured rounds of user testing. The first round paired severe and non-severe weather framing in front of live users, surfacing issues with type size, ticker copy, and alert placement. The second round tested three concepts (Coin Refresh, Big Words, and Hero+Three) against 2,700+ opted-in users in under 40 minutes. Hero+Three won decisively at 55%, validating an overnight forecast and a more prominent weather-change indicator.

User testing results comparing severe and non-severe weather framing on the Weather Channel app home screen

Comparative user testing of three home screen concepts, Coin Refresh, Big Words, and Hero+Three, with preference results

Mood

Mood exploration paired the new weather narrative language, "It's 94° Sunny Hot Muggy Bright Out There", with a wider system of live radar maps, hourly and daily forecast modules, pollen and air-quality indices, and a constrained color palette anchored to the Weather Channel's brand blue.

Mood board with weather news cards, radar maps, hourly forecast charts, air quality dashboard, and color palette swatches

Visual Design

The finished visual language carried straight into App Store marketing: clean current-conditions cards, pollen and allergy tracking, hourly and daily forecast modules, and editorial news integration, all rendered in the new typography and color system.

App Store marketing screenshot showing pollen and allergy forecast, 'Amazingly helpful'

App Store marketing screenshot showing hourly and daily forecast for New York, 'Amazingly helpful'

App Store marketing screenshot showing current conditions with Statue of Liberty photo background, 'Beautiful and easy to use'

App Store marketing screenshot showing weather news and radar map, 'News to keep you safe and prepared'

Other Components

The redesign extended well beyond the home screen: outdoor activity recommendations for running and skiing based on current conditions, a conversational "Ask Watson Weather" assistant built on IBM Watson, a full Material Design build for Android, and a co-branded Samsung release with refreshed onboarding, a smart alarm clock, and floating weather shortcuts.

Outdoors module with running and skiing condition recommendations, and Ask Watson Weather conversational assistant with running forecast

Current conditions screen showing rain showers in Seattle, with Ask Watson Weather suggesting a road trip to Rialto Beach based on the forecast

Android build of the Weather Channel app on a Nexus device, showing partly cloudy conditions for New York with a photo of the Statue of Liberty

Onboarding flow for the Samsung co-branded release, introducing the refreshed look, smart alarm clock, and floating shortcuts features

Apple Watch

A companion Apple Watch app rounded out the redesign: glanceable current conditions, severe weather alerts, weekend outlook, hourly forecast, and radar, each built around the watch's complications and force-touch interactions.