Back to archive

Mortgage Simulator: Calculate Your Loan Installment

EL PAIS · Dec 30, 2022

tool
stack: [Svelte, d3js]

Context

This calculator was produced to help readers estimate mortgage installments under changing Euribor scenarios. I worked on interaction logic and visual outputs so users could test realistic combinations quickly and understand the impact of rate variation on monthly payments.

My role

  • Frontend development
  • Design
  • Data analysis

I implemented the interaction logic and visual behavior so users could simulate realistic mortgage scenarios and immediately see how Euribor variation affects monthly payments.

Data and methodology

The project was developed in coordination with the economics desk and in close collaboration with Jose A. Álvarez, aligning financial requirements with a clear product flow.

As one of my first Svelte projects, the implementation focused on reactive state updates for instant recalculation and transparent input-output behavior.

Key decisions

  • We prioritized a very simple interface so readers could enter personal values quickly without financial or technical friction.
  • The interaction model was intentionally direct: clear inputs, immediate results, and minimal secondary controls.
  • Design and logic were optimized for readability and trust, avoiding unnecessary complexity in both copy and UI behavior.

Result

The final tool offered a fast, understandable way to estimate mortgage costs at a time of strong Euribor increases, making a complex financial topic actionable for readers.

Impact and learnings

  • The project validated Svelte as a strong fit for newsroom calculators thanks to reactive behavior and clean component structure.
  • It also helped establish an internal pattern for building lightweight, maintainable utility products with clear editorial value.

Links