Background
The goals application was born out of a need to set achievable financial goals. Instead of sitting down and calculating how long it would take to save a specific dollar amount, I wanted to input the goal amount and what I could contribute each month.
I searched for these types of applications online, and they either did too much or didn’t do what I wanted. The closest one to what I wanted was the Bank Rate Mortgage Calculator, but I wanted it to do more.
I wanted a way to perform Accelerated payoff, which allows you to snowball payments into each other once you pay off each one to zero. I couldn’t find any calculators that let me do that at the time.
Objectives
The objectives were simple:
- Be able to calculate how long savings goals would take quickly
- Be able to see how long it would take to pay off a mortgage
- Be able to see how long it would take to pay off a credit card
Like most of the calculators I found, the Bank Rate calculator was a specialist that did one thing well, such as calculating a mortgage payment. I wanted more; I wanted a one-stop shop, so I built it on a weekend.
Challenges
I needed to research how mortgage amortization works because it’s different from how credit card interest is applied. Credit Card interest was another area of uncertainty. How does that get calculated? I needed to figure these equations out before I could start the application.
The savings goals were pretty easy, assuming you had no interest accrual in your savings account.
Another tricky aspect was how to display this information. The Bank Rate calculator does this beautifully, so I drew inspiration from it. Specifically, they visually showed the breakdown of interest and principal payments over the life of a loan in a very easy-to-read manner.
Solutions
I knew I did not want to support every possible mortgage permutation, so I focused on fixed-rate mortgages. I kept the UI simple by having three fields to fill out: loan balance, interest rate, and payment. Those were the only variables I needed to calculate a fixed-type mortgage loan.
Let’s say you have a mortgage of $200,000, a 5% interest rate, and a monthly payment of $1,300. You punch that into the calculator, which gives you a graph representing how long it will take to pay that off, along with some numbers—numbers like the principal and interest paid over the life of the loan.
This result isn’t exciting in and of itself, especially since you may notice that I added “from the first” to the loan card.
It’s nice to know when the calculation starts when goals take months instead of years. Plus, you may have multiple goals, like a Mortgage, Credit Card, and Savings goal.
The “from the first” makes more sense when looking at the “Credit Card 1” result. Once you meet “Savings 2” and “Credit Card 1” goals, you roll them into the mortgage as an extra payment.
Results
The goals application is an excellent blueprint for your more straightforward financial goals. It’s not perfect, nor is it complete, but it’s one of those projects that was a big learning experience for me, especially in terms of UI/UX. For example, how to display numbers so they’re not overwhelming, indicate Accelerated Debt payoff, and other challenges. It’s a good start.
Lessons Learned
- The results of goals should be shown in a sequential order that makes them approachable. A user should be able to look at them and understand how their goal is being met.
- I learned about Accelerated Debt payoff and its benefits for eliminating debt. I also learned about Mortgage Amortization schedules and credit card interest, which accrues daily.
- There is a feature where you can print the results of your payoff, which I’d not done before, but that is a handy feature.