Case Study

Massachusetts Educational Financing Authority

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.

Enter: JavaScript.

The team at MEFA was kind enough to give us their accounting spreadsheets, the ones that they use internally to calculate this data for individuals. Digging into the mathematical functions in the spreadsheets gave me a place to start rebuilding this functionality inside of JavaScript, using both the user-provided variables and the MEFA-generated constants we mentioned above. Now add a dash of input sanitation, a smidge of error checking, and stir it into the clean and functional design from Mule, and voíla! you’ve got a gorgeous calculation tool that will provide MEFA’s visitors with the information they need to guide them through their educational future.

Have an interesting and challenging project like this one? We'd love the opportunity to chat with you about it.