Financial Planning App

Income Projection Page


Glossary of Terms

The Bank - the entity licensing this product to service their customers
The Investor - the customer of the bank and end user of this product

About this Project

The investor completed the questionnaire and is excited to find out if they are on track to reach their financial goals. This feature projects how much income the investor can have during retirement. The investor can play around with their inputs, such as their retirement age and savings rate, and see how it affects their retirement income in real-time.

Where this project belongs in the product

The Problem

For the Investor
The investor wants to know if they will be able to save enough money to last through retirement.

For Compliance
Compliance is concerned about litigation resulting from being too promissory with the projections because the stock market is unpredictable and our projections can be far off.

My Role

  • Research

  • Product strategy

  • Information architecture

  • Interaction design

  • Prototyping

  • User testing

  • Visual design

The Process

Step 1: Interviewed Investors & Defined the Problem

The PMs and I spoke to investors and they wanted to know how much money they'll have in retirement and how much they needed to save to reach their goals.

Step 2: Met with Compliance & Defined the Problem

The PMs and I spoke to compliance and learned that we could not provide investors a singular dollar amount unless we clearly stated what the probability was of achieving that amount. They said that without stating a probability, it implied certainty and left the firm vulnerable to litigation if the product did not deliver on its projection.

Step 3: Defined the Goals of the Solution

The PMs and I defined a set of goals that the income projection had to achieve:

  • Meet compliance requirements by not appearing too precise and promissory with projections.

  • Help the investor understand how much money they can have during retirement in a clear and simple way.

  • Provide guidance to help the investor reach their goals if they were initially not on track to do so.

Step 4: Analyzed Competitors

I looked at competitors to see how they projected investment returns and got feedback from investors. I was inspired by the way competitors used projection graphs to show how an investor's portfolio can grow over time and the metrics they used to benchmark the portfolios.

Step 5: Brainstormed Solutions & Collected Feedback

I worked with the PMs to brainstorm on the key components of the solution. Here's what we decided:

  1. The page opened with a snapshot of the investor's projected income during retirement to grab their attention - the "aha" moment.

  2. Next were suggestions on how the investor can increase their income and the accompanying mechanisms to do so, in case they were disappointed with the results of the projection.

  3. Lastly, there was a projection showing how the investor's account balance will grow from today until the day they retire.

I created sketches of the layout and collected feedback from stakeholders.

Step 6: Created Wireframes, Collected Feedback, & Tested

Compliance wanted us to present the income projection in a way that was complex and confusing to the investor. In an attempt to balance the needs of compliance and the investor, we explored displaying what the probability was of the investor achieving their target retirement income. They were considered to be in good standing if they had at least an 80% chance of achieving their target income. In this example, the investor only had a 64% chance of achieving their target so they were not on track. I borrowed ideas from the competitor analysis to show the growth of the investor's portfolio over time.

What I Learned
The PMs and I tested this wireframe with investors and encountered some issues.

  • Many did not understand probabilities and what it meant for their income.

  • Many misinterpreted the probability as the percentage of the target amount they were on track for.

  • Some misinterpreted the 80% target probability indicator as the percentage of their current income that they had to save.

  • Some argued that an 80% probability was not high enough

Step 7: Iterated on Wireframes and Finalized the Solution

I iterated on the wireframes based on the feedback. We tried many different variations before we came up with a concept that performed well in our tests. For the final solution, we displayed two key dollar amounts on a bar graph. One was the amount they can achieve using conservative estimates and the other was using optimistic estimates. Per compliance requirements, we emphasized the conservative estimate. Behind the scenes, the conservative estimate was the amount the investor had an 80% chance of achieving, but we did not reveal the probability to the investor because it confused them. This solution met both the needs of the investor and compliance.

Step 8: Created Prototypes, Collected Feedback, Tested, & Iterated

After wireframes were approved by stakeholders, I created prototypes with increased fidelity. The PMs and I collected more feedback from stakeholders and iterated on the designs, with the focus on usability and visual design. I conducted user testing to validate the designs and its usability via interview sessions and unmoderated tests.

Step 9: Created High-Fidelity Deliverables

After validating everything with stakeholders and investors, I prepared deliverables for engineering, which included:

  • Pixel-perfect mocks

  • Interactive prototype

  • User-flow diagram

  • Accessibility considerations (such as wording for aria tags, alt tags, keyboard navigation)

  • Instructions on the usage of animation and motion

High-Fidelity Responsive Views on Mobile

High-Fidelity Responsive Views on Desktop

See more case studies for this product