Loan Calculator Web App

Upstart

The Upstart loan calculator is an interactive credit card refinancing widget that helps customers figure out the time it’ll take them to pay off a credit card compared to refinancing it. This app is implemented into blogs and landing pages to help Upstart rank higher in debt calculation-related search terms. It also builds trust for the brand by assisting customers in determining if refinancing was right for them.

The Problem

Upstart was having difficulty ranking for the popular search term “loan calculator.” There was an existing loan calculator on the Upstart website, but it was not searchable, user-friendly, or responsive.

The Goals

Building the loan calculator will accomplish several objectives, including helping increase SEO ranking for search terms related to loan calculators, increase link-backs from partner blogs and resources when they implement the app into their content, raise brand awareness in helping people get out of debt, and collect interesting data on how customers calculate their debt.

Requirements

The loan calculator web app must be responsive and can be implemented on various web platforms. The UI should be intuitive to use, and the calculated results are compelling and informative. The content and messaging of the product should be informative and helpful. Calculator components can be customized to partners’ brand colors.

The Design Process

Research

For research, we interviewed 9 existing customers who had checked loan rates at Upstart. They were between the age of 25 to 67 and had various financial backgrounds. Their level of education ranged from high school to higher education. They were looking for a loan primarily to help them refinance their debt. We created 2 personas from the research.

We also did competitive research on types of loan calculators on the market, user experience, and visual aesthetics.

User Personas


Based on the data we’ve gathered from the user interviews, we created 2 personas for this project. Mike represented customers from the younger age group who are beginning to learn about finances, and Rhonda is our more mature customer who is already looking for a smarter way to save money.

Wireframes

Mobile

We began designing the calculator for mobile devices because laying out all the features on a small screen is the first challenge. Google also takes mobile ranking very seriously; hence mobile design can’t be an afterthought.

700px Breakpoint

Designing for tablets and also blogs with narrow body columns.

Desktop

The calculator will have its own landing page for marketing campaigns.

Calculator Interactions

Final Designs

Calculator on Mobile

700px Wide Blog

Partner’s Blog with Co-branding

Campaign Landing Page