David Ma - FP Questionnaire

Financial Planning App

Goal Questionnaire

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 evaluated the product and decided to give it a try. They elected to create a financial plan for retirement. The goal questionnaire collects information about the investor's financial goal, such as their desired retirement income, desired retirement age, and other risk questions to personalize a financial plan for them.

Where this project belongs in the product

The Problem

For the Bank
The bank needs to collect information about the investor for legal compliance, but doing it manually is too time consuming and expensive for the firm.

For the Investor
The investor wants to provide the necessary information for the product to provide a financial plan, but the complexity of the questions being asked makes this an unpleasant experience for them.

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 showed potential investors the set of questions stakeholders wanted to ask in the product. The investors found the questionnaire tedious and unpleasant because of the wordiness and complexity of the questions. They said they would not complete the questionnaire if it was in the product.

Step 2: Defined the Goals of the Solution

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

Help the banks collect answers to risk and suitability questions for legal compliance.
Simplify wordy questions and make them digestible for the investor.

Step 3: Analyzed Competitors

I looked at competitors to see how they collected information from investors. I spoke to investors to get their feedback and they thought competitors did a good job making the questions simple to understand and easy to answer. Most of the competitors focused on one question at a time, but a few products asked multiple questions on one page. Investors that I spoke to favored the former approach.

Step 4: Brainstormed Solutions & Collected Feedback

Without a solution, a sample question would have looked like this:

"How much do you plan to save monthly towards this goal? Include deposits and employer contributions into employer-sponsored retirement plans, IRAs and taxable investment accounts. Research estimates you may need to save 15% of your current pre-tax monthly income. For you, that is $1,500 per month."

This was hard for an investor to read, especially when there were 10-15 questions. I explored ways to make them more digestible by breaking up the copy. Here's what I decided:

The page opened with the core question to give the investor a general idea of what was being asked at a quick glance.
Next was additional information or clarification to help the investor further understand the question.
Following that was the response field, where the investor provided their answer.
Lastly, there were tips to help investors answer difficult questions.

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

Step 5: Created Wireframes, Collected Feedback, & Tested

I inserted the copy from the questions and strategically broke them up into the components this framework established, which provided the necessary hierarchy to make them easier to read. I worked with stakeholders to reformat some of their questions so that they all fit into this framework.

What I Learned
I ran tests with potential investors and learned that by breaking up the copy into smaller components, it was easier for the investor to digest. However, 25% of desktop testers ignored the "Need help?" box because they didn't see it due to it being far from where their eyes were focused. Mobile testers still felt that the sea of text was a little overwhelming on the smaller screen.

Step 6: Brainstormed New Solutions

I went back to the drawing board and thought about how to solve these two main issues. I decided to not show the help text on the initial load of the page and investors had to select a link to reveal it. This solution de-cluttered the page for mobile investors and provided a link closer to where the eyes of desktop investors were focused.

Step 7: Iterated on Wireframes and Finalized the Solution

For the new solution, mobile investors would tap on the "Help me decide" link to display a modal containing the help text. Desktop investors would click on the "Help me decide" link to display a tooltip next to the response field containing the help text. This solution tested well with investors.

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

After stakeholders approved the wireframes, I created prototypes with increased fidelity. I conducted user testing via interview sessions and unmoderated tests to validate the designs and its usability.

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