We need to be able to design and build content and services that are:
- accessible, clear and easy to use
- recognisable and trusted by our users
- easy to adjust and grow with our charity
And we need to be able to do that quickly.
We built the design system: an open-source website to help us create products that work for our users – particularly vulnerable children and young people. It includes:
- guidance on typography, how to create forms, and how to write content
- examples in code for solutions to common problems such as creating standardised content features
- live examples in code that can be copied straight into a product
Developing the design system
The design system is the product of designers and web developers working together.
They created a common language that both teams could communicate with. This ensures clarity and speeds up development. It seems simple, but we’d never seen it done before, which was exciting.
We researched our users’ needs and made sure all the examples are easy to use for those with hearing and/or visual impairments. So all our products are inclusive from the beginning.
Then we created a set of example code templates, plus some ready-coded items, and stored them in a single place where all our teams can access them. When changes are made to ready-coded items, they are automatically updated in our products and services.
Using the design system
All our developers and designers have access to the design system. When we all work from the same guidelines we ensure that:
- our products are accessible and consistent
- developing future products is cost and time efficient
The design system is a living product. We’ll continue to iterate and improve it based on the feedback we get – particularly from children and young people – and share our progress.
Find out more
Learn more about how we built the design system.
If you're a designer or developer at Barnardo's and think the design system needs to cover common patterns that you're working on, get in touch.