David Ma - FP Homepage

Financial Planning App

Product Homepage

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 bank drove the investor to this product homepage using one of many channels, such as email marketing, banner ads, or a cross-sell from another product. The bank had already given the investor a brief look into what the product can do for them and the investor wants to learn more. This page communicates to the investor the key value propositions, how the product works, and what the costs are.

Where this project belongs in the product

The Problem

The investor wants to learn more about the product so they can decide if it is the right tool to help them with their financial goals.

My Role

Research
Product strategy
Information architecture
Interaction design
Prototyping
User testing
Visual design
Illustration

The Process

Step 1: Interviewed Investors & Defined the Problem

The PMs and I spoke to potential investors and learned what made a financial advice product attractive to them:

It helped them plan and achieve financial goals.
Was easy and not intimidating to use.
Came with trusted professionals who helped them when needed.
Had reasonable costs and no hidden fees.

Step 2: Defined the Goals of the Solution

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

Help investors understand what the product can do for them.
Help them understand how easy it is to use.
Put the mind of those who are worried about the complexities of investing at ease.
Be transparent about the costs.

Step 3: Analyzed Competitors

I looked at the homepages of competitors to see what they thought were good value propositions for their products. I spoke to investors to get their thoughts on whether the pages resonated with them. The approaches varied from product to product. Some focused heavily on the investment philosophy and others focused on how the product improved an investor's financial life.

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 hero image and a short message summing up the product's value proposition.
Next was information about what this product does and how it helps the investor.
Next was information about the available soft benefits, such as ongoing guidance and support.
Following that was information on how the product works to convey its ease of use.
Lastly, there was pricing information and a call-to-action to use the product.

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

Step 5: Created Wireframes, Collected Feedback, & Tested

I started the page off with a tagline that summed up the things that investors wanted to know about the product - its benefit, trustworthiness, and ease of use. For the "What we can do for you" and "We provide support every step of the way" sections, I worked with the PMs to come up with a set of value propositions to get the investor excited and comfortable about using the product. For the "How it works" section, I summarized the entire financial planning process of the product into 4 key steps to demonstrate how easy it was to use. Lastly, I emphasized the transparency of the fees in the "What it costs" section because investors were concerned about hidden fees when using financial products.

What I Learned
I collected feedback from potential investors and other stakeholders, which were mostly positive. Investors thought the “What we can do for you” was valuable, but it did not do enough to show how the product can improve their lives. The page did make them feel comfortable about using the product knowing that assistance is a click or a phone call away. They also liked knowing what the steps were to creating a financial plan and that the fees were transparent.

Step 6: Iterated on Wireframes and Finalized the Solution

I took the feedback and iterated on the wireframes. The final solution placed more focus on the various financial goals that the product could help an investor with. We tested this with investors and they felt that this was more relatable to them.

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

After wireframes were approved by stakeholders, I created prototypes with increased fidelity by adding some color and establishing proper hierarchy in the presentation but it was not pixel perfect. The PMs and I collected more feedback from stakeholders and iterated on the designs, but this time the focus was 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 Mocks

After validating everything with stakeholders and investors, I created high-fidelity mocks and hired a photographer to take the photo used for the hero image. It was meant to convey how easy it was to "plan your future" from your own living room.