The lessons learnt creating a design system for BBC Online

Written by Dave Morris and Josh Tumath who are part of something called the Presentation Layer team; a team working on the design system and React front-end for the new BBC website

Dave Morris
Nov 20, 2020 · 9 min read

A short history lesson

An overview of the design system, showing components, colour palettes and typography

1. Make it as easy as possible to share

A selection of teams with the design system in the middle of them. Arrows indicate stuff going to and from the design system
A selection of teams with the design system in the middle of them. Arrows indicate stuff going to and from the design system
Each team contributes and reuses from the design system. It’s a give and take relationship

2. Do things on a need to make basis

3. The reinvention of the wheel

4. Be strict to allow for flexibility

Two sets of levers. One controls the colours and the other controls the typography.
Just pull some levers and hey presto — you’ve got a website! (Provided you plug in the right data sources for the content too)

5. Documentation is hard, but important

A screenshot of a pagination component as shown in the component library. The component library is built using Storybook.
A screenshot of a pagination component as shown in the component library. The component library is built using Storybook.
Storybook catalogues our reusable components and contains other documentation

6. Design for longevity through obsolescence

BBC Product & Technology

BBC Product & Technology