How to translate a brand identity into a digital experience

The basics

There are some simple ways to bring your brand identity into digital experiences. The first is to think of your brand setting design principles. Your core visual identity assets such as colour palette, typefaces, shapes or graphic devices, icons, photography style, language and tone of voice are all easy to apply across digital touch points.

However, you need to go a step further. We’ve seen with our clients that an on-brand UI kit can drive the best results and brand recognition. For example, expanding the brand’s visual identity into design principles to define certain UI elements such as determining whether buttons should be rounded or square, flat or with a drop shadow.

A simple visual expression adds coherence

Using design principles throughout your project will ensure consistency. But we’ve found that it helps to boil down the brand to the simplest possible recognisable visual expression first and then applying that to the design principles. For McDonald’s, it could be their specific tones of red and yellow. For Channel 4 it could be their bespoke and distinctive brand typeface.

Payments platform, Stripe, have a clearly defined visual expression: a simple angled stripe that can be seen on their corporate cards and the angles of the characters in the logo. In digital application, this angle is used as a device to separate sections of content and draw the user’s eye to important areas of the page.

Google’s Material design is a great example of translating a brand ethos into a digital experience. Google promise to make intuitive products in a beautiful way, and their Material design system means that all their sites and apps have familiar design patterns, making way for subliminal branding and consistent brand experiences. Search bars are in consistent locations, menus and buttons behave in the same manner and the way colour is applied to UI (user interface) is also consistent.

On-brand interactions

Interaction, gestures, motion, sound and user experience are extra layers that are added to create the right brand experience. These elements are often missed when initially developing a brand identity, but they can add further depth and personality and reinforce an existing brand.

The type of gestures you adopt for your digital experience will also affect the user journey and therefore overall brand experience. Will you use scrolls, swipes or taps to navigate through content? Apple defined gesture control with its groundbreaking touchscreen iPhone in 2007, introducing the ‘swipe to unlock’ gesture (which has since been replaced with fingerprint scanning and facial recognition). The swipe gesture harmonises with Apple’s core belief in beautiful design that delights people.

Aligning brand values with digital principles

Having a clear set of design principles also helps when having to decide on the design ‘route’ to go down. At this stage, it may help to filter out design ideas that aren’t closely aligned to the brand and therefore don’t provide a harmonious brand experience.

For example Nalla worked on a global digital platform for consultancy firm EY, and before starting on the design of the platform, we first developed and agreed on design principles that reflected values of the business and the needs of the users. One particular value was ‘guidance’. Users needed to feel supported, so they knew how to progress with their journey.

So, we took the word ‘guidance’ and applied it to digital design principles such as:

• Access to navigation must be visible at all times to provide guidance to our users
• Use EY yellow to guide users to key information on the page
• Use EY yellow to indicate where users are in a process

Successful example of brand identities into digital experiences
Airbnb’s website exemplifies the brand’s purpose and identity into design principles. Their brand purpose is about belonging, providing curation and offering authentic experiences. So, their website contains sections of curated local experiences with realistic photography, which perfectly synthesise with their slogans ‘Belong anywhere’ and ‘Live like a local’. This online experience feels intuitive for Airbnb.

If you are undertaking a digital project for your brand or business, firstly consider whether you have the right brand in place, is there a recognisable visual expression that can anchor your brand? If you feel you do use your brand guidelines and positioning to expand into design principles to create a digital solution that will effectively translate your brand identity and positioning.