“Everyone” is talking about design systems. In this article, we explain what they are and why all businesses planning to scale up need to have one.
Quantity without quality
The need for design systems is a consequence of increasing digitalisation. An organisation that has multiple digital solutions will, over time, tend to lose track of its solutions in terms of both their code and their design. Without guidelines, everyone who works on the solutions will design, code and implement new items and functions in their own way. The result is that time is wasted, quality decreases and solutions become inconsistent in terms of their design and functionality, and this can affect the customer experience.
What is a design system?
A design system is an aid and an important tool for everyone who works in digital production at an organisation. A design system brings together an organisation’s guidelines and reusable components into a library in which developers, designers, product owners and the rest of the team can easily locate and build solutions using the same reusable components. These components are designed, coded, tested and created to work well with one another.
The type of design system any given organisation needs will vary, but in our experience there are a number of smart solutions that the majority of design systems will benefit from having:
1: A design system should contain guidelines. Examples of topics covered by such guidelines include an organisation’s visual profile in terms of the colours and colour codes that are to be used, development practices and using language that is clear. The majority of businesses already have such guidelines, e.g. in the form of a brand book, and these can be developed into a design system.
2: Design systems can bring reusable components together into a single location. The design elements that are used should be built from one another and combined in new solutions, a bit like Lego. This ensures that all items on any given page are consistent.
3: And, last but not least: It may be a good idea to organise your design system such that all the elements for digital contexts are linked to one main item. This means that if you suddenly have to change the original element, the change will automatically be implemented on all digital pages that contain just this item. This can save a lot of time!
Let’s look at an example:
Business X has updated its visual profile and wants to use its new logo across all its digital channels. Each of its pages may have been designed a little bit differently because a range of different designers and developers have worked at the business over the years. In order for business X to be able to change its logo, a developer has to go in to change the logo manually on each individual page, which takes around a quarter of an hour per page. Business X’s logo is currently used on 500 digital pages, meaning it will take about a week to change the logo on every page. How long would the same process take if the company had a design system? Since the developer would only need to change the logo in one place as it would then be automatically updated across all other digital pages, the entire process would only take around 15 minutes.
A design system is thus of benefit to business X whether it wants to change multiple elements on its website or to change its design such that it is updated in accordance with the requirements of universal design, other guidelines, or new trends and user requirements.
A tip: If you need a simple way of checking the state of your website: how many different font sizes and colours are there on your website? Find out using Cssstats!
Greater productivity is only one of the benefits:
Quicker development and greater productivity are only some of the benefits that design systems can offer. Design systems also:
- Simplify the workflow for developers, designers and product owners. This can enable automation and faster development. A design system therefore makes it easier to adapt to the ever-changing digital landscape.
- Make it possible to maintain a consistent identity and design. This improves the quality of your site and makes your brand seem more trustworthy.
- Make it easier for employees to keep track of and be updated on the company’s own internal guidelines, as well as on external legislation and regulations (such as universal design requirements).
- Enable the creation of a consistent design and clear guidelines in relation to design and development. Your digital brand will have a unified look. This has multiple benefits for users and improves the user experience.
- Facilitate scaling up and growth without quality being affected.
- Make it easier to test out proposed solutions and to work innovatively. When designers and developers can access components and finished code, new ideas and concepts can be prototyped and tested more quickly. This way of working means new solutions can be launched more often, making you more innovative.
Design systems need to be living in order to function
An organisation’s design system needs to be living and to grow with it if it is not to go out of date. As an organisation develops, its design system also needs to develop. A well-organised system will make it easier for team members to work and communicate with one another, and will ensure that the design system is properly maintained and stays up-to-date and consistent over time, not least as the business grows.
Do you want to develop a design system?
Itera offers a complete range of services in design and development, and can help you with what you need, from mapping requirements, developing guidelines, visual profiles and technical set-up through to project management and introducing the system to your organisation. We tailor both the development process and the solution to your organisation to ensure you get exactly what you need.