Creating a more rewarding online home loan experience
Product Design
Design Systems
Optimisation
Prototyping
Creating a more rewarding online home loan experience
Product Design
Design Systems
Optimisation
Prototyping
Creating a more rewarding online home loan experience
Product Design
Design Systems
Optimisation
Prototyping
![](data:image/svg+xml,<svg display="block" role="presentation" viewBox="0 0 16 16" xmlns="http://www.w3.org/2000/svg"><path d="M 0.975 0 C 1.513 0 1.95 0.437 1.95 0.975 L 1.95 3.172 L 4.836 0.286 C 5.22 -0.072 5.819 -0.061 6.19 0.31 C 6.561 0.681 6.572 1.28 6.214 1.664 L 3.328 4.55 L 5.525 4.55 C 6.063 4.55 6.5 4.987 6.5 5.525 C 6.5 6.063 6.063 6.5 5.525 6.5 L 0.975 6.5 C 0.437 6.5 0 6.063 0 5.525 L 0 0.975 C 0 0.437 0.437 0 0.975 0 Z" fill="rgb(255, 255, 255)" height="6.5px" id="xAWFEOs8b" transform="translate(1 1) rotate(450 3.25 3.25)" width="6.5px"/><path d="M 0.975 0 C 1.513 0 1.95 0.437 1.95 0.975 L 1.95 3.172 L 4.836 0.286 C 5.22 -0.072 5.819 -0.061 6.19 0.31 C 6.561 0.681 6.572 1.28 6.214 1.664 L 3.328 4.55 L 5.525 4.55 C 6.063 4.55 6.5 4.987 6.5 5.525 C 6.5 6.063 6.063 6.5 5.525 6.5 L 0.975 6.5 C 0.437 6.5 0 6.063 0 5.525 L 0 0.975 C 0 0.437 0.437 0 0.975 0 Z" fill="rgb(255, 255, 255)" height="6.5px" id="x4bjyXFoH" transform="translate(8.5 8.5) rotate(270 3.25 3.25)" width="6.5px"/></svg>)
↑
Part of the Macquarie Home Loans funnel used to triage users to see if they are suitable customers for the bank.
↑
Part of the Macquarie Home Loans funnel used to triage users to see if they are suitable customers for the bank.
↑
Part of the Macquarie Home Loans funnel used to triage users to see if they are suitable customers for the bank.
Challenges
In 2021, I joined Macquarie Bank’s Home Loans team at a time when the product and refinance journeys were still in their early stages. My role was to help formalise a product-specific design system and re-evaluate how the team was using interface design to solve problems.
The existing design system was no longer maintained and didn’t meet the needs of the Home Loans team. Components were siloed, inconsistent, and difficult to maintain. This led to a poor user experience across the application and slowed down both design and development. At the same time, customers were struggling with the application journey itself. Many were applying despite not being eligible, creating frustration and wasted effort. The application form was also lengthy, inconsistent, and inaccessible, which made completing it unnecessarily difficult.
KEY CHALLENGES
01
The existing design system was outdated and unsuitable for Home Loans
02
Components in the home loans flow were siloed, inconsistent, and hard to maintain
03
Customers were applying despite not being eligible, creating a poor experience
04
The application form was long, inaccessible, and confusing on mobile
05
No structured way to rapidly iterate or maintain a single source of truth for designs
Challenges
In 2021, I joined Macquarie Bank’s Home Loans team at a time when the product and refinance journeys were still in their early stages. My role was to help formalise a product-specific design system and re-evaluate how the team was using interface design to solve problems.
The existing design system was no longer maintained and didn’t meet the needs of the Home Loans team. Components were siloed, inconsistent, and difficult to maintain. This led to a poor user experience across the application and slowed down both design and development. At the same time, customers were struggling with the application journey itself. Many were applying despite not being eligible, creating frustration and wasted effort. The application form was also lengthy, inconsistent, and inaccessible, which made completing it unnecessarily difficult.
KEY CHALLENGES
01
The existing design system was outdated and unsuitable for Home Loans
02
Components in the home loans flow were siloed, inconsistent, and hard to maintain
03
Customers were applying despite not being eligible, creating a poor experience
04
The application form was long, inaccessible, and confusing on mobile
05
No structured way to rapidly iterate or maintain a single source of truth for designs
Challenges
In 2021, I joined Macquarie Bank’s Home Loans team at a time when the product and refinance journeys were still in their early stages. My role was to help formalise a product-specific design system and re-evaluate how the team was using interface design to solve problems.
The existing design system was no longer maintained and didn’t meet the needs of the Home Loans team. Components were siloed, inconsistent, and difficult to maintain. This led to a poor user experience across the application and slowed down both design and development. At the same time, customers were struggling with the application journey itself. Many were applying despite not being eligible, creating frustration and wasted effort. The application form was also lengthy, inconsistent, and inaccessible, which made completing it unnecessarily difficult.
KEY CHALLENGES
01
The existing design system was outdated and unsuitable for Home Loans
02
Components in the home loans flow were siloed, inconsistent, and hard to maintain
03
Customers were applying despite not being eligible, creating a poor experience
04
The application form was long, inaccessible, and confusing on mobile
05
No structured way to rapidly iterate or maintain a single source of truth for designs
↑
Many of the icons were animated to give the application pages some fun visual moments.
↑
Many of the icons were animated to give the application pages some fun visual moments.
↑
Many of the icons were animated to give the application pages some fun visual moments.
↑
A collection of custom icons designed for the Home Loans App.
↑
A collection of custom icons designed for the Home Loans App.
↑
A collection of custom icons designed for the Home Loans App.
Solution
I led the rebuild of the Home Loans design system, creating a Figma component library tailored to our product needs. This included reconstructing components, establishing firmer spacing rules, and aligning with developers to ensure consistency between design and code. I also built and maintained a source-of-truth screen library, enabling the team to rapidly iterate on existing pages and keep our components up to date.
To raise the quality of delivery, I introduced a formalised QA process in JIRA. This allowed us to catch visual inconsistencies, validate interactions, and add a layer of testing before new code went live.
Alongside this foundational work, the team and I designed new customer-facing features. For the top of funnel, we built triage tools to help customers quickly understand borrowing capacity and property price ranges before entering the full application. These were tested with customers and refined with input from stakeholders, balancing business requirements with usability.
We also optimised the application form by applying progressive disclosure, removing non-critical questions, simplifying interactions, and improving accessibility. Together, these changes created a smoother, more consistent experience across desktop and mobile.
Solution
I led the rebuild of the Home Loans design system, creating a Figma component library tailored to our product needs. This included reconstructing components, establishing firmer spacing rules, and aligning with developers to ensure consistency between design and code. I also built and maintained a source-of-truth screen library, enabling the team to rapidly iterate on existing pages and keep our components up to date.
To raise the quality of delivery, I introduced a formalised QA process in JIRA. This allowed us to catch visual inconsistencies, validate interactions, and add a layer of testing before new code went live.
Alongside this foundational work, the team and I designed new customer-facing features. For the top of funnel, we built triage tools to help customers quickly understand borrowing capacity and property price ranges before entering the full application. These were tested with customers and refined with input from stakeholders, balancing business requirements with usability.
We also optimised the application form by applying progressive disclosure, removing non-critical questions, simplifying interactions, and improving accessibility. Together, these changes created a smoother, more consistent experience across desktop and mobile.
Solution
I led the rebuild of the Home Loans design system, creating a Figma component library tailored to our product needs. This included reconstructing components, establishing firmer spacing rules, and aligning with developers to ensure consistency between design and code. I also built and maintained a source-of-truth screen library, enabling the team to rapidly iterate on existing pages and keep our components up to date.
To raise the quality of delivery, I introduced a formalised QA process in JIRA. This allowed us to catch visual inconsistencies, validate interactions, and add a layer of testing before new code went live.
Alongside this foundational work, the team and I designed new customer-facing features. For the top of funnel, we built triage tools to help customers quickly understand borrowing capacity and property price ranges before entering the full application. These were tested with customers and refined with input from stakeholders, balancing business requirements with usability.
We also optimised the application form by applying progressive disclosure, removing non-critical questions, simplifying interactions, and improving accessibility. Together, these changes created a smoother, more consistent experience across desktop and mobile.
↑
A borrowing calulator that we created to help new lenders discover how much they could potentially borrow.
↑
A borrowing calulator that we created to help new lenders discover how much they could potentially borrow.
↑
A borrowing calulator that we created to help new lenders discover how much they could potentially borrow.
↑
An isolated Date Picker I styled and built for the Home Loans application.
↑
An isolated Date Picker I styled and built for the Home Loans application.
↑
An isolated Date Picker I styled and built for the Home Loans application.
↑
Another animated icon I designed of a townhouse that was created for the Home Loans application.
↑
Another animated icon I designed of a townhouse that was created for the Home Loans application.
↑
Another animated icon I designed of a townhouse that was created for the Home Loans application.
↑
A mobile prototype of the borrowing calculator experience.
↑
A mobile prototype of the borrowing calculator experience.
↑
A mobile prototype of the borrowing calculator experience.
Outcomes
The design system provided a stronger foundation for Home Loans, improving consistency, accessibility, and speed of development. Designers and engineers were able to work faster with a reliable set of components, while the screen library gave us a faster starting point for new projects. The approach was well received across the organisation, with other teams recognising the value of how we maintained and updated our component set.
For customers, the top-of-funnel tools reduced drop-offs and improved the quality of leads entering the application process. The optimised application form provided a clearer and less frustrating experience, particularly on mobile. Together, these initiatives strengthened trust in the product and gave the Home Loans team a better platform to scale and improve the customer journey over time.
Outcomes
The design system provided a stronger foundation for Home Loans, improving consistency, accessibility, and speed of development. Designers and engineers were able to work faster with a reliable set of components, while the screen library gave us a faster starting point for new projects. The approach was well received across the organisation, with other teams recognising the value of how we maintained and updated our component set.
For customers, the top-of-funnel tools reduced drop-offs and improved the quality of leads entering the application process. The optimised application form provided a clearer and less frustrating experience, particularly on mobile. Together, these initiatives strengthened trust in the product and gave the Home Loans team a better platform to scale and improve the customer journey over time.
Outcomes
The design system provided a stronger foundation for Home Loans, improving consistency, accessibility, and speed of development. Designers and engineers were able to work faster with a reliable set of components, while the screen library gave us a faster starting point for new projects. The approach was well received across the organisation, with other teams recognising the value of how we maintained and updated our component set.
For customers, the top-of-funnel tools reduced drop-offs and improved the quality of leads entering the application process. The optimised application form provided a clearer and less frustrating experience, particularly on mobile. Together, these initiatives strengthened trust in the product and gave the Home Loans team a better platform to scale and improve the customer journey over time.
Credits
Credits
Credits
Role
Senior Product Designer
Client
Macquarie Bank
Year
2000
2000
2000
Other Projects
Other Projects
Other Projects
I acknowledge the Traditional Custodians of Country throughout Australia and their connections to land, sea and community.
I pay my respect to their Elders past and present and extend that respect to all Aboriginal and Torres Strait Islander peoples.
I acknowledge the Traditional Custodians of Country throughout Australia and their connections to land, sea and community. I pay my respect to their Elders past and present and extend that respect to all Aboriginal and Torres Strait Islander peoples.