GEL design approach

The greatest value the GEL Design System can offer is re-use and consistency. We provide quality, re-usable solutions so that you have more time to focus on the customer experience. Using the GEL Design System also increases the consistency of our brand experiences across the entire brand ecosystem.

Think big picture

Each feature, function or experience delivered by a project is only part of the customer journey. If the design isn’t consistent with other touch-points experienced by the customer, the journey has become fragmented, and the brand experience diluted.

We think big picture, providing a foundational brand design and a core set of components that have been created with all touch-points in mind. When using the latest version of the design system, you can deliver consistent experiences in any touch-point across the digital ecosystem even when delivering in project siloes.

Think about how your design stitches together with other parts of the customer journey. Where will customers come from before they reach your design solution and where will they be directed afterwards?

Reflect the brand intent

Consistent brand experiences increase brand recognition, authenticity and trust. All our digital brands have been designed in alignment with the master brand. Using the GEL assets, designers can create consistent customer journeys across our digital landscape while maintaining the integrity of the brand.

When putting together your designs, ensure you follow the guidelines and keep an eye on how your design will impact overall the integrity of the brand.

Plan to scale

We take a multi-brand, responsive approach to creating global components.

These components are product agnostic allowing them to be re-used in multiple applications throughout the customer journey.

Using the GEL Design System, projects can design a single solution and output it across all 6 Group brands, across any device and operating system.

An added benefit of taking this responsive approach is to future proof our solutions, meaning that when a new smart device hits the market, our banking solutions can be made available faster.

When designing a new feature or experience, try not to design yourself into a corner. Think about how your design will play out across brands and on different viewports.

Be modular

Taking a modular design approach, we can break a component down into an independent part which can be used across multiple contexts. Designing and developing components this way supports teams using the components to maintain a lean solution where re-use is optimised simplifying future change through incremental upgrades.

Taking a modular approach also increases our speed to market, supporting teams to more rapidly assemble and deliver new experiences.

Consider all customers

It’s important that we deliver our brands and experiences inconsideration of all our customers’ needs, including those with impairments that need to be accommodated in a digital experience.

We put each component and digital asset through a rigorous accessibility testing process during brand and visual design, component interaction design and component development to meet the latest WCAG standards.

Accessibility is a requirement that should be weaved into the core activities of a project from inclusive design to development and testing as all team decisions have the potential to impact accessibility at all stages of product delivery.

The Westpac Group takes a digital first approach to brand design which significantly increases our ability to create accessible brands increasing our ability to design more accessible experiences and deliver the brands as intended not just in the digital ecosystem but every channel.

The GEL React component code provides compliant accessibility features tested with assistive technologies. When the code is re-used, projects benefit from an out of the box accessible component that reduces the volume of accessibility concerns.

Teams can then focus on and invest in testing the overall experience against accessibility standards.

Stay lean

When adding elements to the design system we take a rigorous, best practice approach to interface design and development. This ensures we provide high quality, robust, re-usable assets, making it easier to design, build and maintain our digital products and services.

Staying lean means that change is easier and design and tech debt is reduced awarding time to focus on continuously improving our customer experiences.

Quality is important

To ensure that we represent our brands with the highest visual integrity, we carefully design each asset to accommodate a multi-brand scenario. Every design decision we make no matter how small, considers each of our brands. A rigorous testing process and relentless attention to detail ensures that every asset is perfectly crafted to a world class standard.

Optimise for build efficiencies

We think about the things that are important to developers to meet their goals. We aim to increase performance and simplify maintainability.

Providing a single source of code for development builds to maintain multiple brands and devices, makes change much simpler for our development teams.

We style dynamically using code. By using code to style the components, we can keep things lean and increase performance of our digital experiences.

We also use 2 CSS font stacks. One for the brand font and one for the body font. The font stack allows the device to select the most appropriate font to render for the device. This increases legibility and performance. Using a font stack also supports us to translate our solutions into multi-lingual experiences with less effort.