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 an ever-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, regardless of who's working on the product, service or content. Similarly, designers and developers need to have synergy in the way they do things. If everyone utilises slightly different methods, design styles or ways to add new functionality, things will become very messy very fast – even within smaller teams.
Enter design systems. Modern design systems are much more than just visual and branding element guides. In this sense, the name might even be a bit misleading. These days, a design system should be seen as an integrated ecosystem that seamlessly synchronises brand identity, visual attributes, and technical functionalities. It is the glue that connects the design and development teams, allowing designers to create designs that not only follow brand and UX rules, but also make it easy for developers to easily implement them in any context.
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.
Importantly, these are not just visual examples but fully functional pieces of UI that the developers can directly utilise to their hearts' content. The philosophy of reusable elements has the added benefit of maintaining quality: there are simply fewer surprises when it comes to applying the same design language for any new content on current or future devices, regardless of their screen sizes or other attributes. When everyone is using the same tried and tested elements, there are fewer bugs even when deadlines are tight. Also, accessibility standards become easier to follow for both developers and designers when the building blocks remain the same. Think of it like using Lego bricks, if you will.
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. Hence, it's crucial to heavily involve the users throughout the process, making sure you're building something that they actually find 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.
Let's say you have a situation where one of your platforms is a website, another one is a mobile app – and a year later you're also expanding to smartwatches. Or perhaps the technology your devs have been using doesn't suit your needs anymore and needs to be changed. Or maybe you have several dev teams all using different front end frameworks.
It's easy to see why a design system shouldn't be technology-specific – this wouldn't be sustainable. Instead, technology agnosticism is the name of the game: whatever gets exported from the design system must be in a format applicable for as many kinds of technological environments as possible, with assets potentially existing in multiple formats.
The design system we made for Aalto University is a good example of how this philosophy works in practice. In Figma, we have defined everything from typography to colors and dimensions as design tokens. These can be exported as JSON, then further converted into CSS or other derivative formats. Thus, the tokens function as the foundation for both design and implementation of the component library. In Storybook on the other hand, one can find implementations in React and plain HTML, with plans for embracing additional 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.
Drop us a line
