Web app for OnlineLoans.com that allows users to compare funding options for business, personal, home, and auto.
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 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.
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.
