UI and UX: Achieving consistency across digital touchpoints

    UI and UX design aren’t anything less than the tone with which the company interacts, made visible. But how to get it right across all digital touchpoints?

    SUBSCRIBE TO OUR BLOG

    The narrative of a brand is not limited anymore to copy writing and picture selection, and any customer engagement strategy requires a personalized approach. The challenge: To keep the company’s voice consistent, while the days are long gone when marketing managers could overlook every single communication.

    How this problem can be solved? Only from scratch. After reading this article, you’ll understand what that means – and, most importantly, how to tackle it.

    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). 

    Atomic Design: Designing elements from their core up to templates and pages (source: atomicdesign.bradfrost.com/chapter-2/ )Atomic Design: Designing elements from their core up to templates and pages

    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, and 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

    When you as a marketeer, 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, there is some work to be done first − before jumping to the “real” job of designing and styling. But once you do it right, you achieve innumerous benefits – especially 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.

    Need help to achieve UX consistency across your digital touchpoints?
    Our experts are here to help!

    Published on    Last updated on 14/08/2020

    #Customer Experience, #Digital Marketing, #Content Management, #CMS

    About the author

    Niki Lin is a Functional Analyst at Amplexor Belgium. Since 2017, he has been overseeing product development according to specifications, building bridges between the digital platforms’ end users and the technical teams. Niki is passionate about achieving the right balance of human-centered design approaches and agile development methodologies.

    SUBSCRIBE TO OUR BLOG