Design systems

One of my team (Pinky) who has extensive experience of design systems, articulated a very important point using the analogy of Lego and I wanted to share the beautiful simplicity of her analogy.

Design systems are not a silver bullet. They will not magically and completely remove the need for UX, visual designers or developers. They make construction of digital solutions quicker, easier, cheaper and consistent. They allow best practice usability to be automatically implemented, brand to be automatically included and core functionality to be componentised and consistent. Much like Lego bricks.

However, just like Lego bricks, you can create a masterpiece or a pile of vomit.

Design systems are a popular topic in organisations, but there are some strengths and weaknesses that should be understood before you decide if they are for you. They are very useful when they work but, like other systems, they are wasteful and costly if used inappropriately or religiously and some organisations have no use for design systems at all.

Additionally, as we often see with Agile or Design Thinking, the maturity model, understanding and deliberate interpretation, often caused by unwitting confirmation bias, means that there are many inaccurate, inconsistent and inefficient interpretations of Design Systems being spread around, leading to wasteful work and discussions.

What is a Design System?

A Design system is, at its core, a granular set of reusable, standard, consistent digital components that represent an organisation digital presence. A library of digital assets that can be updated or checked out and used by Devs, Designers and UXers. As a digital requirement is defined, a corresponding design system component can be created or identified and reused, saving time and money, whilst ensuring guaranteed brand and consistent interaction. Unfortunately, much like UX itself, design systems are built in a varying number ways on a scale of helpful to pointless. Obviously UX and Design Systems should be done in one, consistent, effective way. Good Design Systems have 3 component parts:

• The UX component: allowing the UX team to create prototypes quickly that are consistent for the organisation. This can be in the form of a wireframe library component, but more often (and far more usefully) a smart prototype library component that exemplifies not only the layout and responsive versions, but also the actions and behaviours of the component, such as the ones you can create in Axure.
• The Visual UI component: allowing the UI designers to create the hi-fi design version of the component in line with the UX prototype. There is usually an accompanying style guide to ensure that newly created elements are in line with design standards and brand guidelines.
• The code component: built however the developers feel is most aligned to the language(s) or framework(s) of the day and reusable as a code object, component or snippet. It also allows them to maintain a stylesheet that reflects the brand and component layout, ensuring updates are swift and all encompassing. This ensures the delivered, coded component aligns with the UX defined functionality and the UI visual design.

The Benefit

Design Systems offer the obvious benefit that if your brand, interaction, look and feel etc are consistent (which they should be, even if you are a one-man-band) then you have UX, code and design components that are, more or less, drag and droppable into new products and services, saving redesign and recoding, avoiding inconsistencies and reducing the time and cost to go to market.

They allow the UX team to use a library of smart prototype components that ensure consistent brand, governance and behaviour of the digital assets being built for the organisation.

They allow the developers to use predefined code and stylesheet snippets/objects etc that work together seamlessly, represent the the UX functionality and UI design components automatically and need only the lightest configuration.

They allow the UI designers to set out the brand and visual design guidance so it can be either brought together quickly for presentation or communicated to the developers easily.

Over all design systems also allow the UX, Developers and UI team to collaborate and evolve standard components in advance of deliverable work, increasing the speed of delivery of subsequent projects.

But beware, if the components are not UX'd, assumed or poorly designed, they will not deliver the advantages to the end product that you are hoping for. Even then, just slapping them on the page will not make the final solution usable, intuitive or effective.

When a Design System is useful

Design systems are not just a cool buzz word or latest trend. Well ok, maybe they are a bit. Nonetheless, done properly, they offer real efficiencies if you work in house on your own organisation's products and services, or when you work regularly with a client organisation.

When a Design System is not useful

It is very important to acknowledge that Design Systems are (like any other system, method or process) not appropriate for every situation. And if you try to implement them everywhere, without consideration for their purpose, they will waste time and money: literally the antithesis of their genesis.

An excellent, consistent and reliable example of this is trying to create a design system when you work for multiple, ever changing clients, as experienced when working in a Consultancy or an Agency. There is no efficiency to be gained by trying to create a workable design system for each and every client, and this is only compounded where project deadlines are already an issue. It is a false economy and a glib interpretation of the facts to suggest that as deadlines are so tight we need a design system to speed things up. If its not your organisation, or one of your very regular clients, then creating a design system just adds time and cost to the project, not efficiency.

Sometimes Design Systems can be consumed if they exist within your client's organisation, but even then it is important to evaluate whether this consumption and familiarisation overhead offers time and cost benefits to the project. After all, that is the purpose of a Design system.