One brand, many touchpoints, an infinite number of user interfaces. No matter whether corporate website, online shop or social network – a brand has to assert itself on a variety of channels and leave a good impact everywhere. Corporate design manuals and style guides are designed to help achieve this. And more and more companies are turning to design systems. What are they good for and how do they work?
Our modern technologies have led to a paradigm shift in the way we communicate. The information unit "page", which has been generally accepted for a long time, is increasingly disappearing. It is replaced by multimedia user interfaces in which we navigate by means of various interaction processes. As a result, the requirements for the presentation of content are also changing. In addition to readability and aesthetics, usability and responsiveness play a decisive role.
Alongside the already established «content management systems», «design management systems» or short: «design systems» are now increasingly being used to help meet the growing communicative demands that users place on digital services or products.
I don't think I need to say much about the positive impact that a consistent and positively perceived brand experience has on the business value of a company.
Every marketing team and every UX professional is aware that a coherent and consistent corporate design has an enormously positive influence on the customer journey. Next to product and service quality, it is one of the most trust-building factors in terms of brand and value proposition. It determines the reputation of a company in the long term.
All the more surprising that many companies do very little to ensure the quality of their design elements and standards. Many methods and tools in this regard are often a bit old-fashioned, make use of digital bridging technologies (such as PDFs) or are characterized by significant media breaks.
In many cases, the companies themselves are not responsible for this situation. If you take a look at the development workflows of many digital agencies that supply them, you will see that their approach is very traditional and outdated.
These buttons were used on a single website. This is not an unique case, we could list many other examples here. We are wondering, how can there be so many different buttons? | Source: https://medium.com/hubspot-product
Most frontends are still created «page template-based». For this purpose, key templates such as the start page, overview and detail pages and the content elements used on them are usually designed - first via wireframes and then via mockups. If the budget allows, a developer handoff and, if necessary, a style guide or UI documentation are created for quality assurance purposes, but these are usually only valid until the next relaunch.
This approach is neither efficient nor sustainable.
Much better would be to first develop a «modular design system» that provides designers and developers equally with components with which they can then - quasi via «drag & drop» - create a variety of templates and applications.
This not only reduces the effort and thus the cost of technical realization, but also leads to an integral harmony and consistency of the resulting solutions.
A design system differs from a style guide in that it schematizes or patterns a design. This enables a systematic and modular approach to the conceptual design of artifacts. That is why the development of a design system should be at the beginning and not at the end of the conceptual process.
A design system helps to bring continuity to a brand's user experience in the long run. Not everything has to be thrown overboard with every relaunch. An evolution of the design to the changing conditions is thereby not only possible, but makes absolute sense. Complete breaks often unsettle users and consumers more than they benefit them.
A design system is therefore the ideal tool when designers, developers and stakeholders want to communicate with each other or when different teams and agencies need to be supplied with design artifacts over a longer period of time.
Imagine a large box with hundreds of Lego-bricks, whose bricks may consist of 20 different colors and shapes and can be assembled into any structure imaginable. You may even have pictures of the finished models that can be built with these bricks. If you've ever tried it, you know that it's not so easy to recreate these models without step-by-step instructions.
From this illustration, it can be deduced that there are two phases in the life of a design system:
If important Lego-bricks are missing or do not have the appropriate properties, users will not be able to build the models they desire with them.
That's why "Lego-brick designers" need to think about what kind of bricks are basically needed and how those bricks need to look.
The creation of a design system is therefore not entirely trivial. In order for it to be used efficiently, it should be oriented to the intended use cases. This requires an intensive examination by the designers of the use cases and the user journeys of the applications for which it is to be used.
A code-based design system is not only a wise choice from a technical as well as an economic point of view, but is also excellently designed for evaluating the user experience by enabling a real «Look & Feel». It can completely replace costly prototyping in many cases.
However, the number of elements and states, which quickly grows to a considerable size, should be presented in a clear and self-explanatory way. A poorly usable or unclear design system, is not much help. In the back- and frontend of AtomicKitchen we have therefore integrated user-friendly navigation and search functions, so that developers and designers can quickly find the right elements.
As an experienced partner in the development of design systems, we can help you by developing a design system that precisely match your requirements. Contact us. We will be happy to show you how you can integrate a design system into your workflow, whether for a planned website relaunch or to manage your brand guidelines.