Your role ~ Deliver code consistency across our digital brands achieving the quality and efficiencies that the Design System fosters.

use the tools

get up and running quickly and efficiently

GEL is a systematic design approach with a multi-brand responsive framework, it’s the Group’s ‘single source of truth’. It underpins our Customer Centric Design Methodology and helps to comprehensively deliver the Westpac, St.George, BankSA and Bank of Melbourne brands consistently with quality across every digital user interface. Most importantly, its tools are accessible and digestible, helping you and your peers deliver clean, high-quality code and generate customer outcomes faster, and with much less effort.

see the benefits

reap the rewards

Like any good design framework, there are inherent benefits that help your project deliver customer experiences with integrity on time and on budget:

  • CONSISTENCY through digital design clarity and direction
  • EFFICIENCY through a single source, multi-brand, multi-device solution
  • QUALITY through empowering us to deliver on our brand promises

Fundamentally though, collaboration is the key to success and one of the pillars for great work, not just between ourselves but also between visual and CX/UX designers.

plan effectively

get it right first time

  • Getting support

    Sometimes you need to bounce ideas off others or just need an extra pair of eyes. We’ve established regular catch-ups and provided resources to support you and your team to deliver great design and a quality outcome for your Westpac Group project. The best way to make contact is to email us.

  • Plan for quality

    There are different levels of engagement with the GEL, even within the same role. Find out those options and processes available to better execute your project.
    More about Planning for quality

work effectively

reduce effort for a better outcome

Our design systems play an important role in achieving quality, consistency and efficiency across all our brands user interfaces.

We’re constantly building and refining these systems to cater for the ever changing digital brand landscape.

These systems also allow us to quickly implement new front end technologies into our projects.

Being able to react efficiently and effectively to change means our digital products and services will always utilise bleeding edge technology. This will enable us to continually design and build high quality products and services for our customers.

It’s important to understand these systems. They’ll help you design and build coherent, consistent user journeys while maintaining strong brand alignment.

  • the Design System

    As well as being a tool to inform developers, the GEL Design System works as a coded visual style guide for our designers. They are the single source of truth for the digital brands as well as a representation of the common elements used in digital interfaces. View the Design System

  • dev starter pack

    The GUI Front-end Dev starter pack is a complete front end development environment that aligns with the Design System. It’s designed to get front-end developers up and running quickly. It’s available on GitHub and uses technologies like node, npm and grunt. View in GitHub

  • collaborative code

    The personal nature of coding style is a challenge in a team atmosphere. That’s why we strongly recommend style guides for software development teams. Getting everyone on the same page is difficult, and the style guide is a great place to start. By having everyone write code that looks the same, you can avoid a lot of problems down the road. More about code collaboration

  • grunt and npm

    Automate your environment to speed up your work. Prevent errors and get help with setting up the tools we recommend to make it easier. More about grunt and npm

  • the grid

    In today’s digital world responsive design is simply best practice. We’ve created a responsive grid – along with a library of templates to help you design for multiple screen sizes. The responsive grid is a powerful system. It’s difficult to master but crucial if your design has to be responsive. More about the grid

  • iconography

    Our global visual language is shared across all the brands. We have a library of carefully crafted user interface icons for use in your designs, along with a detailed explanation of when and how to use them and more importantly when not to use them. More about iconography

  • typography

    There’s no disputing the power of typography. It has a huge influence on brand perception and recognition. Good typography not only differentiates a brand but also communicates the brand’s style, personality and tone of voice. More about typography

talk to us

we’re here to help you get started and stay on track

  • 1 Planning phase

  • 2 Design & build

  • 3 Approval & Delivery