21-Insights-The-secret-sauce-of-design-systems

The secret sauce of design systems

We believe that the best predictor for a design system’s success lies in a profound human understanding. We’ve worked with several diverse clients on multiple types of design systems. Their joys and growing pains have been ours, too.
Article

But first, what is a design system?

A design system is a medium for shared principles, processes, tools, and user interface assets. It enables teams to work with one single point of truth and allows every team to create unified experiences. (Hint: our new book gives a very comprehensive view on building design systems.)

It’s also multi-disciplinary. Whereas previous resources have tended to be limited to marketing communications, designers, or developers only, a design system makes the knowledge available for anyone involved in creating services and products for a particular brand, organization, or platform.

Typically, the primary users of a design system are your product teams, designers, and front-end developers in particular. Product owners, project managers, business analysts, copywriters, service designers, and others involved in shaping solutions are also likely benefactors and contributors to the system.

 

For top management, it’s a way to evolve both the organization and the bottom line for the better.

 

It’s not something new, but it has proven new ways of working.

In the last years, the design systems model has been adopted by organizations such as Airbnb, Google, Salesforce, IBM, Shopify, Dropbox, BBC, Audi, Atlassian, Github, Westpac Group, Gov.uk, Adobe, and many others.

 

Put human interactions front and center

First, it’s essential to know the people, culture, and the workflows of your organization. Familiarize yourself with the business cases, including the customers, their dreams, and pain-points. Get to know the core beliefs that employees refer to in their daily decision-making. This way, your design system will not only fit the strengths of your organization but will help it to evolve.

We strongly believe that a design system isn’t a change in IT or tooling – though, it can build on those. It’s a change in the culture and people’s mindsets.

Building a design system isn’t that hard; there are many predefined materials out there that you can use. The real value of a design system comes from the change in culture, mindset, and the willingness within the organization to use a design system. This all leads to faster product development, shared principles, and increased employee satisfaction.

Our recipe for success
Based on our broad experience in working with multiple clients and design systems cases, we’ve identified a few main tracks that are required to make a design system initiative a success.
1Vision and Principles


Vision drives the company to a common direction – it answers the question why and how the company envisions their products and services add value to the customers in the future.

2Shared Practices and Tools


A design system is a toolkit to help to jumpstart product design: user interface elements, code snippets, visual design tools, libraries, and so on. A design system needs to be created and delivered in a way that empowers product teams in their everyday work.

3Communicating and Training


Engaging communication and hands-on training are essential for bringing the system to reality. This can be done via, for example, websites, articles, videos, and robust internal communications platform. This also allows to listen to the intended users of the system and find the best solutions together.

4Governance


A design system is a process that enables all teams to have the same toolkits. Robust governance model allows a design system to evolve and refine. When it comes to steering a design system, following up on the expected outcomes and impact allows you to make the right prioritizations.

How we worked with one of our clients

It started with our client saying, “A design system could not work for us, because…”

This conversation led us to work together on something of a design system for weeks, without even delivering a single component that could be used by the teams. Instead, we progressed in other, critical ways:

  • Hosted multiple workshops: ensuring it was with all the teams and stakeholders.
  • Discovered lots of needs: these issues needed to be addressed first before we could start working on the system.
  • Identified the fears: what parts of the system could be killing creativity and lose the possibility to build something of their own? Many of these have less to do with the proposed system and more with the way certain things were communicated and “how things went in the past.”
  • Invested more time: with the teams and key stakeholders to understand and resolve these issues.

 

By resolving these issues upfront, the design system was adopted faster, and people started contributing to it from the beginning.

 

We didn’t craft the system alone – we built the design system together with client teams. This way, the skills are more widely spread within their organization, are adaptable, and gives the initiative of a much better chance to survive.

 

When should one consider launching a design system?

Several types of inefficiencies can indicate the need for a design system or an overhaul around an existing one. If your team is experiencing these problems, the time might be ripe:
Productivity issues

  • Product teams and vendors spending significant time re-creating the same, basic UI assets over and over again
  • Struggling to test and roll-out updates and optimizations across all products
  • Even small updates taking a relatively long time to roll out
  • Previous practice becoming unsustainable with the growth of product teams
  • Having a shortage of designers or front-end developers.

Quality issues

  • Product and vendor teams not feeling able and comfortable (even proud) using existing, shared assets
  • Most of the work being tactical and reactive
  • Customers feeling that the product/service reality falls short
  • Customers having to relearn how to operate another one of your products (raising the “effort cost” closer to adopt a competitor’s solution)
  • Customers with special needs or customers relying on assistive technologies, struggle to complete their jobs-to-be-done.

Scaling issues

  • There’s been the talk of a design system, but it has never really properly taken off
  • There have been previous initiatives, but these have hit a dead-end
  • There’s a system, but it’s unclear which products should apply it.

 

We’ve done our research

Our particular interest grew from the insider stories on how design systems have transformed organizations, and this resulted in writing our newest book, Hack the design system, sponsored by Adobe. We ran research on design systems and interviewed multiple design system leaders and senior managers across various companies. We also combined our internal expert knowledge worldwide – from Finland to France, and from the USA to the UK to contribute to the book.

21-Insights-The-secret-sauce-of-design-systems

Download the eBook here. If you’re reading this as someone who is evaluating us for a potential collaboration:

  • Our portfolio is uniquely strong on design systems
  • We offer a partnership, not another outsourcing silo
  • We like to run pilots that are well targeted
  • We keep it human.

If you have these (or other criteria) in mind, let’s talk!

Author
Elisa Pyrhönen
Lead Service Designer, frog
Elisa Pyrhönen
Elisa Pyrhönen
Lead Service Designer, frog

Elisa Pyrhönen is a Lead Service Design at frog’s Helsinki studio. As a coach, she helps other frogs grow professionally. As a lead in client iniatives, she’s responsible for cultivating the conditions to succeed. Her analytical capabilities, creative execution, and positive approach facilitate actions. In addition to working closely with several clients on their design system journeys, Elisa has co-authored a book on the organizational impact of design systems. Her special skills also include doodling and knocking over water glasses.

Cookies settings were saved successfully!