BBC News

Social Media Design System

A modular design system for social, enabling consistent publishing across BBC News' sub-brands and channels.

  • Social Media
  • Design System
  • UX/UI Design
  • Project Info  +
  • Project Info  –
BBC News

Social Media Design System

Background

BBC News' social media presence reaches millions of daily followers across Instagram, TikTok, Facebook and YouTube.

With content produced across core sub-brands — BBC News, BBC Verify and BBC InDepth — there were recurring issues: video content being clipped by platform UIs, inconsistent brand expression, and a lack of reusable templates.

Approach

I conducted a thorough UI audit of social media platforms to understand how they render video content across key mobile devices, mapping out content safe areas for each.

I then set about creating a universal template, outlining video and text safe areas - ensuring that no matter which platform content was published to, that it would all be visible.

Outcome

I delivered a foundational design system featuring up-to-date social UI mock-ups with safe-area guidance.

Using Figma, I provided a base set of templates with application examples across all three BBC News sub-brands, demonstrating the clear benefits of templating such output.

project image

I started off by auditing BBC News' social media output. This extended to device type, screen size, image and video post ratio's across social media platforms, formats and content types.

project image

I then ran a series of video tests across social media platforms, as they handle video in a slightly different way. Some UI's take up different amounts of space on screen.

I captured all of this information to create a universal 'base template' to highlight the safe areas for video and text content.

project image

I also created a set of fully editable social UI overlay templates (based on the latest Social UI patterns of the time). This allows for all content and any future design work to be fully tested before publication.

project image

I then set about creating a 'starter pack' of post templates for each of the sub brands - BBC News Standard, BBC Verify and BBC InDepth.

project image
project image
project image
project image
project image

I then designed a Figma 'brand switcher' plugin, which allows a designer to create content for one sub brand. Then by simply duplicating the layout, then can then use the Plugin to simply change the brand to another, by a simple toggle switch.

project image
Next project