A Design System is a collection of reusable assets, and their rules, that speed up the development or innovation of a product.
It is important to make a clear distinction between a UI library and a Design System. A UI library is not a design system, but it can be a starting point for an organization.
A Design System can be considered a box of building blocks, which includes a plan and rules. These aspects are readily available to be used, with a result that matches other products. The flow from design to production is radically shortened by reusing existing elements.
However, this does not mean in any way that a Design System is an obstacle to innovation. A Design System (and associated workflows) that is properly set up and managed always leaves enough room for adaptation and extension.
One of the basic principles of UX is consistency. The same action always has the same effect. Users know what to expect. A Design System documents these actions and their effects, thereby greatly contributing to a consistent user experience. Consistency can also always be amplified and supplemented with user feedback.
Recognition is also important in this sense. If your brand image is always recognizable and consistently displayed, this creates trust.
A Design System is not limited only to “the website”. It encompasses all touchpoints. The most obvious of these are of course mobile versions, but also apps (iOS and Android). Another aspect to take into consideration is the conversion from online to print (or vice versa).
Does your brand also have physical shops, TV campaigns etc.? If so, their integration into your Design System needs to be looked at too. If this isn’t possible in the initial phase, it must definitely be included in the next.
Mediahuis
At Mediahuis, a team of two UX designers, three UI designers and two front-end developers is providing the build and maintenance of a design system for all of the organization’s news brands. A challenging prospect, because in the Mediahuis multi-brand environment, the design system must support out-of-the-box multi-branding.
The system’s adaptability is therefore its major selling point and also the reason why it was given the name ‘Chameleon’. The design system acts like a chameleon, adapting to the context it finds itself in.
J&J
Janssen Medical Cloud (JMC) is a platform on which healthcare providers, doctors and other medical professionals can find Janssen-related information, and use the services Janssen offers.
The challenge is to build a Design System that has to meet the needs of many countries. The ultimate aim is to streamline the process and achieve a quicker “speed to market” for new content. Different countries use local design agencies to develop pages and content for JMC.
The first version of the Design System has already met part of these needs. Agencies now know exactly which “blocks” they can build their pages and layouts with, and even help think about new potential components. This has already considerably boosted the speed to market from idea to product.
Mediahuis needed to create consistency, improve efficiency and ensure scalability. Pàu lent its expertise, talent and advice to help achieve this. Brand recognition is ensured across the board with a single source of truth. And all of this in a multi-brand environment.