Rental Affordability Clarity - Project image

Rental Affordability Clarity

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

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