At this stage, we will need to actively involve stakeholders (designers, engineers, managers) in the workshops.

If we are building a design system from scratch, we can start, for example, with and Component Cut Up exercise.

However, the design system is not only about components. Furthermore, considering that it will take months to build it, it is not enough to consider only the current needs. We need to understand how the system will need to grow with the core product (or products). And, perhaps the business as a whole. In other words, we need to answer the question: what kind of product do we want to create for our users? If we forget for a second that we are talking about a design system, this question is quite typical when we talk about creating any new product. And it can be answered using the same traditional methods used for “ordinary products”.

Mission and vision of the product

To answer the question listed above it is usually recommended to start with identifying the mission and the vision.

There are many articles and guides on the web on how to formulate a mission and vision. However, there is also a lot of confusion about what follows from the other.

Uxpin, for example, points out:

“A design vision statement describes where the organization wants to be in the future, while the mission statement defines its current purpose and approach to design.”

This formulation puts vision at the top of the Strategy Pyramid:

There is also an alternative approach that puts the mission at the top of the pyramid:

Pioneer, Goalist, Nippon Koei, and many others do that. I will use this second approach in this article because it is more natural and clearer to me (please write in the comments which approach you prefer and why).

From my perspective, a mission is what companies often write on posters (or t-shirts). For example, at IKEA it sounds quite abstract:

“To create a better everyday life for the many people”

This wording is used by almost all modern startups. And, to be honest, it doesn’t tell anything.

On the other hand, the vision is more specific. It describes the main business idea or what exactly the company wants to do (or what the product should give to users). In design, it is close to the idea of North Star Vision. IKEA’s business idea (again for example) is as follows:

“To offer a wide range of well-designed, functional home furnishing products at prices so low that as many people as possible will be able to afford them”

This wording describes very well the concept of IKEA and its key differences from its competitors.

In our case, with the design system, we can follow the same path: start with a simple and general mission and formulate a vision that will make it possible to realize this mission.

For example, we can use something general as a mission: “Make our product team’s life easier”. Or make it a little more specific: “Make our product team’s life easier when building products”.

However, we can take a look at this from a bit different angle. When we talk about accessibility, motion, and many other things, all that is not so much about developers and designers, but about the end user-consumer of our company’s product. Considering this we can re-phrase the mission statement a bit: “Help our product teams to create the best experience for end users.”

It all depends on your talent to write beautiful and succinct phrases. Either way, it’s nice when the mission sounds inspiring. Atlassian, for example, has a statement, that at least for me sounds inspiring:

“Our mission is to unleash the potential in every team”

The vision is a bit more complicated. So that the vision does not remain just a beautiful phrase on a poster, we need it to indicate what exactly we want to see in our design system.

Let’s take IKEA again, for example:

“To offer a wide range of well-designed, functional home furnishing products at prices so low that as many people as possible will be able to afford them”

In the wording, the main requirements/components can be identified quite easily:

1. offer home furnishing products
2. wide range
3. well-designed
4. prices so low, so as many people will be able to afford them

This sounds like an acceptance criteria for each product that a company wants to release. This logic can also be used to formulate a design system vision. Let’s look at some examples.

“To help deliver quality interfaces while accelerating time-to-market. To empower creativity by making UX and UI easily accessible to designers and developers across teams. To reshape the enterprise and open source worlds with applications people love to use.” https://eos-mission.webflow.io/

“Material is a design system created by Google to help teams build high-quality digital experiences for Android, iOS, Flutter, and the web.” https://m2.material.io/design/introduction

“Material Design is an adaptable system of guidelines, components, and tools that support the best practices of user interface design. Backed by open-source code, Material Design streamlines collaboration between designers and developers, and helps teams quickly build beautiful products.” https://m3.material.io/

“A design system is a set of standards to manage design at scale by reducing redundancy while creating a shared language and visual consistency across different pages and channels” https://www.nngroup.com/articles/design-systems-101/

The examples above are not, actually formulations of the vision. However, in my opinion, they can be used as such. After all, the requirements in all of the above formulations read well. In the approach I am considering, it is very important that the vision statement clearly articulates the main characteristics of the design system you are creating. Otherwise, you run the risk of creating the wrong product in the end.