top of page

Home Lending Calculators

Responsive design for multiple screen sizes.

Responsive web and App calculators.

Experience design lead/manager for developing three home lending calculators for the Bank.

Overview of my role

As the experience design lead, I lead the design team working on three new home lending calculators. These were an Upfront Costs, Borrowing Capacity and Loan Repayments, calculator. The goal was to ensure that data from each calculator would be integrated and stored for customers to allow them to view their results across any device within the Banks ecosystem. If customers tried a calculator within the Banks Property App, they would see their saved result within NetBank and on the home lending website.

This new strategic approach to how data was shared across platforms allowed the Bank to validate this data on behalf of customers. This meant they could offer instant pre-approval to customers when they inquired about loan products. Customers were able to instantly search for property with the added security they were able to buy. This customer-centric approach to helping solve customers' needs had never been approached within the Bank before and proved to be widely successful in developing a higher level of customer satisfaction.

Strategist

Working closely with the business we developed an innovative new product vision focused towards delivering real value to customers throughout their product engagement journey throughout the lifetime of the service.

Owner

We defined the product by evangelising the user needs while balancing the business goals. I worked effortlessly with the team to prioritise and negotiate the product features.

Designer

I lead the UX and UI design teams as well as working within these design teams. I was hands on with the wireframes through to the final UI design and pattern libraries to bring the product to life.

Leader

We developed a lean UX methodology to enable the design team to collaborate closely with our engineers to deliver an design and code at the same time to dramatically increase our work capacity.

Mentor

My role included the mentorship to a number of design resources within the program. I worked effortlessly to raise the standard of work by helping improve their approach to design.

CommBank.png
Overview

The problem and hypothesis

How to improve a fragmented, impersonal and confusing experience

The strategy we were presented with was that many of the Bank's.exisiting customers found a disjointed experience when they engaged with the Bank. Customers had no way of continuing a calculator result into a tangible outcome outside of printing a result to show a lender. The process was incredibly disjointed and caused frustration as customers were required to repeat several steps over and over again before they solidified the result. This confusion drove customers toward mortgage brokers to get help cutting through the complexity.

With this in mind, our goal was to build a platform that would help improve transparency, reduce complexity and return a sense of control to customers looking to explore the property market. We wanted to make the process less daunting by offering first-time and subsequent buyers a way to help them with all their end-to-end buying needs. To integrate their mortgage exploration it into the Banks existing platforms and ensure that the customer journey was continued at every touch point, making it easier to engage with the Bank.

Hypothesis
Methodology

Calculators with transparent costs

Helping customers figure out real costs by providing calculators with transparent costs.
Caclulators_web_1.png
Caclulators_mobile_upfront.png
User personas

Understanding user needs

We continuously mapped our users emotional states throughout the design process

By developing an in-depth research plan we gained deeper qualitative insight into customers' pain points throughout the buying process. This allowed us to better understand their emotional levels throughout the journey to uncover where the biggest improvements needed to happen.

Awareness

To discover how CommBank's products and services can satisfy my needs and goals.

Support discovery

Provide relevant messages

Appeal to emotional states & aspirations

Consideration

To get to a shortlist of products and services based on a set of criteria.

Distinguish  value
proposition

Be transparent

Support peer conversion

It also allowed us to communicate the severity of the current process and support conversations throughout the design process. This approach to research was a major breakthrough for us and it helped ensure our focus was on improving the overall product and service.

Evaluation

To confirm if the product or service is the best fit.

Allow exploration

Contextual choices

Commitment

To apply with ease and receive the product and service as expected - without having second thoughts.

Increase efficiency

Be immediate

Manage expectation

Reassure the purchase

Target
user state

Assisted

Excited

Hopeful

Confident

In control

Excited

Confident

Accepting

Confident

Determined

In control

Assured

Knowledgable

Accustomed

Current
user state

Skeptical

Establish our
buying needs

What type of buyer are you

- Live in

- Investor

- Not sure?

Am I buying alone or with someone else How much do I/we know about the process?

What do you know about me that makes the experience unique to me.

Unsure

Overwhelmed

Bothered

What could
we afford?

How can I figure out what’s my buying capacity?

- Calculators

- Expenses How much deposit do
I/we need?

What can I/we afford to repay What suits my current lifestyle

What do we need to consider

What could I/we really afford? Benefits of buying what you can afford now Be patient with your search Don’t let yourself feel pressured How to negotiate the sale

Do your homework on the property

Finding someone that’s willing to help

Who can we speak with to get honest help

Understand
 all the parties that need to be involved

Hopeful

What’s the right property for us

What should we search for

What suburb should we be looking in

What property type suits our price range

What property features are important

What could the rental return be

What are the suburb insights and growth

Getting to see the property

Managing the inspection times

How to get to the inspections

Priortising multiple locations

Managing my calendar

Now thatyou’ve found the right property

Are we ready to buy the property

Who else might be interested

How are they going to sell the property

When is the auction/sale

Frustrated

Bothered

Frustrated

Missing out on the property

What factors caused us to miss out

Do we need
to reset expectations

Are we still looking for the right thing

Is this still the right area 

Disillusioned

Unconfident

Going back to the drawing board

What was our plan B

Resetting our expectations

Understand 
the market better

Readdressing our price range

Getting better prepared

Understand 
how to buy property

Understanding the value of the market

The difference between going to auction and making an offer

Understanding how to bid at the auction

Using an agent to help your bid

You got your place, what comes next

Organising conveyancing

Organising pest and building inspections

Securing the  financial loan

Organising insurance

Tracking the loan process to ensure it goes smoothly

Finalising the contracts and paperwork

We’re under contract what’s next?

Make the final property checks

Paying the stamp duty on the sale

Understanding and paying rates and strata fees

Collecting the keys to your new property

Celebrate and congratulate the users effort 

Moving in or renting out your new property

Budgeting to move house

Redirecting your mail

Responsibility of a landlord

Finding someone to manage your property

Finding new tenants

What to look for in a tenant

What rent should I/we charge?

Confused

Overwhelmed

Non existant

Disoriented

Easy input for quicker results

The ability to calculate on your own or add your partner and calculate together
Borrow_input_1.png
Borrow_input_2.png
Borrow_input_3.png

Transparent calculator results

White-Matte-calculators-crop.png
Affordable repayments

We linked the calculators on the platform so if you completed them all users would get a better understanding of their ability to make the repayments.

Making is much easier for users to understand the costs of paying off a mortgage.
Extra repayments

We built in the ability for users to experiment with their repayments to allow them to pay off their mortgages sooner.

Easy to understand

We transformed the repayment calculator into user friendly results making it much easier to follow the payment breakdown over the life of the loan.

Transparent costs

We built in ALL the costs associated with the loan so there would be no hidden surprises when trying to pay down the loan.

Transforming an entire eco-system

Improving every interaction between our service and our customers

This work showed the organisation that they would need to transform the entire model for how they engaged their customers in the mortgage space. To assist them with this, we also developed a customer engagement framework that would shift the Banks focus from new product sign-up to servicing existing products through management and tools.

This would help strengthen the Banks customer value proposition. It outlined a product eco-system that consisted of a new flexible mortgage product, App and desktop experiences, a responsive mortgage application, shared user experience, mortgage calculators and a number of product management tools.

New loan
product
Property search
Native App
Desktop experience
Mortgage calculators
Responsive application
Shared experience
Ongoing services

Financial empowerment through results

Results that help users understand their ability to borrow and live with mortgage repayments.
affordability - Web Model.png
Caclulators_mobile_borrow.png

Results that link together

A suit of calculators that work together by sharing information across all platforms.

Upfront cost calculator

Caclulators_mobile_upfront.png

Affordability calculator

Caclulators_mobile_borrow.png

Repayments calculator

Caclulators_mobile_repayment.png
bottom of page