The term ‘design system’ has been gaining traction in the last few years. Companies across the globe are either thinking of, are in the process of, or have just finished (if that’s even possible) building one. But what’s all the fuss about? What are design systems and why do we need them?
In her book, Thinking in Systems, Donella H. Meadows described a system as being an ‘interconnected set of elements, that are coherently organised to achieve something.’ This phrase perfectly encapsulates what a design system is and points to the benefit they provide. That’s a great start, but let’s get a bit more specific. Nathan Curtis, a giant in the design systems community, crafted this definition of design systems:
Almost always, a design system offers a library of visual style and components documented and released as reusable code for developers and/or tool(s) for designers. A system may also offer guidance on accessibility, page layout, and editorial and less often branding, data viz, UX patterns, and other tools. A design system is adopted by and supported for other teams making experiences. These teams use it to develop and ship features more efficiently to form a more cohesive customer journey. A design system is made by an individual, team, and/or community. While some arise less formally, organisations now dedicate small to large squads to develop and release system versions and processes over time.
Based on these definitions, design systems sound really awesome already. But let’s look at the value you get for all the investment needed to build one. Picture this – you’re a global organisation, building digital products. Your teams are distributed across the world. How do they know what UI code to share? When should they share? How do they share their intent and decisions and make them visible to the rest of the organisation? Design systems have answers to these questions, and more.
Here’s a small taster of what a design system can do for you. The ability to onboard a new team member with a link to your design system is powerful. The one-to-one relationship between code in production and description in the system documentation makes your products easily discoverable when onboarding new developers and designers to your team. It will also simplify rotations from one team to another as everything should feel familiar.
A well implemented system will, by its very nature, drive consistency. Having a single point of reference for engineering and UX decisions will smooth some of the kinks in your product delivery and result in a better experience for your users. Time is extremely precious and, let’s face it, no one wants to rebuild that red button for the nth time. With a robust set of pre-built components, patterns and guidelines to drive their use, the amount of code and the time needed to develop the UI for your product will decrease. This should also streamline the testing strategy for your app.
Bringing design and engineering closer to together will ultimately lead to a better product and a healthier culture. Being able to confidently say “The content for this select is XYZ” and have everyone in the room actually know what a select is will minimise confusion, one of the most costly sources of defects.
Design systems are as much about people as they are about building products. A design system is a product that serves delivery teams (groups of people) allowing them to build great products quickly and consistently for their users (also people). Design systems are by no means a silver bullet, but they go a long way towards optimising product delivery and helping teams make brilliant products.