Interview: BBC Weather re-design
In 2011, I was part of a small team that re-designed BBC Weather online. My role involved visual and interaction design. Along with designing core pages to the service, a large part of my work involved bringing back and modernising the classic BBC Weather icon set.
In 2013 I was interviewed by Yuki Fujiwara as part of her thesis on Visualisation of the weather. We spoke about the challenges of designing at scale, iconographic design and the role of online weather vs traditional TV forecasts.
Why does the BBC Weather website need to be re-designed?
At the time of the weather refresh (November 2011), BBC online was going through a phase of redesigning and updating its core products (News, Homepage, TV, Sport & Radio)
The weather refresh project was part of a wider strategy aimed at aligning the BBC global brand online. It also presented an ideal opportunity to take a hard look at the BBC Weather experience online and tackle some core set of known issues from the previous design.
Many features have developed over the years in response to user needs. Therefore we wanted to move forwards, not backwards — building on what we currently have rather than starting again from scratch.
Senior Creative Director Ben Gammon came up with a set of design principles and areas to explore:
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, car radios, smart phones and iPads. The re-freshed design needs to be flexible enough to work across all of these touchpoints.
Could you tell me about the decision making process for the current icon design?
The challenge we faced with representing weather online at the BBC was that on the previous site design, we were relying heavily on the current TV branding and symbology. The realistic representations of weather types were confusing to some users. To compensate for this confusion, the old design had text label descriptions attached to each symbol.
This provided a solid reason to try to simplify the way the weather is depicted on the BBC. And also to create a truly digital identity for weather — to embrace the opportunities of the web.
The realistic representations of the weather works on TV — as you have a presenter explaining what is going on. Our simple, bold iconography had to work really hard for us to aid users when we were packing more information into a smaller space.
The best place to start looking for inspiration to create a new weather icon set was pretty immediate: from the iconic weather symbols of the 1970’s. The core symbol set was so powerful and recognisable that there wasn’t much need to address how certain weather types were depicted. My role was to update the visual style of the icons, and expand the set where necessary (new night time conditions and a new drizzle icon).
I tried to align the visual style of the icons with the current (and now expanded) BBC core icon set
This involved simplifying the form of the icons — from rounded edges to harder ones. Providing rationale and reason to shapes and cuts — for instance basing angles on 30 degrees. The weight & stroke size were increased to work at smaller sizes and the set was designed around consistency of size and placement. This meant they could work in a grid layout by creating a consistent baseline from the base of the cloud.
Colours were inspired by the original set again, but made sure that they conformed to on screen legibility standards. Colour association is really important here. As a user, if I see yellow I know its going to be sunny, if I see blue it’s going to be rainy. We were striving for glancability.
The new icon route allowed for maximum flexibility, being able to place the icons in any context across the BBC at any size easily.
In general, weather types are depicted by the same symbols: such as sunny by the sun, cloudy by clouds. What do you think about other possibilities of visualising weather?
We used analogies that represent the type of weather they are trying to depict. So it made sense to have a sun representing sunny weather. For us there could be no room for mis-interpretation or confusion, we are designing for a massive audience — so this wasn’t necessarily the right time to be too experimental with how to represent the weather.
Since the refresh (we are talking almost 5 years now) there has been a massive influx of weather apps and icon designs. It seems to be the trendy thing to design your own weather app now. However lots of them depict weather in unintuitive ways. Interesting colour gradients may look cool, but doesn’t give users a true sense of what the weather is. Monochrome icons? They just make people have to work harder to know whats going on. Using colour sparingly really aids in this kind of recognition.
I personally feel there are two trends of visualisation for weather forecast. One is minimal icons to use a small interface efficiently without losing visibility. The other is background ambiences using pictures or motion graphics that reflect the current weather at a selected location. What do you think about these trends?
Well we definitely tried to cater for both of these in the weather design. May be we were trying to keep a little of the TV magic and glossy visuals in the design, but we incorporated ambient imagery into the backgrounds of location pages.
These helped provide a backdrop to reflect the current weather at the location a user is looking at. It also helped soften up a page that, once you start to look at it, is filled with facts, figures and icons. These background graphics help mellow out the page.
At the time of designing it, we had the idea that the ambient imagery could parallax across the screen. Adding an element of subtle movement and delight in what may at first glance be a pretty dull page. Unfortunately we couldn’t get these graphics to work on all systems properly without some bad affects on page load and performance. We eventually implemented a static background instead.
I think there is a place for both modern iconography and more graphical representation for weather to avoid too stark an environment.
Do you think is it possible (or necessary) to tell a weather story on web forecast like TV forecast?
I think they are very different situations. The strength of TV weather broadcasting is having the presenter there, to guide you through what is going on. I can listen or just take in the visuals, but you get their expert analysis of this.
Online, it’s all about the individual and what they want. Some people want wind speeds, visibility conditions, pressure. You have to provide a platform for users to get a glance at the weather, but also have the opportunity to deep dive into the kinds of information that is important to them.
Adam is a Product Designer at Made by Many in London.
Further reading:
Creating on brand icongraphy by Me
BBC Weather design refresh on the BBC Blog
