Rental Affordability Calculator - Project image

Rental Affordability Calculator

  • UI Designer, Front-end Developer
    • HTML
    • CSS
    • JS
    • Umbraco

Solution

Built a decision-support tool helping renters discover properties within their financial range.


Impact

  • Reduced friction in the property discovery funnel
  • Increased click‑through to listings within realistic price ranges
  • Improved decision confidence during early‑stage property exploration

Context

Many prospective renters browse property listings without knowing whether a unit fits their financial situation.

This often leads to:

  • Decision fatigue
  • Time spent exploring unrealistic options
  • Early abandonment during the browsing process

The core user question driving this project was:

“Can I afford this place without overextending myself?”


The Problem

Users were required to mentally calculate affordability while browsing listings.

Without clear guidance:

  • Users second‑guessed pricing
  • Click behaviour lacked financial context
  • Exploration frequently shifted toward units outside sustainable budgets

The Goal

Provide a simple way for renters to translate their income into a realistic rental price range and immediately explore listings within that range.


Strategy

The experience focused on reducing cognitive load and converting abstract financial calculations into actionable property discovery.

Key design principles:

  • Minimize form complexity
  • Provide immediate feedback
  • Convert results directly into property exploration

Solution

A rental affordability calculator was built as a dedicated page within the website.

Instead of returning a static affordability number, the calculator converts income into a filtered list of viable properties.

Core Functionality:

  • Accepts monthly income as input
  • Applies the industry‑standard 30% affordability rule
  • Calculates a recommended maximum rent
  • Dynamically filters property listings within that range

This transforms financial insight into immediate property exploration.


Technical Implementation

  • HTML, CSS, JavaScript
  • Client-side affordability calculations
  • Integrated within Umbraco CMS
  • Dynamic filtering of property listings based on calculated rent threshold

All calculations occur client‑side to deliver instant feedback without additional server requests.


My Contribution

  • UX concept development
  • Interaction design for the calculator interface
  • Front-end implementation
  • Integration with property listing data