IBM · The Weather Company · Case study
Immersive editorial for weather.com.
- Editorial Design
- Responsive Web
- Tablet UX
- Content-first Layouts
- Design Systems
- Ad-supported Product Design
- Role
- Lead Product Designer
- Timeline
- Aug 2016 — May 2017
- Platform
- Web · Tablet
- Surface
- Articles · Photo galleries · Video
Overview
Editorial pages that drew users in, and still paid the bills.
Articles, photo galleries and video pages on weather.com had aged into a patchwork of templates. The redesign rebuilt them under a new design language, with one flexible module system across the three formats.
Advertising paid for the platform. The new system had to make the media the hero while giving banner placements a disciplined, predictable home.
Module exploration: a flexible kit-of-parts that absorbed photo, video and article use cases without forking templates.
Design
One system, three editorial formats.
Immersive photo galleries
Galleries lead with full-bleed imagery and reveal context on scroll. The system supports curated hero shots, captioning, and tasteful sponsor placements without crowding the photograph.
Articles built around the lede image
Article pages opened with a poster image and a focused lede, then unfolded into modules: pull quotes, secondary images, video inserts, and sponsored placements where they belonged.
A tablet view that didn’t apologize
Tablet was a primary editorial surface, not a derivative. The redesign treated portrait reading as a first-class case, with module rules tuned for two-column narrative without losing density.
Outcome
Shipped across the weather.com editorial surface.
3
editorial formats unified under one system
Desktop · Tablet
treated as peer surfaces
Ad-stable
placements without compromising story
Reflection
Editorial needs flexibility and discipline, in that order.
The module system was the right abstraction. It let editors shape a story without breaking the page, and it gave the ad system a predictable contract.
The harder work was getting product, editorial and ad ops to agree on which rules were ironclad and which were negotiable. Most of those calls held up after the rollout.