Introducing the Barnardo’s Design System
Kellie and Rich are a developer and designer at Barnardo’s building digital products that create better outcomes for more children.
The two of them are building the Barnardo’s Design System to help our colleagues create their products efficiently.
Kellie explains how the Design System was made, how it works, and what its benefits are.
What are the benefits of the Design System?
Designers and developers want to focus their time on solving the problems unique to their product, instead of spending time reinventing the wheel on things like how navigation should work or what a button should look like.
As well as saving time, it also provides a consistent and familiar experience across Barnardo’s products, particularly for children and young people. This builds trust and makes our products easier to use.
How does the Design System work?
By providing standards (such as colour and typography) and components (such as navigation and forms) to solve common problems, we can reduce unnecessary duplication and ensure a consistent experience.
Although products can have very different user needs and challenges, they rely on the same set of common standards and components.
For example, the Impact Report, which shows how many people Barnardo’s has supported, and the iTRI campaign, a triathlon raising money for Barnardo’s, are for two very different purposes but look and behave in a similar way.
How have we created the Design System?
We conduct research into each standard and component we publish, and test them using accessibility tools to ensure they can be used by everybody. We also take feedback from teams using the Design System, and from workshops where we design with children and young people.
We set out to work together in the most efficient way. Based on our past experience, designers and developers usually work in separate teams, causing a lengthy process of sending design files back and forth to interpret and build from.
We chose not to use design tools like Sketch and Photoshop to avoid this back and forth process, and instead we design directly in the browser. Working closely and having regular conversations allows us to keep the code simple and better embrace the opportunities and constraints of building products online. Products that will stand the test of time.
Richard is a UX Developer and Kellie is a UX Designer in the Barnardo’s digital team. To find out more about the work Barnardo’s are doing, subscribe to blog.barnar.do on Medium, and follow #futurebarnardos on Twitter.
