Mortgage Calculator

mortgage calculator chat mortgage calculator results


An effort was launched for a redesign of USAA’s mortgage calculator which was visually unappealing and outdated. The product owners required that the new calculator guide the user by first asking a set of questions, taking the answers and producing a result.

I performed site audits of other mortgage calculators from companies like Zillow, Quicken Loans, Nerdwallet and Lending Tree. With this research I created a comparative analysis that helped me develop an overall needs assessment.

Defining Requirements
After presenting the above assessment to product managers I was able to gather some specific site objectives:

  • Easy to use
  • Should not include taxes, insurance or VA specific fields
  • Include a pre-qualification CTA
  • Include links to other loan options
  • Must be accessible for non-sighted users

My Solution
I chose to use a brand-related "chat" component for the initial questionnaire section. The chat component is an interactive flow that resembles a texting interface similar to iPhones. A question is presented to the user in a chat bubble. When the user enters an answer, the bubble then moves upward on the screen revealing the next question. The vertical movement helps to make the user feel as if tasks are being accomplished. After the final question a results screen fades in showing the calculated result and editable fields that allow users to tweak numbers.

My Part

  • UX Research
  • UI Design
  • Development using plain javascript and CSS transitions
  • Responsive Design