I designed and developed a detailed, web-based calculator for clients to calculate their pension tax.

Client

Barnett Waddhingham LLP

Project dates

December 2016 – January 2017

Context

I was hired by Barnett Waddingham LLP for a two-month period to work on a detailed web-based pension tax calculator that clients could use by themselves, without the assistance of financial advisors.

The calculator would be formatted as a multi-page form, based on an Excel model that was provided.

The aim of having a working and financially accurate calculator was for mathematically-minded executives to see exactly how the division of their pension pots would be taxed.

As the calculator was designed to target high earners, who were in a specific income bracket, it was likely that most who used the calculator would be interested in hiring an advisor to give them advice on plans. This meant that a secondary use of the calculator was as a marketing tool.

Design decisions

I researched similar pension tax calculators that existed. Notable ones included a website provided by the UK Government, and a mobile application made by a rival company. Both of these were very simple, and didn’t provide the level of detail we were hoping to achieve.

By comparing the pros and cons of these calculators, we arrived at a list of requirements for the calculator.

The project requirements were that:

  • It had to work in any browser (supporting IE9+).
  • It had to be device-responsive. Users were recommended to use larger screens, but it had to be fully functional on all devices.
  • All calculations had to be performed on the client’s device; no data could be transferred to or from their machine, in order to maintain security of sensitive financial data.
  • The calculator had to work in-browser, without any additional software being installed.
  • The calculator had to store a user’s progress and any data they had entered only using the browser.

Additionally, I was recommended to use a framework called Knockout.js that makes use of the MVVM design pattern. Members of the team were familiar with Knckout.js and were building other applications for Barnett Waddingham using it, so by using it for the calculator, it meant the project could be maintained after I left.

The style had to match the company’s corporate branding guidelines. To accomplish this, I used a set of style guidelines (which in practice meant linking in a set of device-responsive CSS stylesheets), that I had created two years prior, during a summer internship at Barnett Waddingham.

Deliverables

I accomplished all the requirements outlined above.

Requirement #3 was accomplished by only using frontend JavaScript, and not off-loading calculations to a backend server. Requirement #4 was accomplished by making use of the HTML localstorage object that was introduced in HTML5.

Below are some screenshots of the various pages of the pension tax calculator.

The calculator was broken up into three sections. Firstly, it had an introductory section, which outlined the terms of use.

Terms of use

Secondly was the input section, which progressively asked questions about e.g. the user’s current salary, expected salary growth, expected retirement age, and amount of savings in different pension pots. The calculator dynamically adjusted the questions as required based on different parameters. It also was fully validated and had tooltips where appropriate.

Input navigation

Tooltips

Form validation

The third section displayed the results using sets of charts and graphs, and provided a ‘quick settings’ panel to quickly change parameters on-the-fly, to see how those changes affected the results.

Annual Allowance results with quick settings

Annual Allowance results with quick settings

Results with charts and tables

Lifetime Allowance results with quick settings

Thanks for reading!