Redesigned mortgage payment calculator

PRoblems: high effort, confusing results

Mortgage calculators are the most used tool for consumers getting ready to buy or refinance a home. Outdated UI, inputs from consumers required high effort, results were confusing and overwhelming. There were 12 calculators that I felt could be consolidated versus making consumers use several different calculators to determine results that are directly related, or have overlapping inputs.

For the purpose of this case study, I’ll only be showing the Mortgage Payment Calculator.

Previous Mortgage Payment Calculator UI

Previous calculator input design

Previous Calculator Results Design

Previous Amortization Schedule

process:


Competitive Analysis
I researched the common calculator UX and UI patterns that would be intuitive for consumers, and to uncover the results that are the most hard-hitting when it comes to a consumer making a decision to move forward with a particular loan or mortgage lender. Visually, I wanted to design a calculator that would stand out among our direct competitors and big banks.

Unmoderated User Testing
Now that I had a benchmark of what needed to change in our new calculators from a standards perspective, I conducted an unmoderated usability test via usertesting.com so I could observe and hear consumer’s pain points and goals. The key qualitative finding from these tests was that above all else consumers wanted to be able to calculate different scenarios quickly and easily in order to determine their best scenario for a home loan. Secondary, consumers wanted to see the amortization of the loan without having to scroll through 30 lines of numbers. The key quantitative finding was that the time on task to receive a result from the main mortgage payment calculator was almost 1:37. If potential home buyers are wanting to see different scenarios, the would be looking at several minutes versus mere seconds other mortgage calculators required.

Wireframes, UX & UI Design
My goal for the UX on these calculators was to make inputs easy, and results front and center. Sliders were considered, but ultimately we opted for number inputs for more precise calculations and less “fat finger” frustration. To speed up the process, common inputs are pre-populated and clear on click, with the help text remaining.

image11.png
image7.png

A key enhancement was replacing the full amortization schedule with a “time travel” amortization snapshot. Users can now select the year for which they wish to see the principal, interest, and remaining balance while also having the option of viewing the complete schedule. In testing, most users did not know what “amortization” meant, so we removed this term and replaced it with the more user-friendly term of “payment schedule.”

image14.png

Presenting the results in a way that’s easy for first time home buyers to understand, while also providing detailed information for the “numbers people” was a tricky balance. We decided to implement a persistent results bar that only shows the payment amount, but can be expanded to see the payment breakdown. All results information displays on the desktop experience, and is persistent on the right side of the viewport, so regardless of how far the user scrolls down to change an input, they will always be able to see the updated results.


Results: users are able to scenario plan swiftly, with ease

After launching the new mortgage payment calculator, the time on task for calculating a payment decreased from 1:37 down to 6 seconds.