Helping first home buyers know what they can afford

Financial transparency matters most when you’re buying your first home. For Australians, the big questions were how much they could borrow and how much they could spend on a property.

First home buyersHome loans10 usability sessions

Property listing on the Affordability tab: CommBank’s estimated price of $1,191,000, a likely range, and the buyer’s savings and income. — See what a property is likely to cost, then whether you could borrow enough.

The CommBank Property app: 'How much could I borrow?' Good news, it looks like you could borrow enough to buy this property. Loan for this property $950,000. Your borrowing power $1,025,000. Button: Get conditional eligibility. — See what a property is likely to cost, then whether you could borrow enough.

The 20-second version

My roleSenior UX Designer

Buyers were choosing properties without the full costs or a realistic picture of their budget.
I researched, tested and designed flows that matched properties to what people could actually borrow.
Online home loan conversion on mobile and tablet rose from 2% to 25%.

2% → 25%Online home loan conversionOn mobile and tablet

5.4%More lead generation opportunitiesAcross channels, which I contributed to as part of the team.

The problem

Big decisions, little guidance

People were choosing properties with little guidance and few tools:

without seeing the full costs
without a realistic sense of their budget

ClarityThe cost you don’t see is the one that breaks the budget. Showing it upfront is the honest version of the journey.

The goals

Good for buyers, good for the bank

Help people find properties they can afford, and lift home loan pre-approvals
Be a responsible bank by showing every cost upfront

What I did

Research to final screens

Part of a team of UX and UI designers.

Affordability research with first home buyers
Competitor analysis and heuristic evaluations
Sketched flows in Sketch and InVision
Prototyped for 10 usability testing sessions
Designed the final screens with the UI designer

Control“Your borrowing power” next to the loan for this property. People choose with confidence, not hope.

Hand-drawn flow: open the app, search, flip a property card, then the Affordability tab showing savings, income and monthly repayments. — **First sketch.** From opening the app, through search and a card that flips over, to the Affordability tab and monthly repayments.

Two phones showing the final Affordability tab: estimated monthly repayments of $3,531 against income, and upfront costs with the deposit left after them. — **Final design.** The Affordability tab answers the questions buyers actually ask: what would my repayments be, where would my savings go, and how much could I borrow?

Integrated search

Making search easy to come back to

Testing showed people liked to explore what the integrated search could do. So we made it more visible.

The search landing page lets people:

start a new search on any property type
jump straight back into their current search
add suburbs they’d already explored to a new search

Two search card designs: a current address search card with a map pin and the address, and a current suburb card showing 'Parramatta, +4 more' when no other criteria have been chosen. — Search cards for an address, and for suburbs with no other criteria yet.

ContinuityPeople rarely find a home in one sitting. Picking up a search where they left off keeps them moving.

The Property search screen: a search bar for address, suburb or postcode; the current search for Newtown and 4 more suburbs, $950,000 to $1,250,000, 1 to 4 bed, 2 bath, 2 car; and a list of recent locations. — The search landing page.

The playbook behind the work

Read it →