Blog

UI and UX: Achieving consistency across digital touchpoints

1. Introduce a Single Source of Truth

The main problem is that often, brands see every point of contact (website, terminal, digital apps and so on) as a different project. And each one of them has its own code that handles the visual experience separately. This is rather costly as design changes need to be maintained in every single project.

Thus, it can happen easily that the experience between digital channels becomes inconsistent, because of silo mentality or simply because of negligence. This often leads to an iterative cycle where some entity within the company eventually sees the need of defining “a new corporate online identity”.

This doesn’t tackle the core of the problem. Designers and developers want a single source of truth they can refer to and don’t need to maintain themselves! Having only one source of truth is cost effective as there is less code. Changes are done only once and are distributed centrally to all teams.

There are some things to consider though:

1. The UI code must be centrally accessible and technology agnostic
2. A team needs to be available for fast updates when this is requested
3. The UI elements are to be documented clearly, especially when, where and what variants can be used
4. A governance team has to be an arbiter in what type of context certain elements can be used.

A tool such as ​Storybook: UI Component Explorer for Front-end Developers ​helps in achieving all of these goals. Storybook is an open source tool for developing UI components in isolation for React, Vue and Angular. It makes building stunning user interfaces organized and efficient.

2. User Interaction Elements First

A digital governance team should centrally create all elements used on the digital channels, from the smallest and simplest link to the more concrete and defined main menu.

You can create variants of certain elements, sometimes to define context (e.g. is a link external or internal?), sometimes to be used in a different element (e.g. a link in the standard text, versus a link in the main menu).

Designing elements from their core up to templates and pages (and not the other way around) requires a more abstract way to design, but it achieves a number of benefits:

1. Prevents inconsistency in design and user interaction, as the design choices cascade to different levels
2. Gives better control over changes: A change in an atom cascades into all molecules
3. Allows a Mobile First approach at all levels (from atom to pages), to define certain design choices
4. Makes user accessibility easier: Once you do it right, it’s done right overall
5. Prevents duplication for similar use elsewhere, as variants can be defined for either context or inheritance, directly on the atom
6. Allows elements to be tested out of the context of a project, making secluded tests possible
7. Transparency to stakeholders: requests from stakeholders that potentially result in conflicting or wrong duplication of interaction, can now be handled at the correct level of development
8. Saves time and resources: Designers can design with reusable elements and don’t have to do every task from zero.

A number of organizations have adopted to this style of working. The design system of Gov.uk is a nice example. It’s even been used as a base for other governments like Australia‘s and New Zealand‘s (among others). In the private sector we also find examples of different companies who’ve even open-sourced their design systems: Audi, Mailchimp, IBM and AXA, only to name a few.

Conclusion – Consistency in your marketing

You as a marketer, creative or designer want to be sure that every user interaction with your brand, product, website or mobile app provides a consistent and recognizable experience. To do so, there is some work to be done before jumping to the “real” job of designing and styling. But once you do it right, you achieve innumerous benefits. Epecially when doing it right from the start. Read on to learn about the crucial checkpoints you need to adhere to, for your investment to substantially make sense.