BBC Weather

Mobile Digital Design

Truly, this is an institution that needs no introduction, as millions of people gravitate every week to the BBC Weather digital service.
It was our absolute pleasure to play a pivotal role in updating and defining the mobile platforms, as well as bringing animation to those in the UK and across the world through this mobile app.

We were contracted to redesign the Mobile, Android, iOS and tablet while also animating and integrating the weather icons.

The whole platform went through a redesign to facilitate the data handover from the Met Office to MeteoGroup.

The anatomy of the products is deceptively simple but also vastly complicated because of the illustrative usage of typography, which was reworked so that the user interface was modular across multiple formats.
The main screen has three components that were reworked so that the components could scale upwards and downwards, depending on the format. The iPhone 7 and Android MDPI were used as the flagship devices.
The day tabs are an example of this. Across all platforms, the component is identical, with the pixel dimensions for MDPI on the iPhone the same as they are on a tablet on Android. They sit perfectly, even on the 8px pixel grid, and help to form the digital design of the new BBC Weather app.

Widget

The widget was created by taking the essence of the BBC Weather app and designing it so that the user could be quickly receive top-level weather information, including the weather at their location, a written daily summary and the temperature. We also made ‘the feels like’ graphic cue both glanceable and accessible.
The widget provides just enough information to satisfy time-poor, detail-driven users, as well as more visually-driven people. Both types of users can be satisfied by it and adapt their behaviour, depending on what piece of information appeals to them the most. All the pieces work together to provide a comprehensive technical and visual depiction of current weather conditions.

We believed that the focal point of the widget should be the written summary it provides, including information about what’s required to prepare for the weather conditions. Then, after that, of secondary importance, are the temperature and chances of rain.
We deprioritised the location, because we believed that user interaction with the widget had a simplified dynamic. It was useful for situations where the user just wanted to get up and go, compared with the full app experience, which is more about planning ahead and checking future weather conditions.

The concept of the widget was to provide information about the next hour at a glance, but the next hour widget was expanded and displayed technical secondary information that summarised the next 4 hours. This was consistent with the in-app experience.
The secondary summaries gave less information but still gave enough to give the user a comprehensive view of the immediate short-term weather. The widget’s variations and structure have been maintained to this day and the app experience is used by millions on a daily basis.

Adding Motion to the BBC Weather experience.

There are 32 different weather states within the BBC Weather app and 16 of them are representative of the different weather conditions of the day, and motion has been applied to them all.
They were created and remade in Adobe Illustrator to make them crisp and they can be resized and rendered at any size.
Each of the weather icons was redrawn in Illustrator with clouds being the centrally fixed reference. The canvas was kept at the same size and there are two sets of icons, one to be animated at the large size and another at the smallest size.

Weather icons - day instances, animating

The icons were then keyframed so the motion could be eased from one state to another, which means they can be looped seamlessly. The icons were balanced against each other in the app. The clouds are the central focus of the animation, but not the actual centre point, so balancing was required so that the icons wouldn’t jump when the user moved from one day to another.

Bodymoving and a Lottie plugin facilitated the exporting of the After Effects assets to the iOS format, enabling development to resize and reuse them. They were methodically tested to identify where they glitched and at what size, and to reduce ‘jumping’ in the overall layout.

With the changing icons, modernisation of the assets and the looping addition of the weather states, these elements added both delight and innocence to the weather experience in a way that only the BBC can offer.
The animations, in combination with the graphic user interface, the on-point structure of the information and the MeteoGroup data have made it a truly a first-class multi-platform digital experience that delights millions of people in the UK and globally.
The imagery and animation were generally well received and helped to maintain the 5-star reviews across both app stores.
It met the BBC’s internal creative goals of applying motion into experience pieces and was given warm reviews by the industry, while users see it as a genuine leap forward that meets the values the BBC stands for.

Generative Research to find and frame problems

Research

Thinking around defining unique aesthetics for brand strategy

Brand Design

Thoughts around the future of brand narrative

Brand Strategy

Using Systems thinking to make sense of any subject matter

Information Architecture