The Problem

When evaluating a property, clients need to know if they can afford it.

Competitors provide payment calculators that help buyers estimate a home’s monthly payment, including mortgage, insurance, and taxes. These calculators add value to the customer experience on our competitor’s sites. Without this feature, Reali is losing customer engagement, decreasing the probability that customers will use Reali for their home purchase or loan.

My Role

I led end to end product and UX design from discovery through implementation in partnership with the product, marketing, and engineering teams as well as operations and leadership stakeholders.

Research

Competitor Research
User Flows

Design

Mid-fi & Hi-fi Mockups
Prototypes

Testing & Review

User Testing
Test Reports & Revisions

Tools used: Figma, Jira, Lucidchart, User Testing

Competitor Research

Zillow

Realtor.com

Redfin

Opendoor

We reviewed our competitor's payment calculators and made lists of possible features, inputs and CTAs.

Features

Graphic payment breakdown
Explanation of payment components
Ability to change inputs
Links to related content
Expand/collapse detailed inputs

Inputs

Home price
Down payment
Loan type/term
Interest rate
Taxes
Insurance
HOA Fees

CTAs

Find a Lender
Get Pre-Approved
Get Pre-Qualified
Contact Agent
Schedule/Take a Tour
Start an Offer

Meet the Users

Buyer & Seller

Name: Amir
Age: 48
Occupation: Attorney

Buyer

Name: Jamie
Age: 36
Occupation: Head of People Ops

Amir is looking to sell his current home in South San Francisco and buy a new one in Sausalito. He’s interested in Reali’s Buy Before You Sell program. There are a few homes he’s favorited and he want to make sure the monthly payment is affordable. He also wants to check his lending options and rates.

Jamie is a first time home buyer looking for a home in San Jose. She’s interested in Reali’s Cash Offer program and is searching listings for homes in her area. She’s found a few homes she likes and wants to see if the monthly payment is affordable.

Design Process: Mortgage Calculator

Placement: Listing Pages

Wireframes

Mid Fidelity

Prototype

View Desktop Prototype

User Testing

Round 1: Desktop Prototype

Target Group

Participants: 15
Age: 30-55
Location: California
Criteria: Homeowner and looking for a new home in next 12 months
Testing Partner: Pixis Insights
Devices: Desktop

Key Findings

87% of participants felt the overall experience navigating the listing page and using the calculator was good
67% said they would like to see more information provided about the inputs and graphic breakdown
60% of participants did not like having to show/hide additional input fields

Enhancements & Follow Up

Always show all input fields and remove link to hide them
Add more tool tips for each input field
Add hover state for payment sections of multi-color bar graphic

Prototype draft

Revised for launch

Round 2: Post Launch

Target Group

Participants: 25
Age: 30-55
Location: California
Criteria: Homeowner and looking for a new home in next 12 months
Testing Partner: Pixis Insights
Devices: Desktop, Mobile Web

Key Findings

80% of participants mentioned that they would like to access property photos directly on the listing page
52% of users thought the ‘Learn More’ CTA would take them to a page about Cash Offer, not Buy Before You Sell
20% of participants noticed discrepancies between the input fields and the tool tip copy
16% of participants noticed bugs when changing the % fields in the payment calculator

Enhancements & Follow Up

Work with engineering add a photo carousel to the listing page
Edit tagline about the ‘Learn More’ CTA so it’s clear that the link leads to more info about Buy Before You Sell
Change tool tip copy so it aligns with inputs (annual vs monthly amounts, loan terms, etc.)
Coordinate with engineering to fix functionality of % fields in the payment calculator

Final Design: Mortgage Calculator

Impact

173%

Increase in listings viewed 30 days after launch

164%

Increase in new users 30 days after launch

72%

Increase in returning users 30 days after launch

Next Steps

Continue to track Reali Loans pre-Approval application start
Review other features and data to add to the listings pages with product team
Coordinate Affordability Calculator requirements and design with marketing team