The Challenge

As a newcomer to the industry, we had to quickly build out the features that would hit the minimum requirements of what a visitor would expect from an online brokerage site. This included having some sort of tool that would allow the visitor to compare loan options based on their funding needs and qualifying factors. In addition, having such a tool would increase a visitor's time onsite, which is an important metric for the purposes of SEO rankings.

I looked at various competitors and how they accomplished this task, and we all agreed that Nerdwallet's tool was one of the better examples. I was tasked with modeling our tool based on theirs, but I made some adjustments based on what I understood a user would want to see in such a tool. I proceeded to build the tool from scratch in Javascript using Node + React.

The Approach

The first thing I had to think about was how I would design a better loan comparison tool. I applied design thinking to determine what features would meet the needs of a user. Since the company's primary value is integrity, we wanted to provide as much information to the user without being overwhelming. We also wanted the information to be as pertinent as possible to their particular situation without it being misleading. I felt it best to not only provide an input for the funding amount that is being requested (as most of the tools did) but to also provide the actual range of costs that they could expect, no matter how ugly those numbers might be. Then if they wanted to see more detailed information, they could click to expand and see additional requirements, notes, and pros & cons.

The Solution

This was an interesting challenge because I had to make use of various methods that I had used in the past, but hadn't yet brought together in a single application. I utilized Airtable for the backend, which provides an interface for non-technical users to add and update the loan option data that is feeding to the app. I used CSS Grid for the basic layout of the tool, where I was able to have each area of the grid serve as a container for a modular component. I made use of Flexbox for the individual loan items and React for the filtering and sorting actions. Lastly, I integrated Bootstrap and Sass to handle all of the styling.

Below are the four comparison tools: personal, home, auto, and business.

Home loans include a filter for both fixed and variable rate mortgages.
Unlike the others, the business funding tool has multiple types of funding options so I included an additional column for the funding type.
No items found.

Are you ready? 👉 Let’s work together!

Contact Me