Production
For many organisations, a well-implemented design system can mean the difference between an efficient digital environment and frustrating chaos.
Having worked on design systems for companies of all sizes, we decided to share what these experiences have taught us. This document serves both as an introduction to design systems and our approach to making them.
Whether you're interested in simply learning about the topic or wondering if you should team up with us, you're sure to find something useful here.
In today's digital landscape, most companies' products exist simultaneously on different platforms, with multiple touch points. They are developed by a changing set of people with different areas of expertise.
At the same time, companies need their brand and user experience to stay consistent across all of these channels. Designers and developers must work in harmony, as inconsistency in methods or styles can quickly lead to chaos, even in small teams.
Enter design systems. Modern design systems go beyond visual and branding guides, functioning as ecosystems that align brand identity, design, and technical execution, ensuring seamless collaboration between design and development teams.
To achieve this, a design system contains reusable elements such as design tokens, components, as well as larger modules and patterns. What do we mean by these?
Design tokens translate even the tiniest design decisions (typography, colors, dimensions etc.) into variables that the developers can then utilise without hassle.
Components refer to collection of user interface elements – think buttons, dropdown menus etc.
When several components are combined, they become more complex modules with their own internal logic. For example: cards, forms, templates for various page sections.
Patterns refer to repeated UX practices such as logins, searches and so on.
All of these together form component libraries.
Component libraries bring together fully functional UI elements that developers can directly use, not just as visual references but as ready-to-implement pieces. This approach ensures quality by applying a consistent design language across new content, regardless of device or screen size. Using the same tested components reduces bugs, even under tight deadlines, and makes it easier for both developers and designers to adhere to accessibility standards. It's like building with Lego bricks.
A successful design system requires a holistic approach, collaboration between the organisation and the often very different user groups – and both patience and an iterative mindset in its implementation. Here, we go through some basic principles of making sure the undertaking will work in your favour from the get-go.
Introducing a design system can mean asking the entire organisation to change their ways of working, and convincing them that it's worth the hassle. It's crucial to heavily involve the users throughout the process, making sure the results are beneficial. A design system is never separate from improving your core processes – this takes time and people skills.
A design system is an essential engine for digital experience. It is not a deliverable but a set of deliverables.
A good design system is not static. It should evolve with the brand, the tools, new technologies - and the people who use it. Often, the need for design system arises when building one already involves a massive amount of house cleaning and unlearning old ways of working. This is why organisations of all sizes will likely benefit from having one.
Design system includes tools for designers and developers: patterns, components, and guidelines. For content creators, templates and modules can make the release process a breeze. A design system can also contain more abstract elements such as brand values and working guidelines.
Design system should be collaborative, and easy to contribute to. As a platform, it should be made using universal and widely compatible technologies.
When it comes to things that separate successful design systems from the rest, flexibility is at the top of the list. As a guiding principle, it should be reflected in all aspects of the work. Here are some examples how.
All components of a design system should be built modularly. This allows the parts to be combined in creative ways instead of fixed templates that everyone is forced to use in every situation.
A great design system is not a fixed environment. Whether someone is building a website or an application, they should be able to use it all the same. It is also a reality for many companies that new technologies can be introduced quite suddenly. A great design system should be able to swiftly adapt to changing technical needs.
Your design system should be approachable for all: developers, designers and content creators of all skill levels. From the perspective of user experience, this is something that needs to be taken into account from the get-go.
Governing a design system should always be a continuous team effort involving not only the development team and the product owner, but also the people who use it on a daily basis.
Creating constant communication, feedback and education loops is just as important as the system itself. In short, the design system should evolve with its operational environment.
Imagine you have a website, a mobile app, and later expand to smartwatches, or your development framework needs to change, or you have teams using different front-end technologies. It's clear that a design system must be technology-agnostic to stay sustainable. Whatever is exported should work across various environments, with assets available in multiple formats.
The design system we created for Aalto University illustrates this well. In Figma, we've defined design tokens for typography, colors, and dimensions, which can be exported as JSON and converted into formats like CSS. These tokens serve as the foundation for both design and development. In Storybook, we offer components in React and HTML, with plans to support more technologies soon.
It can take a while to employ a design system – and it's a good idea to do it gradually. For example: starting from one product whilst still taking all platforms into account.
An important part of employing a design system is creating a plan for how it will be governed. Clear roles as well as transparent and easy communication that goes both ways is the key to making sure things start smoothly. The transition period can be particularly volatile, so making sure these processes are well thought out is vital.
Make sure that governance is not an afterthought but an essential part of building the design system.
What kind of governance model is right for your organisation? Who should be the key people responsible for the different parts of the design system – and how do you help them allocate the time required for the work?
Change management should be a part of your plan from early on. What is the best way and the best channels for communicating the process of building and updating the design system and making sure that the voices of the different user groups are heard when making decisions?
Don't wander in the dark – collect data. Analytics – both in the form of quantitative and qualitative data – are your best friends. Data that was never collected cannot help you. Make sure analytics and research are a part of your process all the way through.
One of Finland's most prestigious universities, Aalto is the home of some of the brightest, most creative minds in the Nordics. We helped them build a comprehensive design system that streamlines their digital experience across the various departments and organisations that the institution consists of.
The project has been a challenging and rewarding undertaking, made possible by the lively co-operation between us, Aalto and other agencies (Siili, Hasan & Partners) – all working together to create a world-class experience for the students and University staff alike. What makes the case especially unique is Aalto's concept of Radical Creativity: the ethos of the University is such that since the design system is used by a wide variety of talented minds, it should inspire rather than limit their creativity.
See the design system here
Hesburger is an international fast food chain with over 500 restaurants all over the globe. The design system we've built for them is a continuously updated collection of components, layouts and instructions that makes sure that the user experience is the same for all employees across all internal interfaces. Consistent UX logic means that employees need to spend less time learning the different systems.
Moreover, design principles, rules and ready to use HTML and Hiccup components make developing new tools faster, regardless of platform.
Read more about our co-operation with Hesburger
Our Business Development Manager Eeppi is here to help as your first point of contact. Let's discuss your case and see how we can help you drive growth and increase efficiency.
Business Development Manager
henri.ranki@taiste.com+358 44 500 1364Do you have a project that you'd like to discuss? Our Business Development Manager Henri is who you'll want to have a chat with.
Office Coordinator
vilma.merikanto@taiste.com+358445568459Have a question related to events, co-operation etc.? Our Office coordinator Vilma is happy to help.
Considering applying to work at Taiste? Our HR Manager Laura can aid you with any questions you might have.
