UX, UI and consistency: how to make a good design system work better


We already showed you the benefits of the right design system for your company – with this article, we will concentrate on the crucial checkpoints you need to adhere to, for your investment to substantially make sense. There are three main aspects to be taken care of, when it comes to maintaining a design system for your company. Let's look at them one by one:

1. Brand identity

With a modern component library, the start is no different from working with an oldschool offline style guide: It begins with the visual language. At this stage, design elements are limited to color, typography, motion and space. These elements will define your brand's identity. Once they are defined, some basic (non-interactive) elements like iconography and logo can come next.

Often, companies already do have a style guide – but not (yet) optimized for screen and interaction. Sometimes, it just needs small adjustments such a changing a brand's primary red color to a brighter red, because otherwise, it didn’t have enough contrast with the other colors, when seen on a screen.

Building a visual language is a long and sometimes tedious track, with lots of iterations. An art director needs to do user research, to define where a brand is currently positioned – and to define the ideal positioning to aim for. The art team then will strategically find visual elements to support the repositioning.

Once you have found and established the visual language, it shouldn’t change all that much – for the sake of consistency in the narrative of your brand. Nevertheless: As colors and shapes are being associated with new meanings over the course of time, it is wiser to micro tune the look and feel every few years – instead of waiting too long, only to then realize suddenly that you need a full new rebranding.

2. UI components: the look-and-feel for the user

Any element made for interaction on the digital touchpoints of your brand is a UI component. Be it for a simple task like reading content or for a more complex one – such as filtering a product list. The UI components support the information architecture underlying your products, allowing the users to complete the desired tasks on your digital touchpoints the most intuitive way possible.

UI components – always based on the visual language as described above – are built by interaction designers, always with different devices and screen ratios in mind. The UI components should be part of a central component library and available for all teams, communicating through a digital platform.

Unlike the visual language as such, the components in the library can change: User feedback may, for instance, show that certain components need improvements. In other words: the component library is never in a complete state; new components are added and updated frequently, to support the changing needs of users and their devices.

3. Governance

The last but definitely not least aspect to take into consideration is governance. At some point, you'll have a working component library in your company, used by different teams: web editors building pages, technical staff working on apps, marketing teams creating communication – and so on. All of these colleagues have very different backgrounds in regards to user interfaces. Which is why at this point, the goal is to make sure that all components are being used correctly, according to their aim. This is where the governance team comes in.

Different content writers could for example use the same component wrongfully, for different purposes. This can be prevented, in the first place, by making sure all components have been well documented, with clear rules on where and why a component should be used.

Most of the component library systems have features to attach the rules and documentation directly to the component. However, rules can be misinterpreted and people can make mistakes; therefore, it’s important that quality checks are being performed by the governance team – at various stages in the development, to prevent problems at the end.

Practical use of the components on the digital platforms can show that certain communication needs are not yet handled sufficiently by the current assets within the component library. A request for improvement may come up, and sometimes, two teams may even have conflicting requests. In this case, the governance team should mediate, as they´ll be the ones to apply the rules, later on.

Putting it all together

As a company, a clear goal of your communication is to be consistent, both in the tone of voice as with the visual aspects. Putting a design system in place has a number of technical and communication benefits. But like with most things in business, good maintenance and a well-thought-out adoption plan are key to success. Thus, make sure you have an ambassador who promotes the system within the company, aware of the new projects that will make use of it – so that you can apply the system early on.