Most of our crew here at Reaktiv has a background in the financial sector, and at times, that experience and knowledge becomes an asset. Recently, we partnered with the immensely talented folks at Mule Design on a new site build for the Massachusetts Educational Financing Authority (MEFA). We could probably write a few case studies on this project, as there were many unique pieces involved that all came together for one clean, easy-to-use site. But for now, we will focus on one thing: financial calculators.
On their previous site, MEFA had numerous off-site or third-party pieces included to handle different aspects of the site, such as in-person seminars on student loan financing or investor documentation. One big piece they had, which was also handled by a third party, were a few different financial calculators. These calculators were built to help students and parents work through things like expected overall college expenses, loan repayment schedules, and tuition costs. Now, you may be thinking that displaying a few interest rates on a page and telling them to go fetch their Texas Instruments TI-84 would suffice. Or maybe a pre-built Excel spreadsheet would be enough. But that wouldn’t be any fun!
For this particular project, we were faced with building four different calculators, each with their own set of calculation logic, and a few items shared between them. First, we had to break down each individual calculator to its core functions. From there, we could organize how the data was going to be handled. Each calculator was broken into 5 parts:
- static elements (labels and fields)
- dynamic elements (fields for comparing multiple school’s costs)
- user-driven inputs (expected graduation year)
- controlled constants by the folks as MEFA (current interest rates and available payment schedules)
- expected calculation process and results (costs, comparison values, etc)
The first part of the list was easy enough. Make the fields, label them, and style them. The dynamic parts were a bit tricker, but nothing most front-end developers haven’t done many times over. Creating user driven inputs were a matter of making the right variables available to the user, so they didn’t have to guess. Adding some checks for minimum and maximum values, language guiding users to enter the proper values to begin with, and clean error messaging when things go askew. For the controlled variables, creating a small settings page available to administrators with clear instruction and sensible defaults made it so the folks running the site can keep the information current.
Now the fun part. Handling the actual calculations. A few pieces were straight forward arithmetic, just some addition and subtraction, maybe a tiny bit of algebra. But most of it was quite a bit more complicated than that. Stuff that accountants do every day in Excel. For those that may be unaware, Microsoft Excel has some handy built-in functions to handle pieces of this, but that’s Excel. Which is not the web.