Retirement Calculator


an image of a retirement calculator site for Self Financial

Overview


Project Brief

Working in a team of three developers, we were tasked with working collaboratively to create a retirement calculator which gives the user an estimate of when they can comfortably retire and how much they will have. This calculator was made using vanilla JavaScript and incorporated test driven development.

About Self Financial

Self Financial is a successful fintech business dedicated to helping thousands of people begin their financial journey with a Credit Builder Account.

Problem Statement

Self, Inc's users are primarily people who do not have a credit history and are looking to take charge of their financial future. The challenge was to create a user friendly and intuitive retirement calculator in which these users can input their income, savings, and other financial data in order to decide if they are saving enough money for their targeted retirement age.

Market Research


The team met weekly to discuss how best to approach the problem. In order to have the most accurate calculations, we consulted with a professional CPA to have them review our calculations. This data was then translated into JavaScript format using functions. The calculator contains the essential factors of age, annual income, income increase, savings, expenditure, assets, desired retirement age.

Competitor Analysis

With a variety of choices for retirement calculators, Self Financial wanted to stand out with ease of use, design, and accurate calculations. Competitive market analysis proved that these retirement calculators were often well developed, but could also be overwhelming with the amount of inputs needed by the user. Since the target audience of Self's calculator included millenials and older Gen Zers, our team opted to keep the inputs at a minimum. It was also important to include tooltips so that the user could hover over the text in order to understand what each input meant. Below are the top financial calculators on the market.

  • Fidelity
  • Personal Capital
  • Van Guard
  • Charles Schwab

User Research


User Profiles

user avatar

Em


Age: 32
Occupation: Software Developer

Em is a single millenial software developer who has been working fulltime for 10 years. She hasn't done much planning for retirement but used Self to help build her credit. She wanted to use Self to plan for her retirement because she trusted the company after having such a great user experience using their credit builder.

user avatar

Federico


Age: 38
Occupation: Project Manager

Federico is a gay married father of two who has been thinking more about his retirement in order to provide for his family in the future. He did a few Google searches for retirement calculators but couldn't find an enjoyable and easy user experience and he grew frustrated.

Prototyping


In order to understand what the users needed to input, we created a LucidChart which helped to understand the customer inputs and how they would work together within the JavaScript calculations. The LucidChart helped to visually map out how the inputs would coordinate with the calculations, chart, and user suggestions. Mockups were drawn up based on Self, Inc's style guide.

chart diagramming how the inputs will be decided
wireframe

Final Design


an animated gif showcasing how the calculator works

Add On Features


Reflecting on this project, our group made some informed decisions based upon our timeline and decided that if we had more time, we would have added the following features:

  • Incorporate sliders into code to match the Self Inc site
  • Spend more time on the chart in order to make it more dynamic
  • Design for mobile first