Design Systems — What’s the tea?
Part one — A useful guide on best practices & insights from first-hand experiences.
My name is Flo, I am based in Berlin and I am a UI Designer working for diconium on Volkswagen projects. I studied Design and Advertising at OCAD University in Toronto, Canada. Since graduating, my focus has been on Interface Design.
I come from a time (not to make me sound old) when Design Systems didn’t exist as we know them today. During University and my first years in the industry, Photoshop was the main tool in the market. To create an interface then, we would have an excessive amount of layers within several files. We needed to have a high level of order and communication for the teams to work efficiently. CI’s (or visual identity guidelines) were the northern star and the word ‘assets’ was key to any designer. I have worked for several interesting clients on the agency side. Since moving to Germany my main focus has been within the Automotive industry.
A dear professor of mine told me that I wouldn’t make it in Advertising. With time and personal growth, I came to realize why. I am a creative and resourceful person by nature. Moreover, I like the organization and ticking items on ever-evolving lists. These characteristics led me to diverge from the chaotic, spontaneous, and wild nature of advertising and lean towards design. As I followed this path, I developed a strong interest in Design Systems due to their similar nature.
Introduction
Have you Googled “Design Systems” and landed here? Chances are you need additional information or are new to the topic. I would like to get your wheels spinning and provide you with insight and resources on the subject. This first post on my experience on the matter is an overview that will help you dive deeper, question yourself, and re-evaluate your work.
Donella Meadows (1941–2001) is the author of the book called "Thinking in Systems". She was a scientist trained in chemistry and biophysics (Ph.D., Harvard University), followed by a research fellowship at MIT. There she worked with Jay Forrester, the inventor of system dynamics.
By reading her book, you will get a better impression and understanding of how systems work. It offers insight for problem-solving on scales ranging from the personal to the global.
In her book, Donella explains that:
“We are complex systems—our own bodies are magnificent examples of integrated, interconnected, self-maintaining complexity. Every person we encounter, every organization, every animal, garden, tree, and forest is a complex system. We have built up intuitively, without analysis, often without words, a practical understanding of how these systems work, and how to work with them.”
A very brief background on UX
User experience has been around for decades. Yet, it wasn’t until 1993 when Apple’s cognitive scientist Donal Norman pinned down a term. He needed a name that embraced the whole meaning of what he did. As Apple’s User Experience Architect, Norman becomes the first person to have UX in his job title. Watch Don explain what UX is. Norman says:
“I invented the term because I thought human interface and usability were too narrow: I wanted to cover all aspects of the person’s experience with a system, including industrial design, graphics, the interface, the physical interaction, and the manual.”
The great press coverage of usability turned UX into the latest trend. This occurred in the 2000s, despite it existing for longer than that. It showed growth, particularly when the internet bubble burst. The acquired publicity UX gained made many businesses get on board. UX and all its derivatives weren’t as defined as we know them today. During this decade, UX will boom and continue to evolve within the industry.
How about Design Systems? In a way, these are the next step from CI’s or Brand Guidelines. They are the most current version of Brand Guidelines when building a product. Designer Andrew Couldwell goes in-depth on the topic in the book “Laying out the foundations.”
What are Design Systems?
Design Systems are ecosystems. They provide a collection of rules, principles, philosophies, code snippets, and best practices. Thus encapsulating a comprehensive guide for product design teams. They are the point of truth that is used to develop products by establishing a common language for the team. Design Systems are flexible structures allowing designers and developers to build digital products. Design Systems are more than the sum of their parts. They are complex due to the interconnectivity and dependencies of all their parts. They present flexibility, have goals, can adapt, and be self-preserving.
A Design System is a product where everything works in unison to achieve a cohesive look. There is no such thing as a small change, one needs to take account of the whole ecosystem. Design Systems consist of lego-block-like components that build upon one another. Hence the need to have an overview of the bigger picture.
Feedback loops also play an important role in shaping the system.
“Changing one variable in a system will affect other variables in that system and other systems. A designer must not only consider particular elements of a design but also their relation to the design as a whole and the greater environment”
— explains William Lidwell in the book Universal Principles of Design.
What makes up a Design System?
Systems must consist of three main things: interconnections, elements, and function or a purpose. A Design System’s function or purpose is to serve as a centralized source of knowledge.
The elements consist of two important sections; a Style Guide & a Component Library. Components, patterns, and styling are all necessary to build the Design System. Documentation is important for a better understanding of the intentions and purpose. It should also be released with reusable code snippets for developers. This makes it easier for designed components to be understood.
Design Systems consist of lego-block-like components that have several moving pieces depending on their setup. This includes several people working on it from different angles (UX, UI, Dev.) which allows the interconnectivity to come into place.
Why are they important and worth the investment?
Digital companies rely on Design Systems to build their products. Companies also use them to serve a cohesive experience to the end-user. Design Systems serve to unify product development and help prevent technical debt.
Design Systems establish the communication and the workflow between units. When UX focuses on the experience as a whole, UI is focusing on interaction and behavior, and Frontend is focusing on integration; no wonder why they could end up speaking different languages.
Building a Design System is an investment. It may take some time to ramp up and get established within your team or company. If you look at it from a scalability perspective you will see how it pays dividends. In summary, by opting to build one of these for your product you will gain:
Consistency: Every team will be using the Design System to work with, which will help achieve consistency over time.
Clarity: Design Systems free designers and developers from redundancies. Teams will speak the same language across products, platforms, or projects by having a single point of truth.
Collaboration: Teams using Design Systems will experience smoother collaboration. They will have the same goal, which is helping the Design System evolve.
Scalability: It helps products that are growing and evolving.
Money: As there is less room to err, and more room for growth, your team will benefit and save time and costs. Furthermore, in the future, Design Systems will help automate parts of the designer’s role.
Gavin Harvey, a platform design manager at Google (former designer at Adobe) explains:
“Design systems are a precursor to a revolutionary change in how we design software. The process of building software is about a lot more than assembly, we need designers to look beyond components to usability, task flow, and how the interactions are driving users towards success.”
But… Why now?
“The secret of change is to focus all your energy, not on fighting the old, but on building the new” - Socrates.
Design Systems aren’t something new. They are the evolution of something that already existed to share a brand’s identity. Patterns, documentation, and codes help create a stronger, better, and more consistent product.
They will not completely overhaul the way work gets done, but they will improve workflows. Design Systems will help you manage your products, as your team shifts to a holistic mindset.
