David Ma - FP Dashboard

Financial Planning App

Goals Dashboard

Overview

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 opened their account and invested in the recommended portfolio. The goals dashboard provides the investor the ability to monitor their investment and its progress toward reaching their financial goals.

Where this project belongs in the product

The Problem

The investor wants to monitor their investment to ensure that it is on track to reach their goal.

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 learned what they would want to achieve when they return to the product after opening an investment account.

They wanted to know what their account balance was and if they were on track to reach their goal. For financial applications, they said they typically would log in for just a quick minute when they have a break in their day.
They wanted to know the progress of pending transactions, such as cash transfers.
They wanted to deposit/withdraw money money and create new financial goals.

Step 2: Defined the Goals of the Solution

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

Inform investors of their account balances and progress toward their goals. It had to be simple and intuitive enough so that the investor can understand it at a quick glance.
Give investors a motive to come back and check on their goals periodically, for the benefit of the business.
Show a recent history of account activity.
Provide a path to all commonly used actions, such as money transfer and creating a new goal.

Step 3: Analyzed Competitors

I looked at competitors to see what their approaches were but it was a challenge because you had to be a paying customer to see their dashboards. I found screenshots and asked potential investors for their feedback. The approaches varied from product to product but it was informative to learn what competitors thought was valuable on a dashboard.

Step 4: Brainstormed Solutions

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

The page opened with a snapshot of the investor's total account balances to serve as a summary of their investments.
Next were call-to-actions for transferring money and creating new goals.
Following that was a summary of each of their goals, which included a snapshot of its progress and some key metrics.
Lastly, there was a log of notifications and recent activity.

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

Step 5: Created Wireframes, Collected Feedback, & Tested

I worked with the PMs and explored a few ways to display the investor's goal status. I wanted to show something dynamic that would make investors excited about logging in periodically. It was important to get investors engaged because it would increase the likelihood of them creating more goals and depositing more money. We initially explored using a progress bar to show how far an investor was away from reaching their goal. The thought behind this was that an investor would be more engaged and excited about their financial goal if they can see a progress bar gradually fill up as time went by. It was accompanied by a title that stated if they were on pace to reach their goal or not. I utilized industry standard approaches for the rest of the page.

What We Learned
The PMs and I collected feedback from all the stakeholders and tested it with potential investors.

This concept initially tested well with investors. People were generally excited about a large visual showing how much progress they’ve made toward their goal.
Other stakeholders had two main issues with this idea. First, it would be weird seeing a progress bar move to the left if the stock market went down. When we brought up this scenario to users, they confirmed that it would be awkward and they would lose trust in a progress bar that can go in either direction.
Secondly, other stakeholders said that this progress bar would not be interesting to look at if the investor had a long time horizon because a bulk of progress would be made toward their later year.

Step 6: Iterated on Wireframes and Finalized the Solution

I took the feedback and iterated on the wireframes. For the final solution, we showed a projection of how much the investor was on track for, displayed as a percentage of their target. This was well understood by investors. A key advantage of this design was the status was not binary. For example, an investor who was only a couple of percentages short of their target could clearly see that they were close and not panic. Other products in the market who used a more binary approach could have caused a panic for someone in the same situation.

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

After stakeholders approved the wireframes, 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, UI design, and visual design. I conducted user testing to validate the designs and its usability via interview sessions and unmoderated tests.

Step 8: Created High-Fidelity Deliverables

After validating everything with stakeholders and users, 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