Ratehub's mortgage calculators are one of the most visited pages on the site. However, the designs were not built responsively and in need of an overhaul.
The goal of the project was to improve completion and conversion rate of the mortgage refinance calculator by creating a new and responsive blueprint for other calculation tools on the website.
I was the main designer for research, UI and UX design for this project. I leveraged some of the atomic components of our existing design system and reinterpreted them to create this calculator design.
Working with PMs, stakeholders, developers and talking to actual users, I started gathering insights to inform my hypothesis.
I held discovery workshops with the CEO, CTO and developers to fully understand the boundaries of the redesign.
One main challenge was that we cannot change the formula of the calculation and as a business requirement, our featured partners need to be displayed prominently.
A few key issues we've identified:
There are no sense of order, required fields and how the fields are interacted.
90% of users did not get an answer to the question they came for.
The whole calculator is not usable on mobile devices.
A clear linear flow would help guide user to complete the calculation and a more deliberate approach to Pick a Rate would streamline decision making and showcase our in house brokerage.
So I recruited 10 users who are in the market for refinance and renewal from UserTesting.com and conducted moderated interviews to validate my hypothesis
Users said they would recommend this calculator
Users finished the calculation
users explicitly said they wanted to see more rates.
users wants to talk to a broker but only 3/10 saw the button.
With the test results, I feel confident that a linear approach can improve completion rate. I proposed a MVP design with that in mind, plus a more prominent rate selector so users can proceed with a broker.
Key features:
Using step indicators and state changes to guide users along
Calculation panel shows how the input results in a calculation, explaining why questions are being asked
Using simpler language to explain renewal and refinance options
Key features:
Pick a Rate is it's own step and users won't be able to skip it
More rates are offered based on user feedback
Users can enter their own if they want to compare their own bank's offer
The prototype tested was A/B tested with 50% of users who visited the page. The result of the test was positive and the redesigned calculator went live to 100% of users.
6%+
Lead conversion rate
15%+
Completion rate
