Design Systems in Transition

Marianne Guillen
Zalando Design
Published in
6 min readNov 15, 2018

Digital design systems provide foundational guidelines for companies to innovate their products in an orchestrated and accelerated way. They are developed based on business objectives and product requirements and must embody a company’s mission. They typically consist of a set of core principals, well-documented components, guidelines describing voice, tone, imagery and brand, and help extended teams facilitate the innovation and growth of their product.

Illustration by Not Flipper

First, a bit of context…

Traditional design systems are the product of an extraordinary collaboration between designers and their industry clients to scale product development. First seen at the dawn of the industrial revolution in the early 20th century, design systems were initially used to create physical products, from household items to complex machinery. Soon thereafter, some companies had grown to enterprise levels and therefore felt the need to communicate the values of their products through a more holistic representation. Thus arose the concept of corporate identity, a way for companies to clearly communicate who they were and what they stood for. For designers, this meant an exciting opportunity to explore the novelty of the new industrial age. They began to grapple with how to translate traditional visual design criteria of legibility and form into more modern representations of futuristic production techniques and the potential for new ways of life.

Representations of Peter Behrens Corporate Identity work for AEG, 1907.

The creation of the first noteworthy corporate identity system is credited to the German architect and designer Peter Behrens, who designed AEG’s corporate appearance in 1907. That same year Behrens participated in the formation of the German Werkbund, an association whose initial purpose was to establish a partnership between product manufacturers and design professionals in order to improve German competitiveness in the global market. As such, the Werkbund was less an artistic movement, and more of a state-sponsored effort to integrate traditional crafts and industrial mass production techniques.

The need to further orchestrate enterprise-level appearances became more significant in the 60s and 70s, leading to hallmark corporate identities such as IBM, Lufthansa, and NASA, among others. These were the combination of thoughtful design, emotional representation and timeless shapes that continue to give these campaigns a certain cult status. The excellence of their execution lies in their systematic approach and their skillful translation of the traditional principles of typography, shape, color, and contrast, as well as applied mathematical rhythms allowing for scale.

Paul Rand — Evolution of the IBM logo, and Otl Aicher — Lufthansa Corporate Identity

Enter human interface guidelines

With the advent of the digital age, a new derivative of the corporate identity system came on the scene — human interface guidelines. The earliest incarnation of these guidelines was a mixture of instruction manual (similar to something you might receive when buying a new refrigerator) and guidelines based on principles that allow for scale and evolution of interface design. Apple has an iconic status when it comes to human interface guidelines, having published the first of its kind in 1985. The company released a significant update to their guidelines in 1987, outlining 10 Interface Principles which were in use until 2017. These guidelines continue to significantly influence the development of contemporary user interfaces.

Excerpt from the Apple Human Interface Guidelines (1985 DigiBarn Computer Museum — Apple Computer, Inc.)

While these early guidelines were worthy attempts to organize and guide development teams, they haven’t proved sufficient in a digital industry in which everything is constantly changing and moving. If we think of software as a product, for example, and compare it with a non-digital product (let’s say a coffee grinder), we can easily observe that UI development is still incredibly insufficient and messy.

Some examples:

  1. Files get stored on individual designer’s machines with no clarity who owns the latest version.
  2. Similar workflows are interpreted differently by the various designers and their product teams, leading to a disjointed user experience and at times, dead ends.
  3. Specifications are done separately for every delivery, requiring a lot of back-and-forth between engineers, product managers and designers who don’t speak the same language or share the same values.

If we think of software as a product, for example, and compare it with a non-digital product…we can easily observe that UI development is still incredibly insufficient and messy.

The management of assets, constant industry changes and required coordination among various stakeholders remain an ongoing challenge for designers hoping to achieve a high-quality product and meaningful user experience. Design communities have thus turned to software engineering in the hopes of finding ways to allow them to keep up with delivery speed, allowing them the time and headspace to focus on innovation so as not to sacrifice the excellence of their product. Hence the appearance of the digital design system.

How to innovate, quickly

Digital design systems have gained increasing prominence in recent years, and have become a crucial tool in enterprise design management. These systems focus on the development of UI component libraries and prototyping tools that allow designers to quickly build experiences into code.

Design systems don’t come without their own challenges. For instance, how do we create a component library and ensure it stays a single source of truth? And, how do we allow embedded teams to contribute to the library without losing the original intent?

Fortunately, these challenges come with ample opportunities. How might we, for example, create universally standardized UI components? Something similar to the European Standardization of Paper (A2, A3, A4, etc.) applied to form fields, for example. Imagine if Google — and I would argue this is already happening — provides the industry standard for base-level components and allows other development teams to free up resources to focus on feature innovation, rather than constantly reinventing standard components. On the other hand, perhaps such standardization would pose a threat to creativity, considering how many apps already look and feel so similar.

Managing flow while creating a distinct and meaningful product character is going to be a significant challenge for companies in the coming years.

Here at Zalando we are constantly considering these questions and more. Like, how might we use math in UI design in order to construct components algorithmically so they will scale and synchronizes better with each other? Or, how can we create adaptable and fluid UIs that will help us to constantly evolve our products, rather than releasing a complete redesign? A digital product is never a finished product. We never get that moment afforded analog product designers who at some point can sit back and admire their completed good. Managing flow while creating a distinct and meaningful product character is going to be a significant challenge for companies in the coming years. We believe design systems will be a crucial factor in helping to meet this challenge head-on.

Marianne Guillen leads Design Fundamentals at Zalando. We are currently hiring. If you would like to join our team please contact us here.

This article is the first installment in our Design Systems Series. We’re super excited about the topic and would love to hear how your company is tackling design systems, or any other thoughts and comments you might have on the topic.

--

--