In this series

Part One

Semiotic Constructs in a Design System 02.2018

Introduction

Design systems have been one of the most popular topics of the design discourse of the past year.
This type of systems have existed for decades, and the industry has shown a renewed interest towards incorporating design systems as part of product foundation.

Systematic design is just one of the many attempts that have been made at organizing and streamlining complexity. If we think of a design system as part of a broader set of communication systems, it’s easy to understand that there are many examples which are not only much greater in scope than any modern design language, but also date back thousands of year-end.

We can think of a system as:

An organized set of rules, processes and tools, agreed upon by all parties, which guide the creation and follow the evolution of a complex artifact throughout its lifecycle.

Any type of system is composed by three complementary parts: a systematic component (a set of rules any instance of the system abides to functionally — and visually, in the case of a design system), a semiotic component (which instead focuses on the logical relationship between objects in the system and their significance) and a guidance component, which provides a key to interpret both.

The majority of the conversation on systematic design has revolved so far around processes and tooling, but very little time has been spent on understanding the semiotic implications that transverse any system.
In this essay, I will attempt to expose the underlying semantic structures of systematic design and the mechanisms that contribute to its adoption and success at scale.

A language

Outside the obvious operational benefits of systematic design, the main reason that makes a system successful lies with delivering information coherently across a product and its ecosystem.

Effectively, the system constitutes the interface between the UI and the information which it represents. It is the systems’ job to improve user efficiency in performing actions by delivering an adequate way for people to decode the semantic relationships between signs and their significance.
In short, it’s not the visual consistency, but it is the semantic coherence, with the quality and the amount of information that it delivers, which helps users in performing tasks more effectively.

Having examined a system as a vector which delivers significance allows us to start thinking of systematic design as an exercise of language and semiotic where visual consistency and rigor only represent the tip of the iceberg.

Creating a system

Building a system fundamentally consists of the process around establishing and documenting a relationship between three elements: a signifier (a visual, textual, auditory or haptic affordance), its meaning (what the affordance represents, inside the domain of the system) and an intent (what is the projected outcome from acting upon or consuming the affordance).

The codification process that links signs and signifiers is developed and impacted by daily use, which over time acquires the connotation of a pattern and then crystallizes into a set of conventions.
When these conventions are propagated successfully, all parties are able to act in concert with the established patterns.
Objects and their significance spectrum can vary in range, and nuclear signs can be augmented by the process of addition of further signs.

In any language as well as in systematic design, it is the relationship between function and meaning that makes the system successful (e.g.: operable by both designers and users).

A principled expression

A button (intent: clickable) needs to be accurately interpreted by its audience (significance: I can click this) for the system to be successful.

The following principles provide a framework to help weaving the semantic texture of a communication system.

The first precept is non-contradiction

This means that if we link the sign apple to the sweet, edible fruit which can be found on a tree, we cannot use apple to reference other objects (n.b: the following principle, context, plays an crucial role in this disambiguation).

The second is contextual relevance

In this case the meaning of a sign is affected by the context the sign is used in. When specific context is provided, apple can refer to the electronics company based in Cupertino and not the fruit.
Non-alphanumeric glyphs (e.g.: emojis), which are inherently very information dense, clearly demonstrate this principle.

The last principle is universality

This means that any actor, given proper context and a key to the language conventions, will interpret the meaning of a certain sign the same way (e.g.: no quid pro quo).

Putting it into practice

Now that we have understood the mechanics of significance and the fundamental rules of a communicative system, we can start using the same underlying logic to interpret the world that surrounds us.

Our attention should move towards coherence and semantic value and we should begin using these to meter the efficacy of our system.

Propagating a language

As designers approach a design system, it’s important to keep in mind that the audience might not be privy to the specific conventions that we have established inside of our language.
For systematic design to be accessible, the starting point should be universally understood concepts that both the creators of the system and their audience are already familiar with.

To help distributing a language at scale, consider the following:

Don’t reinvent the wheel

Use familiar metaphors to bind significance to an object: building on top of existing concepts will lower the barrier to access to your system.

Coherent use reinforces meaning

Representing objects and their meaning consistently throughout the system (via semantic coherence) reinforces the bond between a sign and its significance.

Look ahead

Systems, just like languages, are living beings.
They evolve over time and are affected by daily use. Create a modular system that can scale in size without loosing coherence and that can respond organically to a variety of inputs (both endogenous and exogenous).

Misunderstand gracefully

Do not assume that your audience will use the communication system the way you intend them to.
Misinterpreting affordances, or even intentionally “hacking” the system, will create and deliver new semantic value. The creators of the system should embrace these episodes and make sure the system has enough flexibility to be still semantically true to its original purpose.

Wrapping up

Part one of this essay explored the power behind organizing symbols as a coherent language in order to deliver significance in the context of a communication system.

The next chapter will investigate the benefits of using a shared, codified set of conventions across organizations and disciplines; it will also analyze the differences between the different governance models which define many a multitude of properties in a system.