One source of truth
Building a design system around collaboration not components
Shafqat and I both joined the British Red Cross (BRC) in June during the lockdown and as you can imagine starting a new job from home can be quite challenging.
Having easy access to information during those times is even more crucial than ever and can really dictate the success of an induction week and even new employee’s happiness. Even though we can all agree that access to information can be improved, there is still a central place where new starters are able to find everything they need, from mandatory training to booking days off and that is immensely useful.
What was the problem?
When it comes to development and design, it’s easy to assume that designers and developers have it all figured out. That every component, style, class, element, button and colour we use on our websites and applications exist somewhere with a label on them and are easily accessible. But with such a big organisation like the British Red Cross, with over 25 websites sitting across 3 different CMS and working with 3 different external agencies, things can get a bit out of hand.
How did it all start?
When Adrien Barbusse, freelance Product Designer started in June 2019, he realised that the only way to design a page on the main website was by using 7 templates on the Sketch app. Whilst ensuring consistency, this was definitely not flexible enough to scale the website.
Joungmin Yoo, in house UX Designer and Adrien started breaking down the website into assets and components using the atomic design system principles and retooled the Digital Team to a leaner design stack — going from using Sketch, Invision, Design system manager to having everything in one place, Figma.
This early version paved the way for the organisation to collaborate on the design of the various British Red Cross websites and applications- including improving accessibility.
But there was still a long way to go…
When Shafqat started, he noticed there was limited documentation about how and when to use certain components.
For example there was no standard in place for spacing and despite having some guidance around colours on the brand guidelines, there was no clear explanation about when to use specific colours on our websites.
Perhaps, this doesn’t sound like a big deal but it is crucial especially for an organisation like the British Red Cross to have consistency and unity across different websites, apps and platforms. As Matthew Swartchz explains in his blog
“inconsistent branding is a self-inflicted wound that undermines your cause and reduces social impact.”
So, in August, we created a small design system team made of two frontend developers, Julio and Ivana, one designer, Shafqat, and myself supporting the definition, workflow and delivery.
We created our own Jira board, we built a backlog, we selected the tools we would use, decided the frequency at which we would meet, we organised weekly Scrum ceremonies and embarked on a (pretty ambitious) journey.
This product has gained some traction and lots of questions are arising so we have decided to start writing blogs for internal and external audiences. We hope this will turn into a series of blogs in which we answer questions, share our challenges, our successes, our hopes and our vision for what we believe to be a critical piece of work. We truly believe in the multiple benefits a BRC Design System would bring not only to our team but to the whole organization and its social mission.
Collaboration is crucial
One of the main issues we found was the lack of collaboration between teams, this is a common issue in many large organisations and it can have serious impacts ranging from tension between people, lack of efficiency and visual discrepancies in our products.
Through the creation of a design system we want to change this and bring more cross team collaboration and a unified vision.
Since August, we have organised calls with the content team, the brand team and the service designers to explain what we are trying to achieve and find ways to involve them in the creation process. As Brad Frost explains
“Design systems are 80 to 90% people stuff, and 10 to 20% design/dev/tools stuff.”
We want everyone to participate, understand what role they can play, what support we need from them and really bring this to life together.
So, for this first blog, we have decided to answer some of the most common questions we’ve heard and make sure we provide some shared understanding around a rather complex topic.
What is a design system?
We can find a few definitions online, some clearer than others, we have selected one that matches our understanding.
“A design system is a collection of reusable components, guided by clear standards, that can be assembled together to build any number of applications.”
If that sounds a bit unclear, imagine going on a website and seeing all the components in their live environment behaving as they would on an actual website! It is a live bank of components, which is invaluable for both designers and developers and anyone creating products and applications for the British Red Cross.
What’s the difference between brand guidelines and a design system?
In our last call with the Brand team, we were asked us a very fair question “we already have brand guidelines and a brand toolkit, so what is the difference between what we already have and the design system? Aren’t they the same?”
Well…. Not exactly but they have some common ground! Brand guidelines dictate how our brand works and mainly relate to how the logo, images, font face and colours should be used to keep our brand image consistent. A design system sits on top of this and goes into more detail for example it includes all the elements in digital interfaces such as typography, grid system, colour usage, navigation, buttons, forms, motion etc.
If we take the example of a button, the design system gives you the different states such as how it looks if it’s already been opened before or when it’s being clicked on or pressed.
It shows how it should look and work on different devices and screen sizes, so when interacted with on a mobile device or a desktop computer. It also explains when to use a specific button and when not to use it. Brand guidelines won’t go and don’t need to go into that much detail.
Why do we need a design system?
At British Red Cross, there are a number of different teams who want to create and launch different digital products or applications to solve different problems.
For example International Family Tracing and Hire a Wheelchair have different objectives and desired outcomes but they both should use the same design elements and a consistent look and feel.
If two different teams are running those projects and don’t work from the same source of truth like a design system, there will be higher chances of inconsistency and the more products we launch, the more teams we create, the bigger the gap will be.
If we look at our products and applications, it is apparent that there are inconsistencies in the look and feel of the user interface elements across our different channels.
The reason for this is that we did not have a central system to determine how everything fits together when re-used in different settings.
What do we want to achieve?
Our aim is to align all these things together and document everything. It is also important to mention that we can’t really give a deadline to the completion of the design system, it is not a fixed project, it is a living product providing clear up-to-date standards for reusable components to create any application keeping the brand image consistent across different channels.
In simple words a design system will bring order to chaos.
“The Design system will act like a glue which keeps different teams together on the same page and the brand image of an organization consistent thus providing a consistent user experience across different channels.” Shafqat Mehmood
Blog written by Agnes Darricau, Delivery Manager at British Red Cross and Shafqat Mehmood, UX/UI Designer at British Red Cross.
