Consistency as a critical success factor

Eva De Crescenzo
Growens Innovation Blog
8 min readNov 29, 2022
Green background image with the title of the article on the left and “Design innovation” as a subtitle that is the category of the article. On the right there is a person standing in front of an interface like frame that is trying to organize a digital ecosystem made of different UI patterns. This represent the action of organizing a complex system by going through every aspect of an interface ecosystem.

What is consistency in design and why it is so important

If you deal with UX and UI design, the word “consistency” will be part of your daily vocabulary. But even if you are not directly involved in design and the concept is less familiar to you, you should get to know its meaning and importance as soon as possible.

In a world where communication is now largely multi-channel and multi-device, no brand should underestimate the value of consistency as a critical success factor.

We can define consistency as the ability (of a system, of a product or service, of an interface) to communicate and behave always in the same, coherent way. Therefore it is a topic that concerns both language and behavior: it‘s like speaking with one single tone voice and in this way, ensuring the user an optimal, fluid and intuitive experience of our products.

Consistency in behavior and language

Jakob Nielsen, one of the most living experts in usability and user interface design, summarized the impact that this variable has on the user experience in a few simple words: “When things always behave the same, users don’t have to worry about what will happen”.

This statement is based on the principle of “recognition rather than recall”, one of the most important heuristics in the field of digital design: for all of us, it is much easier to recognize elements or processes already encountered previously rather than being forced to learn every time to interact differently with a new system, product, or interface. Therefore, pursuing consistency also means making an interface predictable, in order to significantly reduce the cognitive effort required to the user every time the rules of interaction change, thus improving product usability and learnability.

For example, the behavior of a button must always be the same (by “behavior” we mean the different statuses that the button assumes depending on user interaction): if the buttons provide a certain animation or treatment at rollover, this behavior must be constant throughout the user journey, otherwise users will find themselves in a situation of uncertainty when faced with ever-changing feedback.

However, consistency should not be pursued only at a functional level (product behavior): it is important to preserve coherence and linearity also in language, both in terms of visuals and in terms of contents and tone of voice, since these aspects serve to ensure consistency, solidity and distinctiveness to the brand identity.

For this reason, Design Systems have spread. They are libraries of scalable elements and collections of rules (about typography, colors, spacing, grids, element sizes) which UI designers and developers draw on in their daily work. For the same reason, there are UX writing professionals tasked with creating clear, concise texts, effective in guiding and involving users in their experience of the product, adopting a consistent tone of voice.

Milky Way, the Contactlab’s Design System
Milky Way, the Contactlab’s Design System

Behavior and language must be consistent not only in relation to the product itself (internal consistency), but also across the number of channels the brand uses to communicate, the different devices the product can be used on, and the products of the same family (external consistency).

The benefits of consistency

The several positive effects of consistency can be described in relation to the subjects who benefit from it: users, the brand, the team of designers and developers.

We have already mentioned the benefits of consistency for users:

  1. It reduces the cognitive effort required to the user
  2. It improves the learnability of the product
  3. It improves the usability through predictability, making the user’s flow frictionless.

Consistency is essential for the brand too, because:

  1. It ensures solidity, consistency and recognition to the brand identity
  2. It increases the perception of brand reliability in users through solidity and recognition

Design and development teams too fully benefit from consistency. Design Systems, which are key enablers for consistency, in fact:

  1. Reduce uncertainty and decision-making time when teams need to create new features or update existing ones
  2. Reduce processing times, favoring streamlined and smooth workflows
  3. Improve collaboration and sharing of activities

By improving and speeding up processes, we can achieve an important advantage in terms of economic efficiency.

Brand consistency is not just a topic reserved for designers
Brand consistency is not just a topic reserved for designers. It’s a heritage that everyone must take care of. (credits: [Chaosamran_Studio] via GettyImages)

How to build and preserve consistency in design: the Milky Way case

“Milky Way is our Design System, a “constellation” of elements that relate to each other, evolve and move like one.

These associations are based on a set of shared rules, principles and conventions.”

— UX/UI design team di Contactlab

Milky Way is Contactlab’s Marketing Cloud Design System and represents a simple but valid example of how to build and nurture the consistency of a brand and its products.

In fact, it provides a guide for outlining and preserving the identity of the platform’s products both visually and functionally (as mentioned above, both in terms of language and behavior).

Milky Way maps out:

  • color palettes of the platform products
  • font families and the typographic scale
  • logos, pictograms and their use
  • icon libraries, with their style and spacing
  • illustration style
  • layout structures and suggested grids
  • instructions for designing particularly critical elements (such as form fields) and their behaviors
  • tone of voice and copywriting guidelines, also from a SEO point of view
  • guidelines to ensure the accessibility of all elements of the library (for example, regarding contrast and color blindness)
Some colors of the Milky Way palette
Some colors of the Milky Way palette

At the same time, Milky Way provides essential resources for the product design interfaces, including files, components and related code.

Milky Way also contains an important general guideline - “to follow design patterns and established conventions whenever it’s possible”. Following the conventions (for example, representing the search action with a magnifying glass is one of the best known conventions) and adopting the most widespread design patterns is in fact one of the most effective ways to guarantee product predictability. Let’s not forget that consistency is also linked to the user’s experience with similar products from the main players in the sector.

Milky Way and the Contactlab products redesign

Once the Milky Way Design System was developed, Contactlab’s team of UX/UI professionals for the Marketing Cloud redesigned all the platform’s product interfaces to ensure maximum consistency both within the individual products and across the whole suite.

Every detail was carefully analyzed, evaluated, redesigned, tested and fine tuned, thanks to an iterative process aimed at strengthening the brand’s identity and recognition, improving the user experience by removing the most common pain points and minimizing the learning curve when switching from one Marketing Cloud product to another. Milky Way was the keystone of this meaningful transformation process, clearly visible in every aspect of the interface.

Contactlab Marketing Cloud’s user interface
Contactlab Marketing Cloud’s user interface
Contactlab Marketing Cloud’s user interface

The redesign of user experiences and user interfaces of existing products is a particularly delicate operation, since we must not forget that the brand has already built a defined identity over time and users have already gained experience of its products: therefore, in improving this experience it’s important to be careful not to damage the ability to recognize the brand.

This is the reason why, in developing Milky Way, the team started from the founding elements of Contactlab’s visual identity (logos, corporate colors, typography) and:

  • extended the palette. They expanded the set of primary colors, to further improve the visual hierarchy, and introduced some new accents and feedback colors to optimize interactions;
  • selected a family of fonts with high readability and plenty of styles, that did not stray drastically from the previous family (both were sans serif). Therefore, the typographical scale defined by Milky Way was adopted, for the sake of a clearer hierarchy of information

Other interventions on the product user interfaces concerned other key elements in ensuring consistency along the entire user journey: grids; spacing (margins, gutters and padding); size, position and alignment of the elements; iconography; style of the illustrations; vocabulary and tone of voice.

Some illustrations for supplementing the more complex content
Some illustrations for supplementing the more complex content

As already shared, such product redesign was not needed for merely aesthetic reasons, but to ensure more fluid user experience to the platform users, who often use multiple products of the suite simultaneously and need to toggle easily among consistent,quickly learnable tools.

Can consistency ever be disregarded?

After what has been said about Milky Way, it might be surprising to discover that the consistency principle admits some exceptions.

Let’s think, for example, about the differences in the typography used for different channels or devices. Mobile devices, especially smartphones and smartwatches, prefer the use of sans serif fonts which guarantee better readability and contrast, thanks to their clean and geometric shapes. So, in some cases, we may find ourselves breaking the consistency by forgoing the serif font headlines adopted for desktop viewing. Even more frequent is the adoption of ad hoc fonts for digital channels compared to offline channels, again to ensure the best legibility and user experience.

Or again, we could start from a logo in colors that are not easily applicable to our interfaces, because perhaps they do not guarantee adequate legibility for visually impaired users. Therefore we could be forced to slightly change our colors to obtain a palette that ensures full accessibility to all.

The common denominator of these cases is always the same: consistency should never be pursued at the cost of a sub-optimal user experience.

Take-aways

The role of consistency and its positive effects on users, brands and teams help to understand how vital it is to promote a culture of consistency within organizations.

Not only designers and developers, the main users of Design Systems, must be aware of the strategic importance of a solid and cohesive identity, but all people within a company should recognize and protect its value.

Accelerated decision-making processes, reduced production time, improved shared workflows, better usability and learnability of the products for users, greater perceived reliability and greater brand recognition… These are some of the advantages that over time translate into better performance, both from an operational point of view, and from a strategic one (especially in terms of positioning).

Therefore, consistency is not just a topic for designers, but a thread that should run across the culture of the whole organization.

--

--

Eva De Crescenzo
Growens Innovation Blog

I'm a Sr Designer, with skills in digital marketing, graphic & motion design, UX/UI design and coding. I'm certified in UX and UI design at UX Design Institute.