YAHOO FINANCE
HOW MUCH HOUSE
CAN I AFFORD
CALCULATOR
CAN I AFFORD
CALCULATOR
Empowering homebuyers by simplifying the mortgage affordability process, based on key financial inputs, making complex decisions easier
Timeframe
1.2024 - 3.2024
Role
Lead product designer
Platform
Desktop, Mobile web
MISSION
Empower users to confidently plan their home-buying journey
by providing a simple, clear, and useful calculator that
help them understand how much house they can afford.
PROBLEM
A Critical Gap in Personal Finance Tools
The "How Much House Can I Afford?" calculator is an essential tool for home-buying research, yet it’s missing from our Personal Finance offerings. This leaves users underserved and more likely to turn to competitors for their home-buying journey, reducing our platform's value and relevance in personal finance.
Missed Traffic Opportunity from High-Volume Keywords
The keyword “how much house can I afford calculator” averages 201,000 monthly searches. Without this calculator, we receive no share of this traffic, missing out on a significant opportunity to attract users actively seeking financial guidance and tools.
Lost Revenue from Affiliate Partnerships
Without this tool, we’re unable to monetize traffic through partnerships with mortgage lenders, financial institutions, and advertisers. This not only results in lost revenue but limits our ability to connect users with valuable home-buying resources.
RESEARCH
Method: Interviews + Secondary User Research
When formal user research isn’t feasible, I take ownership of gathering insights using practical methods to ensure we capture user pain points and goals effectively.
I started by leveraging existing market research on personal finance users to understand their challenges and motivations.
Then, I conducted a quick competitive analysis of similar calculators to identify common product requirements and user goals.
To supplement this, I collaborated with my PM to identify five colleagues who had recently purchased or were planning to purchase a home. Through brief internal interviews, I captured key user needs and goals that informed my design.
Ultimately, I incorporated ongoing internal testing throughout the design process to validate insights and refine the designs iteratively. These strategies allowed me to ground my work in user-centric insights despite time constraints.
I started by leveraging existing market research on personal finance users to understand their challenges and motivations.
Then, I conducted a quick competitive analysis of similar calculators to identify common product requirements and user goals.
To supplement this, I collaborated with my PM to identify five colleagues who had recently purchased or were planning to purchase a home. Through brief internal interviews, I captured key user needs and goals that informed my design.
Ultimately, I incorporated ongoing internal testing throughout the design process to validate insights and refine the designs iteratively. These strategies allowed me to ground my work in user-centric insights despite time constraints.
User Journey Mapping
After synthesizing the research, I distilled the insights into a quick persona and a user journey map to guide the design process.
Target Users
The primary users are individuals in the U.S. with good credit scores who have saved for a home and value simplicity and clarity in understanding their financial options.
User Journey Map
The journey highlights five key steps users take while interacting with the affordability calculator: Awareness, Exploration, Analysis, Decision-Making, Post-Engagement.
This user journey map helped identify opportunities to create a seamless, engaging experience that meets user goals at each stage of their journey.
Target Users
The primary users are individuals in the U.S. with good credit scores who have saved for a home and value simplicity and clarity in understanding their financial options.
User Journey Map
The journey highlights five key steps users take while interacting with the affordability calculator: Awareness, Exploration, Analysis, Decision-Making, Post-Engagement.
This user journey map helped identify opportunities to create a seamless, engaging experience that meets user goals at each stage of their journey.
USER INSIGHTS
Defining Affordability
Complexity of Variables
Scenario Exploration Challenges
Defining Affordability:
Users struggle to understand what “affordable” means in the context of their specific income, savings, and debt. Without clear guidance, many feel unsure about where to start or whether their calculations are accurate.
Complexity of Variables:
Affordability depends on multiple variables such as interest rates, loan terms, property taxes, insurance, and hidden costs. The sheer complexity of these factors creates confusion and often leads to mistrust in the results, leaving users feeling overwhelmed.
Scenario Exploration Challenges:
Users want an easy way to evaluate “what-if” scenarios, such as increasing their down payment or adjusting their loan term. However, most tools lack intuitive features to help them explore different possibilities, making it harder for users to make confident decisions.
Addressing these pain points was essential to ensure the calculator provides clarity, builds trust, and empowers users in their home-buying journey.
Users struggle to understand what “affordable” means in the context of their specific income, savings, and debt. Without clear guidance, many feel unsure about where to start or whether their calculations are accurate.
Complexity of Variables:
Affordability depends on multiple variables such as interest rates, loan terms, property taxes, insurance, and hidden costs. The sheer complexity of these factors creates confusion and often leads to mistrust in the results, leaving users feeling overwhelmed.
Scenario Exploration Challenges:
Users want an easy way to evaluate “what-if” scenarios, such as increasing their down payment or adjusting their loan term. However, most tools lack intuitive features to help them explore different possibilities, making it harder for users to make confident decisions.
Addressing these pain points was essential to ensure the calculator provides clarity, builds trust, and empowers users in their home-buying journey.
DESIGN PROCESS
Starting with the Core 3 Phases - Exploration, Analysis, Decision Making
The first step in the design process was to identify and prioritize the core functionality of the calculator by focusing on the heart of the user journey: the Exploration, Analysis, and Decision-Making phases.
PHASE - EXPLORATION
The Exploration phase begins with users inputting their financial data to interact with the tool and discover their home affordability possibilities.
I explored two primary approaches for data input:
Traditional Form List: A simple, compact layout displaying all required fields at once for users who prefer a clear overview of the input process.
Step-by-Step Guide: A guided, hand-held approach that breaks the process into smaller, focused steps, ideal for users who may find financial data entry intimidating.
Traditional Form List: A simple, compact layout displaying all required fields at once for users who prefer a clear overview of the input process.
Step-by-Step Guide: A guided, hand-held approach that breaks the process into smaller, focused steps, ideal for users who may find financial data entry intimidating.
After considering our target audience—users with some familiarity with financial tools—I decided to proceed with the traditional form list approach. To balance the needs of both experienced and inexperienced users, I implemented the following improvements:
Auto-Filling Form Fields: Default values based on national averages were provided, helping users quickly get started while ensuring the data felt relevant and actionable.
Contextual Tooltips: Paired input fields with concise tooltips to address gaps in understanding, making the tool approachable for users with varying financial literacy levels.
Real-Time Updates: Removed the “Calculate” button, enabling the results to update instantly as users adjusted inputs.
This streamlined the process, allowing users to immediately see the impact of their changes and explore scenarios more efficiently.
Contextual Tooltips: Paired input fields with concise tooltips to address gaps in understanding, making the tool approachable for users with varying financial literacy levels.
Real-Time Updates: Removed the “Calculate” button, enabling the results to update instantly as users adjusted inputs.
This streamlined the process, allowing users to immediately see the impact of their changes and explore scenarios more efficiently.
PHASE - ANALYSIS
With the input phase finalized, I moved on to the Analysis phase, where users seek to understand the answers to their key questions about home affordability.
I designed the analysis section using a progressive storytelling structure that mirrors the user's natural mental model, as uncovered through interviews. The goal was to guide users through a logical sequence of insights, progressively deepening their understanding and building confidence in the tool's outputs.
The design addressed a series of questions that naturally flow in the user's thought process:
I designed the analysis section using a progressive storytelling structure that mirrors the user's natural mental model, as uncovered through interviews. The goal was to guide users through a logical sequence of insights, progressively deepening their understanding and building confidence in the tool's outputs.
The design addressed a series of questions that naturally flow in the user's thought process:
"What House Can I Afford?"
The first and most critical insight, this was presented prominently, showing the maximum home value users could afford based on their inputs.
"What Will My Monthly Payment Look Like?"
Building on the affordability result, this section broke down monthly payments into clear components, such as principal, interest, taxes, and insurance.
"How Does This Affect My Overall Finances?"
This step added broader context, helping users see how their affordability and monthly payment fit into their overall budget, highlighting savings, debt ratios, and remaining disposable income.
"What If...?"
Recognizing that users often want to test alternative scenarios, this section allowed for dynamic adjustments (e.g., down payment size, loan terms) with real-time updates to affordability, monthly payments, and budget impact.
The first and most critical insight, this was presented prominently, showing the maximum home value users could afford based on their inputs.
"What Will My Monthly Payment Look Like?"
Building on the affordability result, this section broke down monthly payments into clear components, such as principal, interest, taxes, and insurance.
"How Does This Affect My Overall Finances?"
This step added broader context, helping users see how their affordability and monthly payment fit into their overall budget, highlighting savings, debt ratios, and remaining disposable income.
"What If...?"
Recognizing that users often want to test alternative scenarios, this section allowed for dynamic adjustments (e.g., down payment size, loan terms) with real-time updates to affordability, monthly payments, and budget impact.
Before diving into the design process, I familiarized myself with the debt-to-income (DTI) ratio, a fundamental concept in determining home affordability. The DTI ratio represents the percentage of a user’s income allocated to debt payments. Mortgage lenders often use thresholds like 36%, 44%, or 50% to assess whether someone can afford a mortgage.
"What House Can I Afford?" + "What Will My Monthly Payment Look Like?"
In my initial designs, I focused on showing price ranges tied to key DTI thresholds (36%, 44%, 50%) and highlighting a recommended affordability point.
Internal Feedback:
- The labels didn’t visually connect to the percentages, making the insights harder to interpret.
- The broad price ranges felt too general, making it difficult for users to relate the results to their specific financial situations.
Internal Feedback:
- The labels didn’t visually connect to the percentages, making the insights harder to interpret.
- The broad price ranges felt too general, making it difficult for users to relate the results to their specific financial situations.
How should i bring the range of DTI into the design for users to better explore the full range their affordability, the answer came naturally as using a slider component.
In my later explorations, I introduced an interactive slider to enhance user engagement and address feedback about clarity and relatability.
-The slider allowed users to adjust their DTI percentage and see immediate updates to affordability calculations. This made exploring “What if” scenarios intuitive and dynamic.
- I collaborated with our design system lead to refine the slider design, ensuring it was visually appealing, accurate, and easy to use.
- Key challenges included balancing clarity with simplicity—determining how to label the slider, explain the meaning of percentages, and introduce the concept without overwhelming users.
-The slider encouraged exploration, allowing users to test specific DTI values and instantly
see the impact on affordability.
- It added an interactive layer, helping users connect more personally with the data.
The storytelling still lacked clarity, as users needed more guidance to understand how the slider results tied into their broader financial picture.
While refining the slider design, I continued working on the next phase to maintain momentum and ensure the overall experience remained cohesive and user-centered.
- I collaborated with our design system lead to refine the slider design, ensuring it was visually appealing, accurate, and easy to use.
- Key challenges included balancing clarity with simplicity—determining how to label the slider, explain the meaning of percentages, and introduce the concept without overwhelming users.
-The slider encouraged exploration, allowing users to test specific DTI values and instantly
see the impact on affordability.
- It added an interactive layer, helping users connect more personally with the data.
The storytelling still lacked clarity, as users needed more guidance to understand how the slider results tied into their broader financial picture.
While refining the slider design, I continued working on the next phase to maintain momentum and ensure the overall experience remained cohesive and user-centered.
“How does this affect my overall finances?
The next question can essentially be translated into two other questions:
“How will my life getting impacted?”
“What is left for me to still enjoy my life and take care of other life responsibility?”
To show people's overall financial picture, I decided that a chart is more effective in telling the story, communicate proportion and relationships than just plain numbers.
-Pie and stacked bar charts were intuitive and simple to understand, but they lacked the ability to effectively convey the flow of money and the relationships between different financial elements.
-Pie and stacked bar charts were intuitive and simple to understand, but they lacked the ability to effectively convey the flow of money and the relationships between different financial elements.
Ultimately, I chose the Sankey flow chart, as it provided a clear, visual representation of the flow of finances, making it easier for users to follow how their income, debt, and savings interacted, and to understand what was left after accounting for the mortgage, whiling making some adjustments and making sure the same design will fit on mobile.
After few rounds of interactions and feedback gathering, I arrived at my final design.
Edge Cases
PHASE - DECISION MAKING
Hopefully by now, users feel empowered by the calculation and ready to select a mortgage. Previous, i have already designed for the mortgage offer modules that we embed elsewhere, it will save a lot of engineering effort if we can reuse the module directly on the page.
However, I encountered a key technical limitation: the inputs for the calculator and the mortgage offer module were not synchronized due to historical engineering decisions. This required users to re-enter their financial details, creating a disconnected experience.
-User Experience Impact: The disjointed flow risked frustrating users, reducing their confidence in the tool and their likelihood of proceeding with our offerings.
- Business Impact: This friction could lead to decreased engagement with the mortgage module, impacting potential revenue from lender partnerships.
- I immediately organized a meeting with the PM and engineering team to communicate the user and business impacts.
- Explored the feasibility of a full rebuild to ensure scalability and long-term usability.
Thanks to the incredible efforts of our engineering team, they were able to find a walk-around via backend integration.
-Remove Redundant Input Fields: Users no longer needed to re-enter their information, significantly improving the flow.
- Streamline User Actions: The process became more seamless, with results updating dynamically based on the calculator inputs.
This solution not only enhanced the user experience but also reinforced the team's commitment to delivering thoughtful and user-centered designs.
-User Experience Impact: The disjointed flow risked frustrating users, reducing their confidence in the tool and their likelihood of proceeding with our offerings.
- Business Impact: This friction could lead to decreased engagement with the mortgage module, impacting potential revenue from lender partnerships.
- I immediately organized a meeting with the PM and engineering team to communicate the user and business impacts.
- Explored the feasibility of a full rebuild to ensure scalability and long-term usability.
Thanks to the incredible efforts of our engineering team, they were able to find a walk-around via backend integration.
-Remove Redundant Input Fields: Users no longer needed to re-enter their information, significantly improving the flow.
- Streamline User Actions: The process became more seamless, with results updating dynamically based on the calculator inputs.
This solution not only enhanced the user experience but also reinforced the team's commitment to delivering thoughtful and user-centered designs.
PHASE - AWARENESS
With the core phases of the calculator complete, I turned my attention to the Awareness phase — the starting point of the user journey. Awareness focuses on how users discover the calculator.
To ensure broad coverage, I designed four main types of upsells, addressing the majority of entry scenarios and guiding users seamlessly into the tool.
To ensure broad coverage, I designed four main types of upsells, addressing the majority of entry scenarios and guiding users seamlessly into the tool.
I identified two key scenarios where the calculator would benefit from more contextual integration:
Within Articles About Home Buying: Embedding the calculator directly into relevant content to provide immediate value.
Search Queries on Yahoo: Ensuring the calculator appears prominently when users search for home-buying-related keywords.
Within Articles About Home Buying: Embedding the calculator directly into relevant content to provide immediate value.
Search Queries on Yahoo: Ensuring the calculator appears prominently when users search for home-buying-related keywords.
This led to the idea of turning the calculator into a widget that could be embedded in contextual scenarios.
User Need: Provides immediate value by fulfilling user needs directly where they are, like in articles or search results.
Business Need: Drives traffic back to the full calculator, amplifying engagement with the mortgage offer module, our primary revenue driver.
User Need: Provides immediate value by fulfilling user needs directly where they are, like in articles or search results.
Business Need: Drives traffic back to the full calculator, amplifying engagement with the mortgage offer module, our primary revenue driver.
PHASE - POST ENGAGEMENT
Lastly, in Post Engagement phase, the important question is: how can we bring people back.
The decision to return and recalculate depends on various factors, like users saving more money or receiving a promotion that increases their income. However, these events are unpredictable.
To address this, I proposed a proactive solution: alerting users when mortgage rates drop.
This provides a clear trigger for users to revisit the calculator, offering value at the right moment while driving re-engagement.
To address this, I proposed a proactive solution: alerting users when mortgage rates drop.
This provides a clear trigger for users to revisit the calculator, offering value at the right moment while driving re-engagement.
Step 1: Rendering the Most Updated Rate
Previously, the rate field refreshed every two months and wasn’t always up-to-date. To enable alerts, the field needed real-time data. After presenting the benefits, our leaders approved integrating Zillow’s mortgage rate API, giving us accurate rates not just for the calculator but across other tools as well.
Step 2: Initiate the Alert
I considered two locations for the alert feature: after the calculation results or near the mortgage rate input field. The final decision was to place it by the input field, as users often test different rates to decide their target range. This placement aligned with user behavior, making it easier for them to set alerts naturally.
Step 3: Set & Get the Alert
I designed the rate alert module and the email template users would receive when their target rate or range was reached, ensuring both were simple and user-friendly.
This streamlined flow not only re-engages users but also provides meaningful value at the right moment.
How We Measure
As the calculator launched in Aug 2024 and the widget launched in Oct 2024, we have seen:
Traffic Gained
~4,000/Mo
(15% from widget)
Affiliate Offer CTR
0.8%
Average Revenue
~$850/Mo
The key was establishing clear metrics early, allowing us to track improvements over time. By analyzing these initial results, we identified areas for optimization, such as improving the visibility of entry points, enhancing SEO performance, and refining the user flow for better engagement.
- Improved SEO: As we continue optimizing content and targeting high-value keywords like "how much house can I afford," we expect organic traffic to grow significantly.
- Increased Market Demand: As the housing market improves, more users will seek out affordability calculators, boosting traffic and engagement.
- Expanded Entry Points: With new opportunities like embedding widgets in articles and search results, more users will discover and use the calculator.
With these strategies in place, we project higher traffic volumes, increased interaction with the mortgage offer module, and greater affiliate revenue over time. This iterative approach ensures that both user experience and business outcomes improve in tandem.
This success framework highlights our ability to create scalable solutions and demonstrates how thoughtful design and strategy drive both immediate results and long-term growth potential.
- Improved SEO: As we continue optimizing content and targeting high-value keywords like "how much house can I afford," we expect organic traffic to grow significantly.
- Increased Market Demand: As the housing market improves, more users will seek out affordability calculators, boosting traffic and engagement.
- Expanded Entry Points: With new opportunities like embedding widgets in articles and search results, more users will discover and use the calculator.
With these strategies in place, we project higher traffic volumes, increased interaction with the mortgage offer module, and greater affiliate revenue over time. This iterative approach ensures that both user experience and business outcomes improve in tandem.
This success framework highlights our ability to create scalable solutions and demonstrates how thoughtful design and strategy drive both immediate results and long-term growth potential.