Research, Strategy and Design for a Loan Calculator Tool
Role
Lead designer
company
Roostify, a white-label B2B mortgage software company
Loan selector tool in a “white label” skin
Context
Roostify was a B2B white-label SaaS company in the mortgage and loan space. They had an existing, stand-alone loan selector tool to serve clients as a sales lead generator. People put in a few pieces of information and the tool would output different loan options that might work for them, and then ask them to enter their contact information.
Defining the problem
Just plop it in, right?
Customers liked the loan selector tool. It was a productive passive tool. The problem was that people would go through the trouble of filling out this short form, find a loan product they liked, and then would be unable to continue on the loan journey. They couldn’t continue to a loan application, share a result, or save the interaction. This was not convenient nor polite for the borrower, and was a missed opportunity for the lender.
When we first considered the problem definition, the solution seemed relatively straightforward:
Include a loan calculator within the loan application
Carry the data through from the public tool into the loan application
But as we examined the applicant’s mental model, landscape, and entire journey, we had to consider the more strategic questions:
Should the loan selector sit within the application at all?
What is the problem our lender clients are trying to solve?
How would the data move securely from outside a login to inside?
foundations
To anchor our design practice at Roostify, we had already established a library of personas within the mortgage space based on our research in the field, interviews, and industry white papers.
By thinking through these persona journeys in regards to this project, we were able to establish a set of guideposts:
What we ARE doing, such as “educating the borrower” and “reassuring the borrower”
What we are NOT doing, such as “locking a rate” or “choosing the borrower’s final product”
Design process
Deciding which scenarios we wanted to cover with this tool was the first order of business. Storyboarding helps to contextualize and envision customer journeys, and is very helpful in blocking out a design. We made several for this project — below is an abridged example of one of our customer journeys.
Navigate horizontally through the frames:
A-ha moment from user testing
We showed customers a journey whereby they would engage with the loan selector tool, “prefer” a loan product, and then proceed to a loan application, with their preference carried with them.
We discovered in user testing that people were worried that when they saw their chosen loan from the loan selector in the Application, they worried they’d locked in a specific loan product prematurely. This didn’t occur to us when we envisioned the flow.
We had to pivot the design to reassure users that the loan they selected did not set anything in stone but only served to educate their loan officer about their preferences.
MVP
We put the loan selection tool at the beginning of the loan application in order to set the stage for the user to continue to fill out their loan application. They could then see what they might be qualified for quickly to get them engaged in the process and to get a ballpark idea before filling out a long form.
The data entered into this tool would be fed into the rest of the form, reassuring the borrower that they were dealing with a modern, professional company. The loan officer would be able to get a head start on the kinds of loans that the customer was interested in, saving them time and making them look smart when they finally talked with the customer.
outcome
The Loan Calculator tool proved very popular with our clients. They felt it provided a more seamless experience with their customers, and loan officers felt like it made them look smart and moved the process along more quickly and smoothly.
Our sales people were excited to sell this new feature, and felt it gave them something to boast about.
Follow-on Project: Loan Selector Tool on Mobile
Step-by-step pattern
The Loan Selector tool was not yet optimized for mobile, and needed a dedicated, mobile-friendly design. We used step-by-step UX pattern to guide users through the process of seeing what kinds of loans and terms they might be eligible for.
Because the mobile version was built in a modular, flexible way, our clients could customize it to fit their processes, removing and rearranging steps. Many of our customers adapted this product, and it became a favorite for Roostify salespeople in landing deals.