Homebase Mockup

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.


  • Competitor Research
  • User Flows


  • Mid-fi & Hi-fi Mockups
  • Prototypes

Testing & Review

  • User Testing
  • Test Reports & Revisions

Tools used: Figma, Jira, Lucidchart, User Testing

Competitor Research

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


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


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


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

Meet the Users

Amir headshot

Buyer & Seller

  • Name: Amir
  • Age: 48
  • Occupation: Attorney
Jamie headshot


  • 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

Listing pages



Mid Fidelity

Mid Fidelity
Mid Fidelity

User Testing

Round 1: Desktop Prototype

Prototype view

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

Prototype draft

Revised for launch

Prototype final

Round 2: Post Launch

Prototype view

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

Final Design



Increase in listings viewed 30 days after launch


Increase in new users 30 days after launch


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

Design Process: Affordability Calculator

After launching the mortgage calculator on the listing pages, we partnered with the marketing team to develop an affordabilty calculator.

Initial drafts

Initial draft
Initial draft

Redefine Inputs & Outputs

We reviewed the proposed inputs and outputs with Capital Markets and other stakeholders to develop an approved list based on industry standards.

Standard Inputs

  • Annual household income
  • Down payment
  • Monthly debt
  • Loan interest rate

Advanced Inputs

  • Homeowner's insurance rate
  • Property tax rate
  • PMI
  • HOA fees
  • Loan term


  • Affordable home price
  • Down payment
  • Closing costs
  • Down payment percentage
  • Monthly payment

Mid Fidelity

We refined the design to include the revised inputs and outputs and align with the existing marketing landing pages.

mid fidelity
mid fidelity

Hi Fidelity

hi fidelity

Design Review & Coordination

design comments
design comments

Final Design: Affordability Calculator

final mockup
final mockup

Next Steps

  • A/B test CTA copy and links after launch on Instapages

  • Add affordability calculator to Reali Loans page

  • Consider adding to other marketing pages