BBC News
Social Media Design System
A modular design system for social, enabling consistent publishing across BBC News' sub-brands and channels.
Background and context
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.
Role and 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.
An output format audit / cheatsheet - to understand the social output landscape across BBC News and its sub-brands (BBC Verify & BBC InDepth).
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.
Video testing across social platforms - with safe areas on the right side.
Like many organisations with a social media presence, BBC News' social media team creates a single video, which would then be published across all of their social channels.
As each platform and output preference (eg. reels, shorts, stories) handle video in a slightly different way, I ran a series of video tests to accurately determine safe zones.
This would resolve the issue of content and text being cut out or covered by platform UI and varying mobile phone sizes.
I created a full set of editable social UI templates in Figma, which could then be used as mock-ups across different software.
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.
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.
I then designed a Figma 'brand switcher' plugin, which allows a designer to create content for one 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.
