Data Viz Explorations of Fund Exposure Breakdowns (WIP) by Eliana Feng.
Project Overview
Project Info Designing a narrative page for BlackRock hero products to help demystify the products for novice investors.
Project Label UX/UI Design
Timeline August 2018 – March 2019
Role & Responsibilities
Eliana Feng — UX/UI Design, Data Visualization
Jeff Meininger — Visual Design
Syril Smith — Product Management
Discover The Problem
70% of the traffic on BlackRock.com comes from personal investors and their number 1 user goal is to find a fund (mutual fund or ETF). Based on the user feedbacks on iPerception, a fair amount of users are overwhelmed by the wealth of information and data points on the current product page (or “tech spec” page, as shown below).
Design Research Within the Same Industry
Within financial industry, all competitors provide similar product experiences. Some organize information better than others, but the problem is the same: as a novice investor, I am overwhelmed by the wealth of information and data points. None of the product experiences is novice investor friendly.
User Personas
Based on a set of pre-created user personas, I made the assumption that novice investors, i.e. Anxious Amateur and Aspiring Achiever are most likely the ones who are overwhelmed by the wealth of information on tech spec page. Based on each person’s respective user challenges, I expect that Anxious Amateur would have problems understanding the financial jargons on the tech spec page, and Aspiring Achiever would have problems relating this fund to their personal objectives based on the fund’s data points.
Analyze the problem
To recap, the current problem is that novice person investors are overwhelmed by the wealth of information and data points. To further analyze what causes the problem and what could be the potential solve for the problem, I conducted a user testing on the current product/”tech spec”page with all three types of user personas: Anxious Amateurs, Aspiring Achievers and Independent Enthusiasts. Below are my user testing notes.
From the user testings, I discovered that for the most part:
Users don’t understand all the financial jargons and data.
Users have trouble relating the financial information to their own objective.
Further DISCOVERY
Design research across different industries
Looking across industries, Apple is a great example that provides both simplified and in-depth product experiences. As shown below, “Display” distills down to a few key data points around the product, and users can toggle to “Tech Specs” to see the full specs. Apple’s web page is a continuous long scroll, and users are able to toggle back and forth between “Display” and “Tech Specs” by using the sticky nav on the top.
Tesla is also a great example that showcases this idea of having both distilled-down and in-depth product experiences. Different from Apple’s example, Tesla’s product page is structured into big card sections. Users are able to access more in-depth product experience by opening an overlay that contains the full specs. Users are also able to navigate through different section by using the sticky left panel or using keyboard arrows/scrolling.
THE INSIGHTS
Based on all the user testings, and design research, we as a team came to the conclusion that we could create a product on-boarding experience which takes the key data points that novice investors care about the most, and create a narrative around them to help demystify the fund for novice investors — hence the name “narrative” page. In phase I, the narrative page would be created for 5 BlackRock hero products selected based on business needs.
The user goals of the narrative page are:
It could help Anxious Amateur understand the key data points about a fund and hence help them build confidence in the product discovery experience.
It could help Aspiring Achiever understand any key data points that they aren’t familiar with, and help them select funds that relate to their financial objectives.
User scenarios and user Journeys
In the meantime, I was brainstorming how narrative page would fit in the existing BlackRock.com ecosystem, and when would users experience narrative or tech spec page first based on different user scenario and user journey. The key is that no matter which product page users experience first, they should be able to switch back and forth between narrative and tech spec page.
Wireframes and Framework
Taking inspirations from Tesla, card UI is more suitable for organizing information of different aspects of a fund into section by section, and users are able to navigate through different section by using the left panel. I also added a down arrow with a bit of teaser text to entice users to engage further and give them a bit of expectation what’s coming next. On the very first card, the fund summary page, knowledgeable investors (Independent Enthusiast) are able to leap forward to tech spec page by using navigational element on the top right “See Full Fund Details.” On the tech spec page, there is also a gateway that takes users back to the narrative page.
Product Ideation
Based on rounds of user testings and discussions with business stakeholders, I created the product concept (the order might change):
Fund summary
Three quick facts about the fund
Exposure breakdown/top holdings
Past performance against benchmark
Hypothetical growth chart
Fund fees
Commentaries from portfolio managers
CTA(s)
How to make a fund more relatable?
As you probably remember from above, one of the main challenges for novice investors is that they cannot extrapolate from the data points alone how this fund relates to them and their financial objectives. Taking inspirations from the practice of user experience design itself, I came up with the idea of creating a “user persona” for a fund. As shown below, the idea is to take three quick facts about a fund, and rephrase them from the perspective of user needs: "[this fund] is designed for investors looking for…”
How to make fund fees more transparent?
Looking across companies within financial industry, fund fees are expressed in a similar way: net/gross expense ratios and maybe throwing a long paragraph of explanation in an info box which most people don’t bother to read (see below). As a result, the questions remain: what are gross/net expense ratios? what am I paying for?…the list goes on. Rounds of user testings also validated the assumption that users want more transparency in fund fees.
Iteration I
The concept of gross/net expense ratios is hard to grasp without reading a long paragraph of explanations. The challenge here is that how can we better contextualize fees in a way that makes it more comprehensible for the target users — novice investors?
The first attempt below is to derive dollar amounts from expense ratios, as users are much more familiar with fees in the form of dollar amounts. The version on the left is to compare our fund fees with the category average in dollar amounts, and the one on the right is to take it one step further: how much you are saving in dollar amount by investing in our fund as opposed to in the category average.
After conversations with business stakeholders and further research, I realized:
Our fund fees are not always lower than category average, so comparing with category average could make BlackRock funds appear less competitive
Dollar amounts can’t be simply derived from expense ratios…the calculations are actually more complicated than I thought….
Iteration II
After researching further, I found out that the dollar amount is computed based on a couple of assumptions beside expense ratios: estimated average annual return, hypothetical initial investment target holding period. I explored this idea by creating a couple of wireframes. On the left, it shows the estimated total fees. I realized that the total number could be substantial and might again make blackRock funds appear less competitive. Therefore, on the right, I created a version expressing the dollar amount by quarters. In addition, I tried to associate estimated fees with future investment value so that despite the fees might appear substantial, users are informed that they are still getting a decent amount of net investment value back.
After discussions with business stakeholders, PMs, and feedback sessions with other designers, I realized that:
In an effort to make fees more transparent, this idea actually makes it more complicated for the novice investors as it introduces three other variants/user inputs into the equation
The main issue is that the “estimated average annual return” could make it seem that BlackRock is promising/projecting a certain rate of return for the fund
Iteration III
In another effort to try to contextualize expense ratios into dollar amounts, if estimating fees based on projected average annual return seems arbitrary, what if we tie fees to hypothetical growth chart? Hypothetical growth chart is calculated based on past cumulative returns, and it shows how much you would’ve gained today if you have invested in the past. Users are also able to tweak the initial investment value and time period/holding time. An idea came up that perhaps annual fees could be shown alongside the cumulative net worth in a way to tie fees and net worth together as well.
However, based on another round of feedbacks from business stakeholders, I concluded that this approach might not work well either:
Fund fees (expense ratios) are constantly being adjusted by the business moving forward. Therefore, looking at fees in the past would not mean too much for the users
The data in the wireframe are mock data but the business is still worried that the dollar amounts would damage BlackRock’s competitiveness
Iteration IV and V
Because of the complications of contextualizing expense ratios into dollar amounts and users are likely to get the dollar amount information from their financial advisors or brokers when they purchase the fund, I decided to take another approach to make fees more transparent for the users while balancing the business needs.
What would users want to know the most? I made a couple of assumptions. It could be, what are expense ratios? or, what am I paying for?
Based on my assumptions, I created two more concepts. Concept IV is based on the assumption that users would want to know more about expense ratios. It gives a breakdown of every item that comprises net expense ratio and users are able to dig deeper into every item by interacting with the info boxes. Concept V is created assuming that users want to know what they are paying for. In a way concept IV is breaking down in the equation what users are paying for, but concept V puts a new twist to the same message in terms of what benefits BlackRock are providing in return. For example, instead of letting users know that they would be paying a “management fee” in concept IV, concept V would tell users that they are paying for “50 dedicated investment professionals.”
The business side has approved both concepts. I conducted a round of user testings and users verbally responded to both positively:
Response to concept IV: “I never seen a breakdown of expense ratios like this before. This certainly makes things very clear and now I know what I am paying for”
Response to concept V: “I already expect that I would be paying a fee, but this helps me understand what exactly I am paying for”
From observing the user actions, it seems that users don’t understand all the fee items in the equation in concept IV, and therefore, need to take an extra step to know more by interacting with the info boxes. Concept V seems to be a more intuitive story for novice investors to comprehend.
Therefore, we decided to move forward with concept V for the fee section.
HOW TO MAKE EXPOSURE BREAKDOWNS/HOLDINGS MORE INTERESTING AND DIGESTIBLE
This is more of a data visualization challenge: what data sets to focus on, and how to present the data.
From previous user testings with, I learned that users look for exposure breakdowns/top holdings on their early stage of research because these data help them understand more in depth what this fund is about. Therefore, how we present exposure breakdowns/top holdings is crucial to help users understand the characteristics of a fund.
Take one of the hero products, Global Allocation Fund (ticket name: MALOX) as an example. On Global Allocation Fund’s page, it shows two data sets for top holdings and four data sets for exposure breakdowns (see below). This is an incredible amount of data. This is exactly the reason why novice investors are overwhelmed on the tech spec page. All data points are important, but some data points are more important than others.
What The Fund?
The characteristics of a fund would determine what data sets speak to its features the most. Take a look at this one sentence overview of Global Allocation Fund from BlackRock:
Select Data Sets
Clearly the feature of being “global” is what makes Global Allocation Fund stands out among other funds. Therefore, its geography exposure data could help novice investors further understand how “global” it is.
As mentioned above, the geography exposure data is mixed up with asset class breakdowns, such as “North America Equity,” “Emerging Market Fixed Income.” Therefore, I needed to come up with ways to visualize the connections between these two sets of data.
Visualize the Data
Below are different ways that I tried to explore how I can visualize geography exposure and asset class breakdowns: