Hello, I’m Melanie Seyer and I’m the lead designer of the BBC Weather product within BBC Future Media. In the middle of November we launched a refresh of the Weather site and I would like to tell you a bit about the design process of this project.

From Beta to Live

BBC Weather is a key online product offered across News, iPlayer, Radio and News. The online landscape is changing very rapidly and many platforms (smart phones, tablets and iPTV) offer new design and development opportunities.

The current BBC Weather site was our starting point.

The Vision

Senior Creative Director Ben Gammon came up with a set of design principles, ideas and areas for exploration:

• Move forwards, not backwards: Build on what we currently have rather than starting again from scratch. Many features have developed over the years in response to user needs.
• Simplify: Get straight to the point and tell people if it’s going to rain.
• Inject personality: How might we convey the experience of different weather types? What is BBC Weather and what makes it unique?
• Work with platform differences: We don’t have weather forecasters talking people through our maps and symbols. How might we tell the weather story differently online? How can we make our weather symbols work harder?
• Create context: ...but what context is the user interested in? Is it just local weather or does it extend to holiday planning or event hobbies like gardening?
• Align: The BBC is a global brand and already offers services in different languages - how might we align these under one Weather product?
• Distribute: How do we ensure that the weather can be shown in a shorthand format across the rest of bbc.co.uk – perhaps accompanying Sport event locations such as the Olympics in 2012.
• Multiple access points: Users can now access weather information in different situations and on different devices - from tv, to car radios, to smart phones and iPads. The re-freshed design needs to be flexible enough to work across all of these touchpoints.

After initial in-depth research and a project kick-off workshop we were able to narrow down the situations in which the users could be interested in using weather information. For example could the weather forecast be relevant not only for planning a trip but also for weather updates at the holiday location?

Workshop themes (L) and an overview of situations and related services(R)

We developed key themes for our visual language and for further idea generation.

The kick-off workshop in full play

User-Centred approach

Users have different needs and access information for different reasons, at different locations and times. To offer them the best service we wanted to understand and explore the relationship users have with weather.

For example, these sketches explore when, where and how two imagined users find and use weather information.

Three days in the life of fictional pensioner Steve

A week in the life of fictional employee Bob

We carried out extensive user research with help from Kate Cook, Senior Usability & Accessibility Specialist. This ranged from guerilla testing in Westfield Shoping Centre in nearby Shepherds Bush to netchats, surveys and usability testing with "What People Want" (an external agency).

For any user-centred design, this is a very important part of the design process. Otherwise we designers might make too many assumptions about what our audience needs or wants. It's about identifying and answering core user needs.

Spider diagram of user needs - eg how, why, where and when they might wish to do what.

From this research we were able to identify five types of users:

Land and water hobbyists,

Weather enthusiast,

Eventer and

"Just give me the weather".

As you might expect, the majority of users wanted to get to the essential weather information quickly and in an easy, accessible way.

This insight and feedback helped us to focus on the core information and hence the core design elements. We had a close look at the sitemap structure again and realised that if we wanted to focus on the essentials we needed to flatten the hierarchy and get rid of clutter.

The new trimmed down sitemap.

The old sitemap offered lots of content (highlighted in grey) that was either out of date or very rarely used.

Design and Functionality Concepts

It quickly became apparent that wherever Weather is offered (mobile phones, tablets, desktop, TV or radio) users just want quick access to core information. The way this information is presented and accessed needs to be appropriate for the medium.

Overview sketch of different devices and how users expect them to function. It highlights, for example, which device is more likely to be used in which situation.

Compared to TV, the desktop version adds an "interactivity" factor to the user experience. Instead of watching the forecaster explaining how weather patterns are evolving, the user engages with the weather data to find out exactly what he/she needs.

There is always someone on the TV who guides you through the animated weather information. The context is created for you.

The redesigned weather service gives the audience the core weather information at a glance but gives them the opportunity to explore more detailed information by opening panels (such as for humidity...).

The structured design can help and support the process of exploring information by progressively revealing complexity.

Return of the symbols

Our challenge was to create the most appropriate symbols for use on digital platforms. They needed to work in a variety of contexts: on different background colours, at different sizes and without explanatory text. They had to align with the Global Experience Language (GEL).

Early exploration of weather iconography looked at whether we need to show a weather sequence (A,B,C) ...

... or a snapshot of a certain weather situation (1: Raining cats and dogs, 2: High temperatures, 3: Weather perfect for a picnic)

We found that many of the necessary atttributes could be found in the iconic BBC weather symbols...

The legendary Michael Fish with the iconic weather symbols.

...but they needed to be modernised. Together with UX designer Adam Morris we were able to give the once vintage symbols a new modern face without losing their unique identity. We introduced sharper angles, heavier weights for smaller sizes and a new set of symbols for handling nighttime conditions. We are even trialling a new symbol for drizzle.

Examples of rebuilding and redrawing symbols.

Refining the symbol sets for online use.

The weather at a glance

The results from the user research and early user testings were clear: the majority of users just want the weather information in one glance. Using this knowledge we pulled the essential data together and re-arranged it in a way that made the information easily scanable. We switched from a vertical format to a horizontal format so that all key information would be visible in the first screenful. The design of the forecast tabs meant we could show the 24hr forecast and the 5 day forecast at the same time.

1. It starts with early sketches and ideas - loads of them!

 

2. Sketches become more refined wireframes.

3. The final design solution on a location forecast page.

4. The final design solution on the weather homepage.

Simplifying map functionality

A lot of technical knowledge and design expertise has already been applied to the forecast maps on the Weather site. Nevertheless we wanted to push the boundaries even further by radically simplifying interaction with the map. Furthermore we re-grouped navigation items to make it easier for the audience to spot and understand them.

The new (left) and old (right) map views.

New map, with local closeup-view on the left and the wider UK view on the right.

This solution tested quite well with a lot of users as it helped them put their local weather in a wider context. There are a few technical hurdles to leap before we can implement this on the website.

We also explored other ideas for maps - free from technical and data constraints. The outcome of this exercise might help inform future refinements.

An early sketch combining the five day weather forecast with an interactive map.

Exploration around a map that shows your location plus the sunniest places nearby or (by widening the search radius) around the world.

Exploration around a map that shows the six hottest, coldest, etc. locations around you or around the world – perhaps helping you plan a holiday or short trip.

 

Early explorations around the map slider functionality.

Infographics

A key aim with the refresh was to make the information as readily accessible as possible. We therefore investigated the use of infographics – thinking big first.

One of the data visualisation explorations: how we could visualize the average rainfall and dry weather at a given location in a year.

Comparative infographics: transforming dry facts and figures information into a compelling narrative.

The interactive chart lets users explore different data views – ideal when planning travel or a weekend trip as it lets you compare historical data.

Final interactive solution: using interactive chart module "highcharts.js" to automatically display average conditions.

Introducing weather ambience

As part of the strategy to inject personality we developed background ambiences that reflect the current weather at a selected location. The weather site consists of a lot of facts and figures and we wanted to balance this out by adding a rich, atmospheric welcome.

A lot of ideas and prototypes were explored. Instead of using flash, we worked on a solution using canvas and JavaScript. The work is still in progress and we intend to introduce some more variants soon after the live launch.

 

How it came into being: early sketches and visual explorations around weather ambiences

In the end we had to optimise the elements in the background ambience to implement them efficiently.

Weather elements to be layed into the ambience, on post-it notes.

A beta view of the refreshed BBC Weather homepage

Now live: View of a refreshed BBC Weather location forecast

The new BBC Weather site is a great team effort: from Adam Morris, Stephen Robertson, Will Round (Designers) and Ben Gammon (Senior Creative Director) to Peter Deslandes (Product Manager) and Kate Cook (Senior Usability & Accessibility Specialist).

We also worked really closely with the developers in the BBC Weather team: James Broad, Andrew Nicolaou, Mike Taylor Stuart Wilson, Jeremy Tarling, Senthil Kumar Ramachandran Yoav Felberbaum, Andy Waite and Helen Sherwood-Taylor.

And finally, a big thank you to the audience. We listen carefully to your feedback and we will continue to improve the Weather product to make it the best experience for you.

Melanie Seyer is a Senior Designer in BBC Future Media UX&D

You may also be interested in blog posts by Liz Howell, Head of Weather, announcing the beta and announcing when it became the live Weather site; and the post by Peter Deslandes, Head of BBC Weather Product for future media, giving an update on the new BBC Weather site during the beta.

Updated 17:50 to fix a typo.