Crafting UX patterns for Westpac design system
In the banking world, we often notice that application journeys for different products share similar elements in user experiences. This highlights the importance of finding consistency and reusability—not just in code, but also in the overall experience and visual style. By doing this, we can streamline processes and make things simpler for everyone involved.
My role
I joined this project with the exciting task of creating UX and UI patterns (not just components) for Westpac's origination journeys. My goal was to integrate these patterns into Westpac's design system, GEL, all within a two-month timeframe.
Designers
Emma - Senior XD (lead)
Julie - Junior XD
Working with
GEL designer (Kate)
Creative director (Nick)
Accessibility SME (Michael)
Content writer (Anton)
These questions were at the heart of my thoughts both at the start and throughout the project:
How much should we patternize a flow?
How can I create a pattern that supports designers' creativity instead of stifling it?
Our plan
Working in a corporate environment often means that 8 out of 10 times, we can’t carry out the entire end-to-end design process due to factors like budget, timelines, or shifting priorities. Fortunately, with this project being design-driven, we had the rare opportunity to 'do what we want' and follow the process step-by-step :) Here’s the plan we created and implemented:
Discovery & Define TLDR
Julie and I took the time to audit 25 journeys across both business and consumer products. From those 25 flows, we discovered 29 repeatable patterns. To make the most of our 8-week timeframe, we organised a ranking activity with the team to prioritise the most important patterns to focus on.
In the end, we settled on these 9 patterns to work on:
Across Consumer and Business Banking:
Tax file number & foreign tax residency capture
Dashboard
Review
Outcome - application Submitted
Business banking:
Select business
Select industry type
Select primary trading location
ABN/ACN capture
Select profile
Backlog:
Select account
Retrieve application (if time allows)
Discovery & define - detailed process
01 The Big Audit
First, we audited Westpac’s public site to identify the corresponding origination journeys for 29 products. This also included examining the composition of the flows, such as the number of business, consumer, digital, lender-assisted, and legacy flows. We then consolidated all origination flows into a single overview.
02 Consolidate & Identify
Next, we mapped out the high-level flow for each origination experience. By analysing how frequently each pattern (user steps) occurred, we were able to dive deeper and identify common repeatable steps across these experiences.
Common repeatable steps - Across Consumer & business banking patterns
Common repeatable steps - Business banking patterns
03 Derive and define flow
We moved forward by mapping out a high-level origination flow that included the repeatable steps we identified. This helped establish a common journey with the sequence for future designers to reference. Afterward, we counted how many times each pattern appeared across all flows to get a clearer understanding of their prevalence.
04 Prioritise
To determine the value and effort associated with each pattern, we organised an unmoderated session with Team Borrow. We consolidated the results and mapped them against an impact and effort matrix, taking into account the number of appearances for each pattern to prioritize them effectively.
Ideate & design TLDR
With the nine patterns identified, we collected screens from all relevant projects related to each pattern. We also took a look at existing research, user testing insights, and competitor designs to understand the current state of each pattern and the feedback they received. This thorough review allowed us to establish each pattern more effectively.
As a result, we created a summary artefact for each pattern, bringing together all insights—including screens from existing projects, competitor analysis, and past testing feedback—along with our proposed designs.
In making the draft designs, we collaborated closely with our wider design team by scheduling three check-ins per week with the GEL designer (Kate) and weekly meetings with the design director (Bridget), creative director (Nick), and content writer (Anton).
Test & Iterate TLDR
Once we finished the draft designs for all the patterns, we conducted two rounds of testing on these patterns and our proposed future flows. We received valuable feedback, including some great insights and suggestions for improvements.
Ideal origination flow prototype
(Product agnostic)
Consumer
Business
80% preferred the proposed flow with new patterns
Increased consumer NPS ratings by 10.7%
Usability rating 4.5/5
Look and feel 4.3/5
Test & iterate - Detailed process
3 rounds of user testings
Moderated sessions focused on dashboard, review, form shell
We conducted moderated sessions to explore the three complex patterns in detail. These sessions enabled participants to provide in-depth feedback while we observed their interactions in real time. This qualitative approach helped us identify design shortcomings, resulting in a more refined final product.
How
8 participants, both genders, aged 18-60 years.
3 days with 8 one-hour sessions.
Remote askable interview sessions.
Unmoderated test on end to end flow - business & consumer
We also utilized unmoderated testing to gather quantitative feedback on how well our proposed patterns fit into the overall flow. By using Maze, we were able to reach a larger, diverse user group. This allowed us to assess completion rates, time on task, and overall satisfaction, validating our design decisions with real-world performance metrics.
How
1st round for consumers with 25 participants.
2nd round for businesses with 20 unmoderated sessions.
Recruited on Askable, conducted on Maze.
Testing feedback synthesis
Towards the project's conclusion, we collaborated closely with our accessibility SME, content writer, GEL system designer, creative director (Brand), and compliance team to finalize the designs based on the testing insights. With contributions from many others, we successfully produced the pattern guidelines outlined below, now published on our Westpac GEL design system site.
Pattern example
I’ve included an example of the final patterns in the case study. For the full patterns we created, view all patterns here
Post live results
Patterns are implemented across multiple projects (business or consumer) Friction score on transaction origination journey reduced by 36% from 83 to 53
My reflections
What I am proud of
Reusable patterns without limiting creativity
One of the best things I heard after finishing the project was that other designers and engineers were able to use the system as a foundation, remixing the patterns to suit their needs. Instead of limiting creativity, it set a solid groundwork, allowing more focus on areas that required bespoke design.
Design backed by due diligence
Our designs were solid, supported by competitor analysis, past user testing, peer reviews, and fresh insights from new testing rounds. It gave us confidence in our decisions.
This project gave me the chance to collaborate with so many talented designers across Westpac. It was a fun and rewarding experience working with different teams.
What I could do better
I moved to another project quickly after this one wrapped up, so I didn’t get the chance to personally track how often the patterns were used, work with developers to turn them into coded components, or improve the patterns based on feedback. It’s something I wish I could’ve been more involved in if there had been more time.
Instead of having the patterns merging organically, after we delivered the project, the leadership set a goal to complete 10 patterns for the entire team, which became more of a target to hit for performance purposes. For the later phases, it felt like designers were juggling this work on top of their existing load, so the process became more of a checkbox rather than an organic, rigorous design process.