Financial Planning App

Investment Recommendation 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 finalized their financial plan and proceeds to the investment recommendation to learn about the portfolio and services that will help them reach their goals. The job of this page is to convince the investor that this product is right for them. The investor can invest in this portfolio by opening an investment account.

Where this project belongs in the product

The Problem

For the Investor
The investor wants to know what the recommended investment portfolio is and if the product is right for them.

For Compliance
Compliance wants to ensure that we meet all legal requirements when recommending an investment.

For the Bank
The bank wants to get investors to open accounts but they want to reduce liability by not explicitly tying the portfolio to the projected amount the investor can achieve.

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 it would take for them to become a customer.

  • They must trust the product. They need to know that it is backed by the bank they trust.

  • The portfolio must be personalized for them.

  • There needs to be people who can help them navigate through the complexities of investing from now until they reach their financial goal.

  • They did not want to put in a lot of work to manage the investment on an ongoing basis. They already have busy lives and they do not want to add another thing to worry about.

Step 2: Met with Compliance & Defined the Problem

The PMs and I met with compliance and learned that there were a lot of legal requirements that we had to satisfy when recommending a portfolio.

  • The holdings and fees had to be readily available to the investor.

  • The investment objective and how the portfolio is aligned with the investor's risk had to be clear.

Step 3: Met with the Bank & Defined the Problem

The PMs and I met with stakeholders from the bank and learned that even though they support a goal-based product that uses income projections, they did not want to explicitly tell investors that the projections reflect how the recommended portfolio will perform.

Step 4: Defined the Goals of the Solution

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

  • Show the recommended portfolio but do not explicitly say it will help the investor achieve their financial goals.

  • Show how the portfolio is personalized for the investor.

  • Help the investor understand that the investment would not be a burden for them to manage and that people are available to help them when needed.

  • All disclosures required by compliance are available to the investor.

Step 5: Analyzed Competitors

I looked at competitors to see how they approached selling a portfolio and asked investors for feedback. I was inspired by the way competitors visualized the asset allocation and the metrics used to benchmark the recommended investments.

Step 6: Brainstormed Solutions

I worked with the PMs to brainstorm on the key components of the solution, focusing on a way to work around the limitations imposed by the bank. Here's what we decided:

  1. The page opened with the asset allocation as the vehicle that can help the investor achieve their goal. We kept the portfolio out of this section to meet the requirements of the bank.

  2. Next was an introduction of the portfolio that contained the allocation mentioned above.

  3. Next were the attributes of the portfolio, such as its risk and fund fees, to sell the investor on the investment.

  4. Following that was information about the available soft services, like support and guidance to make the investor feel comfortable about using the service.

  5. Lastly, there was pricing information and a call-to-action to open an account.

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

Step 7: Created Wireframes, Collected Feedback, & Tested

I worked with the PMs to explore ways to visually convey the asset allocation, the risk, and the fund fees. I borrowed many of the common techniques found in other investment products for the display of the asset allocation. Lastly, I worked with compliance on the disclosures for this page, ensuring that they fit into the mental model that we established. I honestly thought that the page was getting too busy at this point, but stakeholders wanted to add more value, so let's see what the testers thought.

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

  • The bank was satisfied with our approach to separating the income projection from the portfolio. It also tested well with investors.

  • Investors said the value propositions that mattered to them the most, such as ongoing monitoring and 24-hour guidance, were buried at the bottom.

  • Engineers said the meter that showed the investor's risk would be difficult to build.

  • The expense ratios confused investors because they did not understand the difference between that and the advisory fee.

  • Investors wanted to know what would happen after selecting "Open an account".

Step 8: Brainstormed New Ideas

I took the feedback and worked with the PMs on new ideas. I thought the first solution was too bloated and the testers confirmed that it tried to do too much. For the final solution, we decided to remove the portfolio expense ratio. Instead of having two separate sections of value propositions, I combined them into one so that everything appeared higher up on the page. I also followed that with a call-to-action because it seemed like the investors we tested felt that they got what they needed to make a decision at this point. Next came the detailed risk information, which a small percentage of investors found useful, but it was required by compliance. I wrapped up the page with a second call-to-action and a preview on what the next step was.

Step 9: Iterated on Wireframes and Finalized the Solution

I iterated on the wireframes and I thought the final outcome was more focused. Some stakeholders still preferred to add more value by showing more information about the portfolio, but the investors confirmed that less was more.

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

Step 11: 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