Westpac

Problem statement: Diverging product design is leading to duplication of work, inconsistent user experience and slow decision making.

The problem

The Westpac product teams are split into three core areas: Website, Westpac 1 and Business banking. This distinction makes sense given the varying design and engineering needs between these areas, however, it meant that over time the respective design systems that had been set up had diverged from each other, leading to inconsistent experiences for users who often transitioned between the three areas in one journey. It also meant that very similar work was often being done two to three times from scratch, rather than teams being able to share solutions with each other. The designers also complained about slow decision making, with no clear standards meaning that very minor design decisions had to get approval from different stakeholders slowing down design and development.

Examples of audits conducted on the current state public website and apps

In combination with duplication of work and inconsistent user experience, the team also knew that the accessibility of some areas of their products, like legacy components, was not up to a sufficient standard. A company design system enabled us to set some fundamental accessibility basics, with a goal of enabling AA compliance on all Westpac products, with AAA compliance on ket content areas.

An example of varying colour palettes: Different greys, brand red, accent and status colours.

Our starting point

Westpac used Sketch for their design work until mid-2020 when they made the decision to switch to Figma. This provided a good opportunity to introduce a new design system to the design team, alongside any other help they needed around file management and organisation.
This lined up well with an upcoming release from the Business Banking team that would see large portions of their platform move to React native, which was also being used in some areas of Westpac 1, enabling easier sharing of dev tokens and components.
‍
Most importantly the design system project was initiated from within Westpac, and I was able to join a newly created governance team that had the insight and trust to make decisions for the wider product teams. The governance team had one hour per week that they were able to commit to the project, plus a dedicated designer who was able to spend around half his time on the project for the initial few weeks. I was able to push things further with my full-time commitment and experience building design systems in Figma.

Diagram of initial federated design system team

The approach

The approach for this project was a little different to a typical discovery project. While I did go through a process of understanding the current problems, I didn't feel like I needed to do a particularly large amount of design work. After talking to the product teams and reviewing the existing design systems/pattern libraries it was obvious that the best approach would be to merge or combine the already well thought out work from each team into one, consistent system - rather than looking to design a new set of styles from scratch.

The approach, therefore, became weekly periods of work on specific areas of the system informed by discussions with the governance council and product teams, before coming back at the end of each week to walk through the work with the council, make decisions and ensure everybody was in agreement with the proposals.

I found this worked well to enable those who would be using the system to take part in a democratic process of development, ensuring that the team were eager and became the systems biggest advocates.

Towards the end of the project, we also began to implement the system in the Business Banking team as a pilot project, enabling quick feedback or requests for missing elements. The colour tokens were also adopted by the mobile dev team, allowing us to work through some of the intricacies of keeping dev and design files in alignment.

Process for involving the governance team, and therefore the project teams in the development of the system.

The result: Foundation v0.0.1

Documentation

One of the trade-offs we made early on was to include all documentation within the main Figma file, with decision documentation linked to Jira. While the end goal is to release a public internal site for the system we decided it could be deprioritised until a number of components had made it through development and QA as until that point the main user of the system would be the design teams.

Naming

Together with one of Westpac designers we did a review of similar design systems and worked with the developers (who had more specific requests based on platform standards for token naming i.e. iOS) to form a set of naming conventions. This resulted in a fairly standard atomic design style approach to naming, with some key considerations for things like:

Likely needing to expand the colour palette in the future, so choosing a number based colour token naming e.g. Red100, Red200 ... Red1000
Distinguishing between the base and contextual tokens e.g. Red500 as a base, but used in design/dev as Warning or Brand Primary. Enabling more easy changes to the colour palette in the future.

Colour

player performance breakdown - screenshot

Colour numbering system with space for growth in the future.

Tokens

With the team, we worked through a process of comparing all the existing colours, typefaces, grid systems and other fundamentals in use across the business. One by one these were refined into a single set based on: commonality across the business, representative of new brand direction and accessibility considerations.

Components

Once we had the tokens created and agreed on with the team we moved on to creating a basic set of components. The goal with these was to create a basic library that would enable the creation of more complex components within specific teams and projects so that the system was not overly prescriptive. An example of this being the different levels of detail needed in filter drop-downs between Westpac.co.nz, Westpac 1 and Business Banking

Like the tokens, I went through a process of aggregating and reviewing existing components, discussing with the team and making suggestions where necessary to create a documented set of well-organised components with detailed state consideration.

Shot of inputs, selectors and other controls and their states

Design tool testing

We wanted to ensure that the Figma library we set up for the designers at Westpac was usable, simple and flexible. That meant that we went through a few iterations of naming and file organisation to ensure that the most common states, usually unfilled/unselected and filled/selected were fast to access. But ensuring that states like focus, hover and loading were also easy to find if needed. Through the pilot release with the Business Banking team we got feedback and refined some of the design tool usability issues. In particular finding an effective solution for customising the colour of icons, without detaching from the library was something we were able to solve - minimising divergence from the system.

Handover until today

The Westpac team has continued to develop and use the Foundation design system across their projects, something I consider a major success given the uncertainty associated with handing over something that will always be a work in progress.

In this case, because the team were able to advocate internally, and show success and progress with the system they were able to continue development with a dedicated Westpac designer working on and expanding the system. This, along with the involvement of the team throughout the process enabled the project to continue smoothly with a sense of ownership and purpose.

Development has also continued, with recent projects implementing these components in Business Banking and Westpac 1. Future work will involve building these components out across mobile platforms and updating legacy components to the new design language.

Range of form components and states created

Faster, more consistent releases with a company-wide design system.