Design systems are quickly becoming a must-have for large and small organisations alike. They promote consistency, speed up the design and development processes, and ensure every part of the digital interface is built on the same principles and values. We’ve researched some of the best-in-class examples and identified six shared principles of great design systems.
1. They are built on company values
It’s easy to say that you want to create an “easy, clear and enjoyable” user experience and focus on these principles. But the truth is, no one aims to build interfaces that are difficult, confusing and unpleasant to use, so how will your product stand out from the crowd?
To create an interface that has personality, you need to go beyond the common usability principles and define your brand values. These can focus on the brand, for example Pinterest that described its interface as “lucid, animated, unbreakable”, on the user, as shown by Medium who give writers “direction over choice”, or on internal processes, like the GOV.UK team who aim to “do less, iterate, then iterate again”.
Define 3-5 principles that are true for your product and make sure everyone on the team not only memorises them, but really understands and internalises their meaning. There are many ways in which something can be “bold” or “innovative”, so define how your values translate into UX principles that will guide the creation of your design system.
2. They bring the style guide and pattern library together
A style guide is a document describing your company philosophy and values alongside providing guidance on the content style and branding. A pattern library is a collection of specific design patterns and instructions for their use. In turn, a design system is an umbrella encompassing both the style guide and the pattern library, providing the framework that sets them in motion. On their own, they are little more than instruction manuals, but in the context of a design system they become tools that can help you build and grow your interface.
For example, see how the MailChimp style guide and pattern library complement each other and contribute to a wider design system.
Design systems are multilayered projects. At their core is a dedicated team of designers and developers (typically 3-5 people) working on the project full-time. On the next layers, there are content creators, project managers, as well as other designers and developers who have regular input into how the system is developed and used.
While these will be the people responsible for the project, it’s important that everyone in your organisation is familiar with the design system and the principles and values it is based on but also feels welcome to contribute to it.
“The GOV.UK Design System is for everyone, with a strong community sitting behind it. It brings together the latest research, design and development from across government to make sure it’s representative and relevant for its users.”
GOV.UK Design System: https://design-system.service.gov.uk
4. They are constantly evolving
It might be tempting to assign this project to a team and hope that after a few months of work you can sign it off and move on, but the truth is – design systems are never finished. All great design systems are living organisms that are constantly growing and evolving.
To achieve this, you have to allocate resources to maintain the design system post-launch. Create a framework for monitoring its performance, keep track of things that need to be changed or added and schedule regular reviews. It’s also important to keep track of versioning and plan how you will release the updates to make sure everyone in your organisation is using the latest version.
In addition to this, consider making your design system public. Not only will you be contributing to the collective knowledge base and helping others learn, you may get some valuable insights in return!
5. They place accent on accessibility
If you are doing things right, adhering to accessibility standards might be so ingrained in your design and development process that it doesn’t seem worth mentioning. However, you have to remember that the system you are building will hopefully be used by a wide group of people, some of whom may be less accustomed to thinking about accessibility principles.
Since your design system is the foundation from which your interface will grow, it’s crucial to ensure that all of the design elements, code and content meet the accessibility standards that your organisation is striving for. It’s also important to be explicit about these principles, so that anyone using the system understands the deliberate choices that have been made in order to make the interface accessible.
A great example of this practice is the NHS, which has the following statement on their design system’s homepage: “Your service must be accessible to everyone who needs it. If it is not, you may be breaking the law. Everyone who works on NHS digital services has a role to play in making them accessible and inclusive.”
6. They support automation
Mature design systems contain examples of all UI elements, including design, code and instructions on their usage and behaviour. With these building blocks in place, you should be able to scale your interface with minimal input from designers and developers.
In a workflow where each UX problem is solved once, then documented and reused, the individual interface elements will stack together into components and even pages, freeing your team to focus on the bigger picture. To see this in practice, check out the FT Origami library and how its components seamlessly join to create complex interfaces for the FT brand.
To use the analogy from Brad Frost’s seminal book Atomic Design – when you created your atoms and molecules and defined the laws that govern their behaviour, you will see them coming to life, interacting and evolving like living organisms. This automation seems almost magical, but such is the power of a design system.
Read more about UX terms and practices in our UX glossary blog: https://makeitclear.co.uk/insight/ux-glossary
Read more about how we created a world class user experience for Cambridge University Press https://makeitclear.co.uk/work/cambridge-open-engage
Have a call
We’d love to talk to you about how Make it Clear can support your organisation. Book a call here.