BBC Weather, app redesign

Helping millions plan around the weather

I led the BBC Weather app redesign, turning richer forecast data into an accessible experience for quick checks and detailed planning.

BBC Weather shown on desktop, tablet and phone: a snow forecast for Inverness on the web, the tablet app showing Bushey Heath at 27 degrees, and the phone app showing a clear night in Mayrhofen.
One forecast, told at the length each surface was best at.

Context

A supplier change opened up richer forecast data.

Approach

Support a quick glance, everyday planning and detailed decisions within one experience.

Results

Signed-in users increased by 25%; the service-design approach was later adopted by BBC Sounds and BBC News.

Role
Lead Designer, app experience
Scope
Product and service design, research, interaction design, accessibility
Partners
Product, Engineering, QA, Meteorology, Editorial and Broadcast Design

Context

A supplier change became an opportunity to rethink the service

A new weather-data supplier gave the BBC access to more detailed forecasts. The challenge was to make that information useful while preserving the familiarity audiences expected.

The redesign became the BBC’s first service-design initiative, bringing app, web, television, radio and editorial teams around a shared direction. Moving Brands developed “Window on the Weather”, inspired by the instinct to look outside before deciding what to do.

The previous BBC Weather app, York: a large sun symbol, 9 degrees, the word Sunny, UV, pollen and pollution markers and a four-day strip, over a flat blue gradient.
The glance view. One condition, one temperature, and little sense of what was coming next.
The previous BBC Weather app, Glasgow: an hourly row from 6am to 10am with identical cloud symbols, temperatures in green and yellow colour chips, and wind arrows, over a flat grey background.
The hourly view. Temperature was carried in colour chips, and the detail available stopped well short of what the new supplier could provide.
The broadcast titles. Real weather, shot as landscape, a storm front off a beach, frost on a field at dawn, sun through autumn woodland.

Broadcast had already set the direction

On television the weather was being told through real footage of real conditions. That was the standard the rest of the service had to meet, and at the time digital did not meet it: a flat blue gradient behind a symbol is not the same idea.

This is the part of the service-design approach that mattered most to me. Whichever way you came to the BBC for the weather, a phone on the way out of the door, the site at a desk, the forecast after the news, it should feel like one service rather than several teams' work that happened to share a name.

Consistency across devices and media was a constraint on the app, not an aspiration for it.

BBC Weather service touchpoints, including the service ecosystem, a planning persona, workshop notes and three cross-service propositions.
The shared service-design view across BBC Weather. It brought the ecosystem, audience touchpoints, workshop outputs and cross-service propositions into one place, so the app could be designed as part of the wider weather experience.

My responsibility was to translate that service vision into an app experience that worked at a glance and supported deeper planning when the stakes were higher.

Approach

One forecast, multiple ways to understand it

The more a plan mattered, the more detail people needed

Diary studies, interviews and usability research showed that people read the weather differently. Some preferred a written summary; others looked first at imagery, symbols or numbers.

The importance of the decision also changed their behaviour. An umbrella check might take seconds. A camping trip could prompt repeated checks over several days.

I organised the experience around three needs:

  • Glance. Understand the immediate conditions.
  • Plan. See what is coming and what might change.
  • Detail. Inspect the hourly forecast before deciding.

Atmospheric imagery, written summaries and forecast data worked together, allowing people to choose the depth they needed.

Decision-making framework for checking, validating and investigating the weather, with time budgets and user expectations for each mode.
Checking, validating and investigating, the same three tiers as glance, plan and detail, written down with a time budget attached. Three seconds, ten seconds, no limit.

We wrote this up as a framework, Telling the Weather, so that content decisions could be argued against something rather than settled by preference. It put a time budget on each way of reading a forecast, and said how much effort it was fair to ask of someone in each.

Homescreen, before and after. On the left the previous York screen with one temperature and a four-day strip; on the right two redesigned screens for Miami and SW4 carrying high and low temperatures, a written summary, wind, UV, pollen and pollution, and a wider day strip.
Hour-by-hour view, before and after. On the left the previous Glasgow screen with identical cloud symbols and temperatures in colour chips; on the right redesigned Miami and W1A screens with distinct symbols per hour, plain temperatures, chance of precipitation and wind speed.
Detail panel, before and after. On the left the previous Dover screen listing humidity, visibility, pressure and wind as a table; on the right redesigned W1A and East Ham panels showing the neighbouring hours either side of the one being read.
The three views reworked against those needs. The glance screen gained a written summary and a high and low; the hourly view dropped the colour chips that carried temperature; and the detail panel kept the neighbouring hours in view, so a single hour could be read in context rather than in isolation.

We paired 14-day detail with weather education

People wanted to plan further ahead, but detailed long-range forecasts risked implying more certainty than the data could support.

We explored reducing detail later in the forecast. Testing showed that people preferred hour-by-hour visibility across all 14 days, provided they understood that forecasts could change.

Meteorologist walkthroughs, editorial content and blog pieces helped explain those limits. The app supported planning; the wider service supported understanding.

Diagram: forecast confidence falls across fourteen days while the level of detail shown stays constant, with the wider service carrying the explanation of uncertainty. What we tested Taper the detail after day 7 Matches confidence, but people read it as data withheld Full hourly detail across 14 days Preferred in testing, on the condition that change is explained Where the explanation lives App supports the plan Meteorologists walkthroughs Editorial explains the limits
Rather than solve uncertainty inside the app by removing information, we gave people the full forecast and used the wider service to explain what a fourteen-day forecast can and cannot tell you.
Printed app screens pinned to a wall in two variants, marked up in red pen with notes reading 'too much contrast' and 'too big'.
Legibility review. Printing the same screen against different imagery made contrast failures obvious in a way on-screen review did not, the notes here are what set the text zones and horizon rules.

The background receded as the forecast came into focus

Atmospheric imagery made conditions immediately visible, but it could compete with detailed information.

I introduced clean text zones and consistent horizon rules, then tested difficult conditions such as snow. As people moved into the detail pages and hour-by-hour view, the background blurred and receded so the forecast stayed legible.

The blur was not a decorative effect. It was an accessibility rule: imagery could carry the condition at a glance, then fall back to a plain gradient when people needed to read numbers, timings and warnings.

The rain-on-glass background recedes to a plain gradient as the hourly panel slides into view.
The same behaviour on a different condition, confirming parity across states.

Bringing the weather to life

Weather is a description of something in motion, and the old app rendered it perfectly still.

Symbols animate in place, rays turn, drops fall, lightning flickers, so the condition registers before a word of the screen has been read. The imagery behind them moves as well, so the rain on the glass belongs to the forecast rather than decorating it.

Motion also does structural work. Opening the hourly panel, moving between saved places, letting the background fall back as detail arrives, each transition shows where you came from and where you have arrived, instead of cutting between unrelated screens.

The animation and the imagery do the same job: making the condition legible before the numbers are.

Reference imagery for Window on the Weather, showing natural light, shallow focus and weather seen through glass.
Layered BBC Weather image system diagram showing reusable weather layers and the full set of forty-one layers.
Image crop and composition tests for the BBC Weather app screens pinned up for review.
Work-in-progress BBC Weather app imagery shown across web and native app layouts.
Four BBC Weather app phone screens showing different weather states and locations.
The app imagery became its own system. This carousel gives a preview of the visual language, with the linked case study carrying the production detail.

Results

Growth in signed-in users and an approach adopted beyond Weather

25%increase in signed-in users
No.1in the UK weather-app category
4.7star ratingFrom more than one million ratings.
2other BBC services adopted the approachThe service-design method was subsequently taken up by BBC Sounds and BBC News.
The BBC Weather App Store listing marked Editors' Choice with three app screenshots, beside nine five-star reviews praising the app's clarity, hourly detail and accuracy.
App Store listing and reviews following the relaunch.

Reflection

Two things stayed with me. First, scale can make the safe option feel responsible, but the work only moved once I stopped treating every change as irreversible.

Second, we delivered on time and on budget, but at a pace I would not ask a team to repeat. I count that as a cost of the project, not an achievement.

A tweet addressed to at-bbcweather calling the new BBC Weather app interface and graphics gorgeous, with a screenshot of a snowy Chicago forecast attached.
A tweet from April 2018 describing the writer's wife noticing that the symbols in the BBC Weather app now move.

Unprompted audience response in the weeks after launch. The imagery and the animated symbols were what people noticed first, the detail underneath is what kept them signed in.