Core Portfolio Builder

Role: Design Lead   |  iShares by BlackRock

Build a diversified portfolio

How might we create an experience which not only provides enough information for an investor to make a financial decision, but also educates on the differences between portfolio compositions

... but a Core portfolio builder already exists at BlackRock

True. However the tool is very limited and the company has rebranded since then. It is not also device responsive, nor is it accessible- so we saw this as a great opportunity to improve the experience while fully rebranding at the same time.

To uncover potential improvement areas, we ran some usability testing on the previous tool.

What works

  • Gamified: the users love the interactivity of the slider and the response from the tool.
  • Has the right amount of data for an investor to explore more, ultimately leading to a decision.

Opportunities

  • How might we arganize the data in a way that is not scattered through the tool?
  • Reduce redundancy: The same tickers appear in multiple positions.
  • Clear next steps: How might we strategically position the next steps the is more discoverable for the user?
Old Core Builder tool
Old Core Builder Tool on iShares

Let's set some goals

What do we want to accomplish by redesigning this tool?

For the user

  • Increase engagement within the tool.
  • Meet the user where they are: Organize the data in a way that makes sense and is discoverable.
  • Don't make the tool worse.

For the business

  • Increase engagement to the All in One allocation.
  • Increase clicks to the tool.
  • Increase engagement with next steps.

For my team

  • Improve worklow and delivery process.
  • Improve accessibility spec, testing and delivery.
  • Increase team visibility within the firm.

Learning the business perspective

How might we learn more about what the business needs are? In order to find out, we conducted some internal interviews. Here is what we found:

Image of old core builder tool with all in one section highlighted
  • The business would like to give equal attention to the "All in One Allocation" Products.
  • We don't expect an end investor to invest in an entire portfolio.
  • If we can get users to explore one ETF that is a win.
  • We would like users to engage with the next steps.

It's not obvious there is more data than Expense Ratio
-Brad Zucker

"Core ETF Mix" means nothing to the end investor
-Sophia Maxstadt

How we envision the customer journey

How would a user get to this tool? We considered multiple entry points, from the pages within the site and social media.

There are many paths a user can take with lots of disclaimers along the way, so mapping out that journey would be helpful to inform designs.

Core Builder User journey map
User journey map for the tool with decision points
Core Builder User journey map
User journey map from multiple paths and entry points

Finding the user perspective

We put together a few strategies to learn more about how the users feel and behave with similar tools.

Strategy: talk to users directly

We asked users about their portfolio research and building habits as well as their expectations, and what resources they regularly use.

Key insights

  • Users usually have multiple tabs or tools open when doing their research.
  • Brand credibility plays a large role.
  • Don't put information behind a paywall.
  • They love data visualizations.

Strategy: Usability testing

We had a lot of ideas to put in front of users to put in front of users. Their feedback and insights really informed the next iterations and MVP

Prototype: Content organization

Hypothesis: We believe the content organization causes users to miss some key actions. How might we present all the data and content in a way that is easily discoverable and not redundant?

Business view: The data displayed is all required by L&C. How can we serve it to users in a way that is intentional and valuable to their research?

Reduce redundancy: Instances of fund names appear once, which is in the table and can be editable. The tickers appear in the pie chart as well, so the tickers only appear in two places rather than 3, and fund names appear once.
Data organization: Move all data higher on the page and in proximity, allowing the user to consume all the data in a central location.
Data organization alternate. Allows the user to consume data in a linear order rather than vertical, which users preferred as well on mobile. This was ultimately the winning pattern.

Prototype: Add context to the Slider

Hypothesis: We believe users need more information about what the slider represents. Since this is the main driver of the tool, how might we provide context to the slider so the user can recognize the differences between investment styles?

Business view: The slider represents the user investment style- from very conservative to very aggressive. How do we make sure users are aware of this?

image of first slider iteration
First slider iteration: stocks and bonds allocation adjust according to slider selection. Users felt this wasn't enough information
image of second slider iteration
Second slider iteration: stocks and bonds allocation adjust according to slider selection along with a description of the style. Users felt this was too disconnected.
image of third slider iteration
Third iteration: stocks and bonds allocation adjust according to slider selection along with a description of the style. Users were missing the CTA Button
image of third slider iteration
Fourth iteration: Large stocks and bonds allocation adjust within the banner in proximity while investment style context is where all the interactivity begins. This was the preferred solution by users.

Prototype: All in One allocation offering

Hypothesis: We believe users are not valuing the all in One allocation offering as much as the portfolio. How might we bring equal attention to the All in One offering?

Business view: The all in one allocation product is an alternative to the portfolio which requires less maintenance but higher in cost.

image of mid page banner solution
Test A: Mid page banner. Although this was positioned lower on the page, it had more visual weight. Users were still missing this and the business did not approve.
image of all in one banner tab solution
Test B: A second banner tab. Users found this more discoverable and were not getting the impression that this was less important. The business approved
image of first all in one tab iteration
All in one tab visuals test A: Linear chart separating allocations. Users liked this one a lot but preferred a donut chart. Design team preferred this one as well
image of first all in one tab iteration
All in one tab visuals test B: Donut separating allocations. This was the preferred solution for users and the business.

Takeaways / Recommended MVP

image of mobile tabs solution
Mobile version of tabs solution

Tabs make it easier to navigate with less scrolling up and down
- Usertesting.com user

image of mobile tabs solution
Mobile version of slider context solution

Seems like the information is taylored if I move the slider back and forth
- Usertesting.com user

image of mobile all in one allocation solution
Mobile version of All in One Allocation solution

I take it as an alternative to building my own
- Usertesting.com user

image of mobile all in one allocation solution
Clear next step for user to invest.

5/6 users found the next step action more discoverable than the previous version

What we learned overall

Design Principles

  • Maintain interactivity and tool response
  • Clear next steps
  • Optimized for mobile
  • Enough context that doesn't disrupt

Challenges

  • Tow the fine line of not giving financial advice
  • Maintaining simplicity with data
  • Differentiating this tool from all the other ones within the iShares tool suite

As a global team

  • Regular design-dev sessions keeps the product team on the same page
  • Test accessibility early
  • Collaboration across UX initiatives contributes to firmwide adoption

Getting the word out

We wanted to share this tool with the world, starting with our offices. I created a promo video using Figma transitions and uploaded it to all major BlackRock offices in the US amd EMEA. (SF, NY, ATL, LDN, BUD)

Business impact

How we measured success of the Core Builder once it was launched to the public.

Stats

July 2023 - Jan 2024 stats, compared to the 2022 year

  • +37% Daily page visits
  • 6% How to Buy conversion, previous =.57%
  • +3% All in One engagement

Raising the bar

This was the first tool on BlackRock.com within the iShares digital ecosystem built with Accessibility as part of the process from start to finish.

Video of the Core Builder tool being presented as an example of high standard accessible tool at BlackRock's "Digital Week"

This is one of the best in industry, in terms of data visualization
- Irfan Ali, W3C Invited Expert, Digital Accessibility Program Manager at BlackRock

Contributing to the Design System

Our Design System was still in its early phases, and there was no documentation for a slider. Since the Core Builder relied heavily on a slider for its core functionality, this was a perfect oppurtunity to identify all other use cases and contribute to the Design System.

Slider documentation for the Design System
Slider documentation for the Design System

Processes and Technical Stuff

Duration: 10 sprints

Spec delivery

I worked with devs to create a framework for delivering specs, including defining acceptance criteria for usability and accessibilty. Figma's "Dev mode" also helped in improving this process.

Mid-fi:

  • Specify pattern, component or solution
  • Define anatomy, or link to Design System spec if available
  • Define usability acceptance criteria, including accessibility guidelines. Link to W3C pattern librarywhen possible.

Hi-fi:

  • Pixel perfect positioning
  • Responsive behavior and breakpoints
Design spec for the data table
Design spec for the data table

Structure

  • 1 Designer (SF)
  • One Project Manager (SF)
  • Four Developers (BUD)
  • Leadership (SF, BUD, LDN)

Workflow

  • Agile workflow
  • Lo/mid/hi-fi iterations
  • Designers QA (if none available)
  • Demo to stakeholders
  • Retrospective

Tools

  • Figma
  • Usertesting.com

Management & organization

  • JIRA
  • Airtable
  • Miro