An Introduction to Design Systems

Reusability is a key principle in software development. It has been built into every aspect of modern product development. Programming languages enable reusability with built-in features like inheritance and polymorphism. We have SDKs and frameworks that most products are now built on top of that provide the basic building blocks for features. We bundle related specialised features into libraries to distribute/consume via dependency managers. Design systems are a natural evolution to the same principle. They are key to scaling product development (particularly front end development) and maintaining a consistent brand identity. This may sound like an engineer's take on the topic but we are seeing the rise of reusability in design tools as well.

What is a design system?

There is no agreed upon definition of a design system in the industry. A design system is a versatile concept, open to interpretation depending on one's role within an organisation. To a designer, it embodies design principles, patterns, branding elements, and a UI Kit. For a developer, it translates into a collection of coded components and styles. The brand team, on the other hand, sees it primarily as a repository of branding guidelines and the essence of brand identity. Dan Mall summaries this really well:

A mature design system is a combination of all of these elements. It provides and enables a streamlining of expectations and understanding of all the competences described above. The success of such an endeavour relies on all of these competences coming together to work towards the common goal. These concerns have to be solved centrally for the wider organisation to extract the most value from the design system.

Benefits of a design system

Design systems have incredible return on investment. The benefits described below are in no order of importance. Some organisations may value one benefit more than others but every design system delivers on these

Reduce cost

Design systems allow organisations to develop products faster and cheaper. This is achieved by freeing up the designers and developers from continuously having to think about solved problems in design and reinventing the wheel. Design system provides building blocks for designers and developers to deliver on-brand user experiences more efficiently.

Improved branding

Design systems allow organisations to embed key branding elements in design principles, styles and components. This enables the product teams to incorporate the brand into designs easily and ensures consistency of brand across the product(s) and platforms.

Enabling innovation

Design systems take the mundane away from the product teams and allow them to solve user problems that only they can solve. The teams can dedicate more time to identify, test and deliver innovative solutions to user problems this way.

Reduced cost of onboarding

Scaling the team brings with it onboarding challenges. Each new designer and developer added to the team would need to learn the design and branding guidelines of the company. A design system cuts through this by making it easier for the team to create on-brand experiences.

Improved accessibility

Design systems allow organisations to build accessible user experiences from the ground up. Accessibility can not be an afterthought in the product. It has to be considered from design and carried to development. An accessible design system makes it easier for the teams to roll out accessible user experience.

Well Known design systems

It is worth looking at some well known design systems in the industry. You may notice differences and similarities between these as you peruse. This highlights the fact

Spotify Encore

Spotify does a great job of sharing their learnings with the industry. They announced Encore in November 2019. They updated the visual identity of the brand and adopted better scale strategies. Spotify's blog is a great resource for learning from their experiences.

IBM Carbon

Carbon is IBM’s open source design system for products and digital experiences. With the IBM Design Language as its foundation, the system consists of working code, design tools and resources, human interface guidelines, and a vibrant community of contributors.

Neo4j Needle

Needle is a collection of reusable components, tools, and resources to set the foundation for the Neo4j brand and to help build consistent, high-quality user experiences throughout the company ecosystem.

Shopify Polaris

Polaris is Shopify's design system that shapes the merchant experience for their primary product, the admin. They provide extensive resources for designers and developers to get started with building inerfaces using the design system.

We are in the process of curating a collection of design systems on this site too. Please add your favorite design system if it's missing!

I hope this post gives you a starting point for your journey in learning about design systems. It is a fascinating topic that is widely under discussion at the moment across the industry. Design system can be a significant investment for the organisation. However the wide adoption of this concept we are currently witnessing in the industry is a testament to the benefits organisations are reaping from this investment.