Morningstar ByAllAccounts

Reimagining Morningstar’s Account Aggregation Tool

Role — Senior Designer
Other Team Members — 2 Product Managers, Development Squad

IN SUMMARY

Morningstar acquired ByAllAccounts in 2014, developing an investor-facing account aggregation tool. Over the years, the tool evolved, but by 2021, the team had been without a designer for some time. Leadership then launched a two-year strategic plan for a full backend and frontend redesign.

That’s where I came in! I transitioned from the Data & Research design team to the ByAllAccounts team. I focused on leading the strategic redesign of the account linking tool and summary page. I’ll walk through three key projects—Morningstar Connect (the flagship account linking tool), Account Summary Component, and Net Worth Component—that work well individually but truly shine together.

Account Summary Component

This feature is sold as a companion to Morningstar Connect, which I dive into in the next section. The goal is to display all a clients accounts so they can get a full picture of their net worth — and for advisors to see what their clients asset/liability breakdown is.

I used the original summary component as a jumping off point for the new designs understanding that I had to showcase a few important requirements.

OLD Account Summary Component

Users should be able to see their accounts grouped by type and institution.
Users should be able to act on any errors.
Users should be able to see account details with the balance and name being the most important.

We then identified 3 main parts to the whole component system: view by account type, view by institution, account details modal.

I went through several iterations, using our design system as a guide but exploring different containers and layouts. To see how I implemented the system, check out MDS’s list component, my starting point for this design. I also worked with two great PMs who gave me detailed requirements for each part of the component. This enabled me to jump right into higher fidelity iterations —

It took two months to design all the mobile and responsive web modal screens (90+) —including Morningstar Connect screens in the next section below. About a month in, we held dev reviews that led to revisions and a spike for clarifying error messages—a common challenge in account aggregation.

During this time, I honed my skills in live design workshops with my two PMs and, occasionally, the lead developer. We moved fast, embraced all ideas, and iterated in real time. I’d mock up changes on the spot, we’d debate, adjust, and I’d leave a note to refine the design before development. My use of auto-layout in Figma helped us stay agile and efficient. The product leadership team eventually decided just to develop the responsive web version. Here is the final version —

If you want to play around with this design yourself. Check out the Figma prototype: https://tinyurl.com/y58c5v2w

Morningstar Connect

Ever used an app or website to link your bank accounts to a tool that could show you your net worth? The app is probably using Plaid, Yodlee, or Morningstar ByAllAccounts — the top account aggregators in the business. Morningstar is best known for its investment data. Morningstar Connect is the name for our account linking tool, which connects seamlessly to the account summary tool (but isn’t required to run it).

OLD Morningstar Connect

Here’s how we got from the above older Connect to what exists live today — When I joined the team, product had mapped out the requirements for the tool based on the new backend structure and the existing experience.

The task wasn’t just to do a 1:1 redesign but also clarify any confusing points of the existing workflow. This mapping helped in that process.

I designed mobile first, the most common way to aggregate accounts on the market. Then scale up to responsive web with a modal. Most customers will implement this as a companion to their own website so it could be integrated anywhere.

Here’s a small segment of the comments and screens during iterations

My Morningstar Connect Redesign

I created a simple structure for each page, knowing Morningstar’s design system would help keep consistency among the pages.

At this time I also researched competitors workflows, error messages, and security best practices.

Here’s a clickable prototype of the final simple “happy” path

This project was very impactful on sales — we currently have roughly 40 external enterprises using it. If you are a Morningstar.com Premium subscriber you can see this work in action in their Portfolio tool. If you have an RIA, they probably use this tool as well!

Data note: The enterprises only count as the parent company, often they have thousands of clients underneath them.

Net Worth Charts Component

Also sold as companion to the both components above, Net Worth Trends project was designed with multiple uses in mind. The Morningstar designed version would be in the minority with the API being used the most. I worked on requirements and recommendations for both. If a customer purchases only the API, they get detailed design guidance that I created with my project manager.

Here’s a summary of the requirement’s

My first task was to research charts across the industry. The basic design was mirrored off leading financial visualization websites and Morningstar.com stock trackers.

Users should be able to see their data in set time increments. Adjustable in the API delivery based on Advisors practice.
Users should be able to pin point a data point by clicking on the graph.
Users should be able to glance at the chart and know how they are doing.

Based on my research, I began iteration on a simple line chart visualization.

I brought this presentation to our crit team and ultimately moved forward with the gradient style.

There were lots of long conversations around color for the time periods of negative net worth. We landed on red for negative when using green for positive net worth with the ability for advisors to opt out of red/green colors and just have one color for both negative and positive. Many advisors want their clients to have a long-term investing horizon and the red can give more fear than needed.

Reflecting on my time with ByAllAccounts

After launching the three core tools, I made minor updates based on feedback — the launch was very successful. I also worked on bespoke investor portals, and advisor tools. I was able to do some really interesting work acting like an agency design, going to mid-size financial firms and selling them on our tools by mocking up my designs in their fonts and colors. My work doing this even helped secure a huge enterprise sale, and contributed to my promotion to Senior Designer during my tenure.