Generalist who creates and maintains things on the web. Specialist on design systems and complex prototypes built with code.
kontakt@prototypen.noSee if you recognize the following:
In the business you work in, you have very different styles for the services and products you offer. This includes typography, illustrations, images, color usage, and language.
Using Service X feels completely different from using Service Y. On Service X, you have brighter and more vibrant colors, different illustrations, and a somewhat more playful writing style where exclamation marks are used freely. On Service Y, on the other hand, you appear more rigid in both language and design, more serious, and somewhat more "legal."
What is best is often subjective and largely depends on your strategy. However, the fact that the products appear as unrelated to each other as they do today does not contribute to making your identity stronger—quite the opposite.
Fast forward a few years, where you may have launched two or three more products or services, each with its own unique identity, and this problem intensifies even more...
Do you recognize yourself?
What you need is a design system.
Then some questions arise:
What is a design system?
Do WE need a design system?
Is it worth the investment?
How do we get started?
Let's tackle these one by one.
A design system is a collection of guidelines, tools, and components that help teams develop and further develop digital products, with the aim of helping teams move in the same direction.
Think of a design system like a LEGO set. You have different colors and shapes of blocks, along with an instruction manual that shows you how to build a specific model. Even though there are clear guidelines in the instruction manual on how the blocks should be assembled, you have the freedom to use the same blocks to build something entirely unique, something new.
In the same way, a design system provides you with the basic "building blocks" (components, colors, typography, etc.) and "instructions" (guidelines, best practices) you need to build a digital service. But it also gives you room to be creative and adapt the design to specific and new needs.
If all the teams in a large organization refer to the design system before creating something, and strive to follow the guidelines, the services they create will appear as "in family," with the result that the identity is strengthened—not weakened.
Norwegian Design Systems:
Designsystemet – Common design system for public services
Elsa – The Courts' design system
Aksel – NAV's design system
Origo – Oslo Municipality's design system
Hedwig – The design system for Posten and Bring
Large, International Design Systems:
Material Design from Google
Human Interface Guidelines from Apple
Fluent Design from Microsoft
Let's say you have these services:
Your website
Service X
Product Y
...and a bunch of other services.
Given that you have a large website and multiple digital services that largely do not follow the same guidelines, a common design system would be very useful.
The design system will help provide a consistent user experience across all the services you offer. Additionally, the design system can streamline the work of building new services and further developing the services you already have.
Many of the components we need for our website are also needed in Service X and Product Y, such as buttons, tables, and form elements.
We don't necessarily want these components to be completely identical across products. But we do want them to be equally user-friendly, meet the same requirements for accessibility, and be "in family" in terms of design.
If we create and document the components in one place, in the design system, and at the same time make them flexible enough to be used in different variations in different contexts, we can use the same components across our products and services.
Examples of flexibility:
Different color themes
Different sizes
Different placements
Different widths and heights
For example, a button can be both green (website) and blue (Service X), and large in some places and small in others, but still be the same button. The code for the button can be exactly the same, as long as the code allows for the button to have different appearances in different contexts.
The result is a much better user experience for our users, who in many cases switch between our website and our various products.
Likely. Here's why:
Increased Efficiency: Instead of each team working in isolation to design and develop new things, we can reuse design and code that has been created before.
Improved Quality: When reusing design and code that is already quality-assured and thoroughly tested, we ensure high quality in the new things we create as well.
Increased Competence: If one team has succeeded in creating something that works, there's a high likelihood that other teams will benefit from the same—be it the process, design, or code created. Get it into the design system!
Avoid Duplication: Why reinvent the wheel if another team has created something you see you can use?
Faster Time-to-Market: When design is well-documented in a design system, it is much faster to realize the design and get it into production.
Easier Scaling: Most solutions start small, and if small and large design decisions are documented in a design system, it becomes easier to see the big picture and scale in an effective and good way.
Single Source of Truth: One standard ensures a cohesive experience of your brand, across all platforms—be it analog or digital.
Here are some tips:
Start by assigning someone in your business the responsibility for developing a design system.
Find the right partners. Few have all the expertise in-house.
Start early with actually creating something, and adjust along the way.
Develop basic…
design
components
templates
guidelines
Make some compromises by adopting design across your website and the products you offer.
These are examples of adjustments that are easy to implement in a first version of the design system:
Ensure the typography is consistent across all pages by creating a simple set of rules for which font sizes should be used, along with some guidelines on when and how to use the different font sizes.
Use the same illustrations and image styles across products. Instead of introducing a new style, consider using the same line/style you already have.
Use the same color theme—agree on what colors you "are", in your business, and make sure these colors are used consistently everywhere. Here, the products can have their own sets of colors (themes) that show a "relationship" to the business, but at the same time stand out.
Create some simple rules on tone-of-voice: Who are WE? What voice do WE have? Ensure that all new texts written follow these rules, and continuously work on improving existing texts.
Establish a design system group tasked with managing the design system. The group should consist of representatives from different teams in the business who work daily with the various products and services we offer.
The design system group should have regular meetings where they discuss the needs of the various teams in the business, and ensure that the design system provides the teams with the tools they need.
Additionally, the design system group should allocate some time for skills enhancement and keep themselves updated on design and design systems.
Members of the design system group should serve as advisors and sparring partners for everyone who will use the design system.
Build collective ownership of the design system by establishing forums where everyone in the business can contribute with issues and solutions.
As the owner of the design system, you should spend time on these things:
Understand what design systems do and why they work so well.
Keep up with all product development in your business.
Work to ensure that the teams in your business collaborate when something is to be created or further developed.
Promote a culture in the business where it is natural to share what you create with others.
Invite and conduct weekly meetings with all product teams.
Ensure that common design decisions are documented in the design system.
Have the final design decision when compromises must be made!
Lead the development of the design system itself.
If you need help with creating or maintaining a design system, or if you're just curious about design systems, feel free to reach out!
Sceptical? Check out my references.