UX and Design
Design systems: why you need them and how to build them
27 March 2023 • 6 min read
A design system is ‘the single source of truth’ for designers. More than just a style guide or design library, it is a complete set of standards that helps designers and developers design at scale and, most importantly, keep the user at the centre of the design. For the latest in our series exploring experience design (XD), Jazz Dodson UX Designer at AND Digital has some tips for building yours.
Consider, for a moment, you're part of a new app development project. From a frontend perspective, it's a blank slate: all you have is a selection of permitted imagery, a list of colours, the brand font, and not much else. Not only are screen designs needed, but all the smaller elements such as input fields, checkboxes, and other user interface elements need to be built too. Where do you even begin?
There are several ways you could do this:
- Design a screen and build it; then design another screen and build that, and so on.
- Design all the screens and then build all the screens.
- Design all the UI components then build the screens.
- Design all the UI components, build all the UI components, and then proceed with the designing and building of the actual app.
The last option is a good description of what a design system actually looks like. While it's more time consuming when starting a project from scratch, the amount of time taken to make changes or expand the app itself can, according to PGS Software, shorten a project’s work hours by up to 45%. It also guarantees consistency in something as small as a button even if someone leaves the project.
So, what is a design system?
The term "design system" can be used in many different ways, typically referring to a variety of design-related documents ─ a library of components, company tone of voice, or colours and logos to use. Nielsen Norman Group defines it as “a complete set of standards intended to manage design at scale using reusable components and patterns.”
Put simply, a design system is a collection of all of the above. It acts as the single source of truth for frontend development. Examples of design systems include Google’s Material Design, Canada Post’s Mercury, and Apple’s Human Interface Guidelines.
Design systems vs style guides
What separates a design system from being just another document is that it is something that should adapt and grow with a company or brand. Rather than merely a collection of colours and number of pixels for how rounded the corners of a button should be, the design system brings it all together; it provides guidance for what a button should look like in all potential states. It's sometimes mistaken for a design library, but the key difference to note is that a design library is purely concerned with visual elements, while a design system will also include the necessary code.
In contrast, while used by both marketing teams and designers, style guides are a subset of a design system. These don't tend to change that often. It provides a set of rules and guidelines for a company’s brand, and typically defines the way colours, logos, fonts, text and other methods of communication should and should not be used. They ensure consistency should someone wish to create a blog post, social media reply or other content for the company. The UK government, for instance, has an A-Z style guide that details how acronyms and spelling should be used. This is to ensure all correspondence is the consistent, regardless of which department it comes from.
Advantages of a design system
Other than saving time (and therefore money), design systems should improve communication between designers and developers. With the system as the single source of truth, it limits the number of minor variations to a component or colour, as it can no longer deviate from the system. Since each element can be built and tested individually, as projects inevitably grow, so too can the number of components, animations, or icons. This is because they will always be based on an existing, tested, working piece of code.
5 common design system mistakes and how to avoid them
Whether justifying the need for a design system or having to make use of an existing one, there are still a few things to look out for that can trip up even the best of us. Here are five common mistakes and ways to avoid them to help you to build better design systems from the get-go.
1. Lack of collaboration between designers and developers
Sadly, one of the biggest issues is designers and developers not collaborating on the system. One of the ways to foster communication is by aligning goals early on being clear on the roles and responsibilities of both teams. There's nothing more frustrating than having a back-and-forth over having to update the roundness of a corner because communication and approval channels have yet to be established.
2. Components for the sake of having them
It's always easier to add than to take away, as it's so easy to think that the additional colour or style is adding value. Yet the components are there to serve a purpose. The more components you add, the more complex the design system becomes. This will inevitably lead to more confusion and increased maintenance work.
3. Lack of hierarchy in the system
Building a flat design system may seem easier to maintain, but the lack of structure can make it difficult to understand the relationships between components. Can an icon sit inside a button? What about cards within a button? Or text fields within cards? Clarity about how components interact with one another will help you to create better guidelines for how the system should be used. An easy way to create the hierarchy of your design system is through the atomic methodology. Think of the components as atoms, molecules and organisms; they come together to form larger, more complex pieces.
4. No purpose behind the system
As with all products, design systems are there to solve a problem. The whole team must be aligned with the purpose of the system. When we first worked with Numark Digital to rebrand an app, the initial purpose of the basic design library was to speed up the rebranding by having a collection of approved components. Although it has since evolved as we continue working alongside them, being explicit about this fundamental purpose ensured there was alignment from the very beginning of the project.
5. Forgetting about the user
The user should be at the heart of everything we do; that's why the design system should, ultimately, revolve around them. Data is a good place to begin; failing to make use of it will undermine the quality and effectiveness of your design system. Where possible, get users to test the elements of your design system by incorporating it into prototypes. Find out if the components are working for them. We are, after all, designing these products for the user, not ourselves.
Conclusion
No matter how you tackle a project, make sure you consider the user, as well as the maintainability of both the technical and design aspects of the project. Sometimes a design library and a handful of coded design tokens is enough; other times you may need a fully modular system. If you do want to go down the design system route, Atomic Design by Brad Frost is a great start.
Additional resources
