You know design system. What about content design system?

Design system has been accepted as one of the cornerstones of digital product and service design world and has been imprinted on all our minds for many years. In fact, for most designers, designing without a design system (or its elements) is now unimaginable. So why has the design system become such a central concept and one that we all need? More importantly, what is the design ecosystem doing to take the design system one step further, and how do we, as SHERPA, aim to contribute to this?

 To answer this question, we can begin by questioning our relationship with the word “system”.

Why do we need systems?

I have a fairly simple answer to this: If a job is to be done more than once, an algorithm needs to be built for it. But what does this have to do with systems?

To better explain, we can start by examining the dictionary definition of “system”. When we do so, we encounter two main definitions:

System (noun)

1. a set of things working together as parts of a mechanism or an interconnecting network;
a complex whole.

2. a set of principles or procedures according to which something is done; 

an organized scheme or method. 

How do these definitions look from our own side as designers? The first definition refers to the products or services for which we design experiences. Every product or service is, in essence, a complex whole, that is, a system. As it can be understood from the first definition, systems are in the form of an interconnected network or parts of a working mechanism. So, they have an order within themselves. This order manifests itself in repetitive patterns in various forms and contexts. Therefore, if we want to create a system, it is easy to encounter elements and connections that are similar or identical throughout its boundaries. 

When we look at the second definition from this point of view, we see the phenomenon that I tried to explain with the algorithm metaphor above. If a system consists of many repetitive patterns, this means that while designing the system, we most definitely will need to design and implement many similar or identical elements. Hence, if we are designing a system, we inevitably will have to do the same task more than once. Therefore, in order to do our design work more effectively and quickly, we can systematize design work itself by shaping it around certain schemes and rules suitable for our system.

So, how do design systems make us systematic?

I mentioned that the concept “design system” is already imprinted in most of our minds. Therefore, I will not explain them at length. Instead, I’ll proceed by briefly touching upon some of the design systems’ aspects, whenever I need them. To begin with, I will try to show how design systems make us systematic by starting from the beginning, that is their definition.

An undoubtable authority in the design field, NN Group describes design systems as follows: “A design system is a complete set of standards intended to manage design at scale using reusable components and patterns.”

If we take a closer look at the definition above, we see that two basic findings about design systems emerge; first, they are for design activities at scale and second, their primary purpose is to organize design activities to increase their manageability (and perhaps speed and efficiency as well). So, what is design at scale? While definitions may differ, at its core it is designing and executing a product or service with a large number of designers, stakeholders (software, product managers, etc.) and business units (marketing, legal, etc.). This translates into a huge system in which many people and structures interact with each other, form a network and have a particular way of working.

So, design systems organize the design and related execution activities of the multi-stakeholder network, that is, the system, where different disciplines come together. It does this by documenting the patterns, elements and the rules attached to them, turning them into a resource or even a common language. Everyone can benefit from this, as the fuel that turns the cogs of this interconnected system between people is communication, in other words language. Organizing and making this language common also means systematizing the design and execution activities.

I hope to have been able to explain how design systems make us systematic. So, how does being systematic increase the manageability, effectiveness and speed of the design activity? A design system accomplishes this in several ways:

• It increases velocity with easy-to-apply and pre-defined plug&play components.
• By defining a common language between teams in different functions, it provides end-to-end consistency and management of communication.
• It increases efficiency of human resources by reducing manual design effort, hence enabling designers to focus on more complex problems.
• It creates a learning and reference point for people who are newly involved in the design process or who criticize/supervise it.
• As the design systems are living assets, they can change according to needs and, in this regard, facilitate changes to be made in the product or service at hand.

To sum up; it is safe to say that a design system allows many different people and businesses to work together quickly, effectively and consistently which, in turn, enables design at scale.

What about content design system?

When the concept “design system” is mentioned, most of us probably think of parts that cover the visual elements in an interface and the rules about them, such as style guides, component libraries and code libraries related to it, right? I don’t think this is a coincidence. Since their emergence, design systems have mostly focused on making the visual elements in the system into repeatable patterns, speeding up and making the work of interaction designers and programmers consistent.

So, is digital interface content, or “content” for short, limited to visual elements only? If by “content” we understand all the information presented to the user in any digital interface; our answer to this question will be no. Contents include not only visual material, but also text and audio. So, how can we systematize all types of content as a whole?

To this end, in the last 2-3 years, a section called “content design system” has emerged and opened up space for itself in design systems. If we were to summarize the concept “content design system” roughly, we can say that it is the “componentization” of the digital interface contents in the design system. Of course, what is meant by componentization here is not technically creating components on any tool like Figma, Sketch etc.. What I mean here is the grouping and designing of content items like components in a way that enables them to be multiplied and have its variants created. The prerequisite for this is a detailed use case, i.e. context. With use cases, contents can be reused or form a pattern. Depending on the detail of the use cases, the types of content that will be brought together and their level of detail may also vary.

What we have said so far may have been a bit abstract and overwhelming. So we can check out an example to grasp the notion more clearly. Our example is from Deliveroo’s work on toggles in its content design system, which accelerated discussions on the topic.

What strikes us first in this example is that a context definition has been made for the content pattern. In other words, Deliveroo explained that toggles are only used to turn a binary state on and off and it can’t be used to answer any action-oriented matters which should be solved with another visual content. After this, we can immediately notice that the text content for this visual content is defined without leaving space for any doubt: Label states the name of the toggled state, subcopy states what happens when it is on or off, etc. Additional definitions and suggestions are also added to support the clarity of the content.

This content pattern draws a very clear and concise framework for each stakeholder involved in the design process. A UX writer can determine which copy to write when a toggle is used, and a UX designer understands that they need to prefer toggles when there is a binary state change. Likewise, other stakeholders evaluating the toggle in design outputs can clearly see and judge if the toggle is used in the right place or if its copy is valid without hesitation. To conclude, the content design system expands the scope of design systems and their ability to document patterns by combining visual, text and audio content.

Our journey will continue

We have briefly gone over what a content design system is and how the design systems’ abilities can be taken one step further. However, content design system is a very rich subject and we will have a lot more to say on it. As SHERPA Team, we have expressed the importance of content for design countless times. So, on our way forward, we are putting huge amounts of thought into content design systems. We still have a long way to go. We hope to share more with you about content design systems in the near future.