Build strong brands
Marita Purins
We take a digital first approach to brand design including meeting accessibility standards to ensure our brands are optimised for all of our customers. This approach helps us to deliver consistent brand experiences across all channels.
Our digital brands have been designed using a multi-brand, responsive and accessible design system.
The foundations of our digital brands such as colours, fonts, icons, pictograms and the responsive grid, along with the most commonly used interface elements, are specified in the design system, which is the single source of truth for the Groups brands within the digital space.
The design system delivers our digital brands in React, Vanilla HTML CSS and tokens to help us efficiently manage 6 brands and service multiple technologies and platforms across the organisation. Each brand’s code can also be leveraged by front-end developers to build multi-brand, responsive and accessible solutions with greater brand consistency and quality at speed, with less effort.
Digital brand compliance
We have 3 approaches to achieve digital brand compliance. This gives projects the flexibility to tailor the GEL features that best suit their requirements. For example; Project X is using a 3rd party web service with it's own codebase, therefore a Level 1 engagement is probably all that's required.
Level 1
Getting the basics right. All projects need to align with Level 1 to be visually brand compliant. To achieve this level means you have used the correct colours, fonts and basic UI elements - presenting our brands to customers more consistently across different platforms and touch-points.
Aligning to these design guidelines means no more wasted time determining or discussing button colours and corner radiuses – its all taken care of.
Native apps tend to use this level so they can optimise their solutions using the native platform controls.
Level 2
This is where you start realising the benefits of using the design system. When implemented correctly, the design system supports you to design a solution once and have it will work across any brand (with some small tweaks).
Using the grid to create responsive designs will mean your project can also work on almost any screen size. This ensures efficiency, scalability and most of all productivity.
One design, multiple brands and multiple devices.
This is used by web based projects that need to create and configure their own code rather than consuming code directly from the GEL design system.
Level 3
This is where things get really interesting. At level 3, not only are you fully brand aligned, multi-brand and responsive; by integrating with the GEL design system you’ll also benefit from the use of the developer tool kits and the ability to use code straight from the design system.
So, as well as increasing the speed which your project can be created, it also means that any future branding and accessibility updates can be simpler, save time and money now and in the future.