Your product is suffering without a design system.

Product development can feel like an uphill battle in today's fast-paced business environment. The pressure to deliver more value to customers on a faster timeline is no longer the trend but the standard.

Fractured teams are bogged down by technical obstacles and misaligned goals, spending excessive time on low-impact tasks while the quality of their products suffer for it.

When the people working on interconnected products don’t share the same perspective on how features and experiences should be built, the consequences of stagnation and wasted resources can really take a hit to the bottom line.

Enter the design system:

An evergreen repository of design assets and code used by designers, engineers, product managers, and researchers to build consistent and repeatable product experiences.
‍

More than just a collection of buttons and text styles, design systems serve as an extendable framework of rules and patterns that help teams make better product development decisions. 

We’re not saying design systems are the answers to all your problems. But used with other work process methods, design systems may enhance efficiency, accelerate timelines, and ultimately help build stronger, more agile businesses capable of navigating the demands of evolving markets and emerging technologies.

Better product development.

If you’re already familiar with design systems, you’re probably imagining a Figma file containing different UI components like buttons, checkboxes, toggles, colors, typography, etc. And you would be right!

In addition to a component library, design systems can also include:‍

Patterns library

‍Examples of repeatable combinations of UI components for common tasks such as forms and modals.

Design principles

‍Guiding ideas that define the product’s intent and how it’s expressed.

Documentation standards

‍A guide of topics and reference materials for things such as component usage, parameters, styles, content, and more.

‍Code rules and samples

‍Developer documentation and/or sandbox environments to test working components.

Not all design systems are created equal, and some will include more or less from the list above. That said, all design systems share a few defining traits in common.

Design systems are a set of standards.

They establish the foundation for how your customers interact with and experience your product.

When everyone has access to the same rulebook (not just designers and engineers), design system documentation helps facilitate cross-team alignment and ensures that the product vision is consistently realized.

Design systems set a shared product language.

Design systems ensure that every digital touchpoint your customers have with your brand feels consistent. When everything works and looks well together, users take notice. Visual and technical consistency strengthens your brand and builds customer trust as they recognize and appreciate the reliable quality your products.

In a blog post on InfoQ, Bruno Couriol shares an anecdote about Airbnb’s journey in 2018 to consolidate disparate product languages. As Airbnb was expanding its offerings, different product teams were using and customizing the existing design system in ways that were eroding its cohesiveness across services.

Airbnb’s design system transitioned to a monochromatic design and modular architecture, effectively bringing multiple teams under a singular design system that could still serve diverse product needs.

Design systems manage design at scale.

‍

Following a framework structure, updates made to one part of the design system cascade down to all instances of the impacted elements.

The efficiency gained by using existing elements and patterns means that teams can focus more on creative problem-solving and less on repetitive tasks, ultimately promoting value-driven product development.

In a study by Figma’s data science team exploring the time and cost benefits of design systems, participants completed tasks with a design system 34% faster than for tasks without one.
‍

Design systems work across channels.

In order to create cohesive experiences across different platforms and devices, organizations may connect a number of product-specific design systems together to share foundations.

These related systems ensure that product teams can work in harmony with each other without sacrificing their autonomy to tailor solutions to their specific problem space.

Overcoming challenges.

Working with design systems isn’t all sunshine and rainbow-backlit keyboards. Building and maintaining design systems come with their own challenges, but not to fear: all are surmountable with the right combination of planning and creativity.

Design systems are an investment.

It’s easy to talk about all the benefits of design systems, and much harder to actually reap the rewards. The initial investment, both in terms of time and money, can be steep.

Empowering a dedicated design system team to set the direction and navigate technical and logistical complexities is a long journey that may take years to achieve before even one UI component makes it into code. To do it right, organizations need to allocate the right resources to develop a design system framework that will meet both immediate and future needs.

The brightside

‍Implementing a new design system is highly compatible with other broad initiatives to resolve technological incompatibility. If your organization is considering a more holistic undertaking to streamline services and technology, it may be time to consider how a design system might speed up implementation.

Design systems require governance.

All the meticulous work to establish rules and guidelines will be for nothing if no one takes ownership over the design system and holds your products to its standard.

The most effective design systems strike a balance by providing enough governance to clarify do’s and don’ts without being overly prescriptive.

A great example is Apple’s Human Interface Guidelines, which provides excellent direction in telling you the best practices and device-specific rules around components and patterns.

The bright side

‍Getting into the practice of enforcing design system adherence helps teams continuously elevate objectives and align their decisions to the product vision.

With time and proper training, your product teams will start making more consistent design decisions even without direct communication with each other by referencing shared design system resources.

Design system work never stops.

Like houseplants, design systems require a lot of attention and frequent pruning to thrive.
‍

They are never truly complete and must evolve to keep pace with the needs of your business, your customers, and new technology.

If your organization can staff a dedicated design system team, other product teams will benefit from increased bandwidth to focus on innovation and problem solving without the concern that their decisions deviate or break established conventions.

The bright side

‍Continuous iteration on your design system keeps your organization ahead of competition by proactively integrating new technology, components, and patterns into products. Taking smaller, more frequent passes to incorporate updates will reduce the amount of work in the future to overhaul systems.

Getting started.

If you’re realizing all the potential benefits design systems may unlock for your product organization, here are some extra tips to keep in mind as you get started:

• Make the design system a cross-functional initiative and bring together representatives from design, engineering, research, and other departments. The diverse collection of perspectives and skills will ensure that your design system provides value to all members of your organization.
  ‍
• Connect the design system to a bigger organizational goal if possible in order to provide focus to your efforts. Starting small with a defined objective will enable your team to prioritize building the right things first and help them curate a backlog that you can pull into the roadmap for the near future.
  ‍
• Evaluate your needs to determine effort and consider adopting an existing design system framework instead of building one completely from scratch. There are many options available offered by big technology companies like Google and IBM that may be more compatible with your existing infrastructure to jumpstart implementation.

What's next?

What challenges is your team facing? How do you reflect on them and implement changes into your processes? We’d love to hear if any of these reflections resonate with you!

Have a project you’re working on and need some support? Reach out to us.

Do you just want to chat about product, UX, research, process, and methodologies? We’re down for that too. Let's chat.

Do you want to avoid talking to another human being right now? We get it. Sign up for our Curious Communications newsletter to stay up to date on all things UX and other curiosities. We’ll hit your inbox every few weeks.