An example of a design systems-focused product design role.
So, how did all of this come about? Why are design systems suddenly so popular? And what do all of the terms like UI kit, design language and style guides actually mean? We've put together this comprehensive blog post series to take a deep dive into design systems. Based on internal Adobe research, interviews with 15 experts from organisations like Google, Shopify, Slack and more and a survey of 12 designers working on design systems, here’s our back-to-basics guide.
A brief history of design systems
While design systems are enjoying a moment in the sun and seemingly everyone is launching and evolving theirs, they are actually not a new idea. Andrew Couldwell, a designer who has written a book on design systems, says that “design systems are really nothing new. I’ve been working with them for the best part of a decade. They’re really an evolution of brand guidelines in some ways.” Shawn Cheris, a director of experience design at Adobe, agrees. “Adobe has so many products and the brand team has always had to work to find ways from a visual architecture standpoint to make things feel like they come from one company.”
Going even further back to the built environment, Christopher Alexander started talking about design patterns in the 1970s with the 1977 publication of his book A Pattern Language: Towns, Buildings, Construction. His ideas on reusable design pieces within architecture have been an influence on the practice for several decades. In the 70s and 80s brand guidelines, like the one for NASA or the New York City Transit Authority, outline how visual identity should be expressed and are coveted collectors items today.
A page from the NYC Transit Authority Standards Manual showing examples and combinations of the arrow element. Image Credit: https://standardsmanual.com/pages/original-nycta
Into the digital age, brand and visual identity guidelines continued to inform the online presence of websites and brands. With the proliferation of digital channels like mobile apps, marketing websites, web apps and even voice applications, organisations have realised the need for a cohesive customer experience.
Why design systems and why now
Now, in today’s digital context, we find ourselves in a time when UX and digital product design are taking centre stage. Most organisations have realised the importance of digital as a way to differentiate from, or at least keep up with, their competitors. Enterprise organisations often have several digital product design teams working on different product lines and platforms. For example, in terms of consumer facing products, Airbnb maintains a web presence, an iOS app and an Android app. Then there are also internal applications that are not public facing to consider.
Airbnb payment flow on web and mobile. Image Credit: https://press.airbnb.com/airbnb-launches-pay-less-up-front-a-new-flexible-payment-option-for-travelers/
In addition, this proliferation of digital properties and products across platforms means that content velocity has dramatically increased. “The challenge of content velocity is that designers have to do more than ever before. As a designer, everything I do has to scale - across screens, platforms and people. All of this means that being a designer today is both exciting and daunting,” says Cisco Guzman, director of product management for Adobe XD.
Design systems are a logical move for organisations that find themselves creating products across web, various platforms and form factors. They are a natural result of design teams trying to co-ordinate, while also recognising the potential to reduce the duplication of work. Design systems are also crucial when it comes to driving consistency of brand and experience across products.
What a design system consists of
Centralised Access Point: Often, a design system will have an internal or public facing website or folder (such as a Dropbox or Google Drive folder) that is a centralised resource. This contains documentation of the system and information on design principles, guides on topics like content, design and accessibility and links to the reusable design and development resources.
Reusable Design Resources: UI kits, e.g. an Adobe XD file of UI elements/symbols that are kept up to date. Within Adobe XD, this is a ‘sticker sheet’ that is centralised and can be used when starting on a new set of screen designs.
Reusable Development Resources: A central GIT repository of code-based components that developers can use. These might be in multiple frameworks, e.g. iOS components, react components, HTML//CSS components etc. These are seen as an ‘expression’ of the design system.
Mailchimp’s design system’s publically available website covering design patterns, including code snippets. Image Credit: https://ux.mailchimp.com/patterns/buttons
Why are organisations investing in design systems?
Within design teams and organisations, the case for creating design systems is a compelling one. It’s worth remembering that design systems are not an end -in-and-of-themselves, they are a means to an end and a way to achieve certain outcomes. Different organisations will have different priorities, but based on our research there are some common driving forces behind investment in design systems.
A very popular case for design systems is that of consistency. The desire to have a cohesive feeling brand and experience across multiple products from the same company is brought to life by a shared design system that can be implemented and used by many teams. Often, the need for consistency is determined by an interface or UI audit that showcases the very different UI styles that exist across a brand’s product, for example all of the variations in button styles.
Efficiency is another favourite rationale for creating a design system. Reusable, repeatable components and patterns allow design and development teams to speed up their workflows. They also reduce duplication of effort, as interface elements do not need to be re-created from scratch every time. With the popularity of design sprint approaches, reusable UI component libraries also enable rapid prototyping.
Design systems can also enable smoother collaboration across an organisation. With a defined vision in place for the look, feel and experience of digital products, teams have a better sense of ‘what good looks like’ and can aim to meet an agreed-upon bar that has been collaboratively defined. Contributing back to the design system also allows people to be part of evolving their organisation's system. In this way, design systems can act as a trojan horse for shared vision and breaking down silos.
The four levels of designing and developing systematically
When aiming to create a design system to solve for some of these desired outcomes, teams may go through several stages or levels in getting to a robust design system. Our internal research with Adobe customers and clients has uncovered four levels of designing and developing systematically. These levels are linked to the maturity of a design system approach:
Lindsey Wallace, Ph.D., Sr. Researcher, Adobe Design Research and Strategy
A design system glossary of terms
At each of the above levels of designing and developing systematically, there are various elements and components of a design system that a team might be using. The design field is notorious for arguing about semantics. With the term ‘design systems’ gaining popularity in the last few years, people might be referring to a few different things. There are also debates about what makes a ‘true’ design system.
