We took inspiration from the Newsbeat name. Like the beat, the brand is bold, unmistakable, always on and always moving on. The wordmark is designed to react to the beat – when a user hits an action point, this triggers a beat animated sequence which appears at the top of the page. The ‘beat’ part of the wordmark can also act independently from ‘news’ to take on the role of a load animation, among other behaviours.

The grid system is also built on the beat. All compositions always fall on and within this grid, to replicate beats being played on and off the beat. All elements of the grid are divisible by four, to replicate the number of beats which exist within a simple time signature, and to adhere to the existing BBC GEL system.

A unique component of the Newsbeat brand identity system is the colour picking method, using tones found within editorial imagery to highlight key parts of the homepage and article pages.

Motion is built into every aspect of the user experience. Content is always presented within a vertical fluid motion, staggering content in a fluid and paced manner, and vertical motion is used for exaggerated movements or transitions.

We developed a ‘card’ system for content, to help with navigation as well as pacing of content within the page. These cards differentiate between articles, longform stories, social, digest and video content. The cards have considered motion parameters; the tilt is reactive to a user’s feedback, using physics to control the movement. The card tilts, as if positioned upon a central pivot, with reactions based on the strength and position of a user’s interaction.

The BBC Newsbeat site launched in April, followed by the native app in June, with a responsive experience that reacts, behaves and adapts to its users. The first article published on the new site went on to trend on twitter – for a site that aimed to be more sharable and social than any of its peers, this marked a huge success.

"The agency's involvement marked a turning point in the project. Their team was able to very quickly understand what we were trying to achieve, and worked closely with various internal teams of ours to ensure the outcome was a success from a technical, content and brand perspective."

Robin Pembrooke, Head of Product BBC News & Weather Online