landingpage.png

BlackRock Product Lens

Live Product Lens Page (“Generating Income”) — In Collaboration with Visual Designer Jeff Meininger

PROJECT OVERVIEW

Project Info Designing a new product discovery experience for personal investors on BlackRock.com

Project Label UX/UI Design

Timeline June 2018-October 2018. Two pages were launched in early October, and more pages are coming up.                                                                                    

Role & Responsibilities

  • Eliana Feng — UX/UI Design

  • Jeff Meininger — Visual Design

  • Syril Smith — Product Management

The problem and the solve

Previously on BlackRock.com, there are two ways through which users can look for products. Users can search products in the search bar. However, this is too simple of an information model, as users don’t always know what product(s) they are exactly looking for. Users can also go to product screener, apply different filters (the type of fund, asset class, popular strategies etc.,), and look through an exhaustive list of products (close to 100 products sometimes) within those criterion. However, again, this experience could be overwhelming for investors who don’t always know what product(s) they are looking for exactly.

For users who don’t always know what they are looking for, they usually start with the discovery phrase. Below is a general product purchase journey for personal investors, and the user journey could vary depending on whether users are advised or not advised. During the discovery phrase, knowledgeable investors tend to do their own research on MorningStar, Yahoo Finance, Fidelity etc., while novice investors would usually Google for answers or need assistance on this phrase in general.

Therefore, there is an opportunity for BlackRock to improve the user experience of the product discovery phrase for personal investors. The goal is to help users understand an investment idea and subsequently help them identify and narrow down on a list of products.

Product Purchase Journey

IDEATION and design research

During the ideation phrase, we ran several design workshops and brainstormed together as a team. One of the examples I researched is Airbnb. For instance, Airbnb created a series about New York, and broke it down into three different archetypes: Secretes of Old New York, A Taste of NYC, and Classic NYC. Users are able to dig deeper to read about each archetype and get inspired. Then they are introduced to products (Airbnb Experiences/Homes) associated with each archetype/travel idea. Airbnb is a great example that inspires users who don’t have a specific product in mind, and helps those users discover product(s).

UX Design Research

After looking through examples within the finance industry and laterally across different industries, we ran design workshops to ideate. Below are my ideation sketches.

My Ideation Sketches

Based on the design workshops, we netted out a couple of investment ideas, and user-tested two investment ideas: a time-based concept—trendy funds, and investing by goals.

Testing Mockups

Based on the user testings, it seems that the investment idea—investing by goals resonates with users more and it is relatively easier to start with.

User Testing Feedback Notes

For the investment idea—investing by goals, We decided to start with two most-searched investment goals: generating income and reducing investment risks. Furthermore, the user testings gave us insights which data points users care about the most, which data points to surface.

Wireframes and Site Map

To recap, the concept of this new product discovery experience is to help users understand and get inspired by an investment idea, and subsequently help users narrow down on a list of products and drive them to the CTA “Go to product”. Below is an early iteration of the wireframes, and the initial idea was to keep everything on the same page. Using the expand and collapse functionality, users are able to see all the hero funds and each fund’s details and CTA(s) under each investment goal.

Early iteration of the wireframes

However, the original idea wouldn’t optimize SEO search as H1 header on a page is very important to SEO ranking. Therefore, in the later iteration, I created a separate page for each investment goal. In the below example, users land on “Generating Income” page either coming from search or from the primary navigation on BlackRock.com.

They are able to read about the idea of “Generating Income” and a basic preview of each hero fund. In addition, they are able to dig into each fund by clicking on “fund details” which opens up an overlay including CTAs. On the fund detail overlay, users can easily navigate to other fund detail overlays by using the left panel. On the “Generating Income” page, users are also able to see all other “Generating Income” funds if they aren’t interested in these hero funds, by clicking “See all funds”. Furthermore, if users would like to check out other investment goal(s), they can simply click on “View details” under “Looking for other investment goals.”

Latest iteration of the wireframes

Below is the sitemap explaining how this product discovery experience lives within the existing ecosystem of BlackRock.com.

Site Map


Live Pages

Investment Goal “Generating Income” Landing Page

Fund Preview

Fund Detail

Investing by Goal Landing Page