Tools: Easing and Colour Contrast Checker

BBC News  

In preparation for the General Election 2024, I developed two key tools to support the design process: a Colour Contrast Checker built in Figma to ensure all designs adhered to accessibility standards, and a motion easing tool that enabled designers to quickly apply consistent motion effects across all election-related content. These tools were critical in handling the fast-paced, high-pressure demands of election coverage.

Screenshot 2024-09-30 at 10.40.55

I built both tools from scratch, prioritizing functionality, flexibility, and seamless integration into the existing workflow. The Colour Contrast Checker ensured that evolving colour palettes remained accessible and compliant with BBC’s guidelines, regardless of how the design changed during the production cycle. The motion easing tool streamlined the animation process, allowing for rapid, consistent application of motion effects, which was crucial in delivering high-quality content under tight deadlines.

Screenshot 2024-09-30 at 10.32.43

Designed for a fast-paced, high-stakes environment, these tools supported real-time updates, enabling designers to apply instant adjustments without sacrificing quality. The Colour Contrast Checker allowed the team to ensure every design was accessible, even as the colour schemes evolved. The motion easing tool ensured that animations remained consistent and polished, while reducing the manual effort required to implement motion effects across multiple assets. These tools became vital in managing the large-scale design rollouts required for election night coverage.

Screenshot 2024-09-30 at 10.38.35
Screenshot 2024-09-30 at 10.32.43
Screenshot 2024-09-30 at 10.30.47
Screenshot 2024-09-30 at 10.27.26
Screenshot 2024-09-30 at 10.38.35
Screenshot 2024-09-30 at 10.38.21

Both tools became essential components of the design team’s workflow, enabling the team to meet accessibility standards and maintain motion consistency across all assets. Their flexibility allowed them to be easily integrated into ongoing projects, adapting to evolving design requirements without slowing down production. The tools played a crucial role in streamlining workflows and ensuring that the team could meet tight election deadlines while maintaining high-quality, accessible designs.

CREDIT

Head of Design: Sue Vago

Design Directors: Oli Powell

Lead Designer: Andrew Haris

Developer: Alex Kessling

BBC News Design / Elections Team

Selected Works

MY WORLDBranding

DarsProject type

BBC News - Motion ComponentsPrudtion Pipeline

ToolsDev

MILK - ExplainerExplainer

ExpressionsProject type

Journey - Story BoardsConcept Design, Illustration