Morningstar US Wealth Platform — UI Framework Committee
Contributing to design principles and standards of a brand new product for Morningstar
Role — Committee Member & Design Lead
Other Team Members — 2 Other Design Lead Commitee Members, Design Director
IN SUMMARY
In 2023, Morningstar decided to merge its two flagship advisor products, Morningstar Office and Morningstar Managed Portfolios—referred to here as USWP. Given the complexity of creating a unified product for two similar but distinct user bases, my design director saw the need for a dedicated standards team to ensure consistency across 6+ squads.
She selected me, as the design lead for two squads, along with two other design leads from different teams. Together, we operated like a committee, tackling a backlog of design tasks, proposing solutions, and voting on the best path forward. We collaborated with front-end developers, business leads, and other stakeholders as needed. Once decisions were made, we disseminated the new standards across teams, ensuring a cohesive design system—even with multiple teams working under tight deadlines.
Framework Foundation: Space and Page Layout
Every Morningstar product has their own flavor, the design teams goal is to strive for consistency without sacrificing the needs of the different type of users.
Morningstar Managed Portfolios
Broker Dealer Advisors, Large Firms, Admins
Morningstar Office
RIAs, Small Mom&Pop Advisor Firms
These two products had different visual languages. I started by collecting and reviewing different pages styles and other Morningstar products. This is one example of our large Figma file full of screen-grabs and comments.
We noted a few common space concerns —
We created just a few (ha!) mock ups of different layouts...these were quick iterations aimed at getting lots of ideas on the board. We often met in workshops to iterate on the fly as a group. In this project I led the iteration charge, working off layouts already created by designers on the team.
Let’s look at a few up close
Example A
Example B
As you can see from the zoomed out Figma artboard, we tried these margins on several already designed pages. Our goal was to find margins that worked well for all the layouts. As showcased in Example A, the data table pages looked more grounded due to the horizonal lines in the grid which have a stabilizing effect. they are parallel to the ground, which we interpret as a physical anchor. Just like the horizon line on a landscape, horizontal lines in a composition can prevent the design from feeling "floating" or unstable.
In Example B, the form set, a very common workflow component to the new product, felt unbalanced when anchored. We set forth to do a few more iterations. While doing those, I asked myself questions like:
What parts of the product will it be important for the user to see the most data?
Do forms always have to be aligned to the page header?
How have our other teams solved this?
How often are our advisors switching from product to product in the Morningstar ecosystem?
No system is perfect. We debated as a trio, brought our iterations to weekly critique, and researched with other teams. Almost every size margin had a reason we could go for it, and reasons we shouldn’t. We circled back to the original mandate (something I always recommend when you can’t find the perfect solution).
The goal is to create a consistent, cohesive system that teams can rely on. We want the product to feel like it was designed by one person, not three hundred—ensuring a seamless experience across every interaction.
USWP Guidelines for Page Layout
24px margins for all data table centric pages, workflows, and pretty much everything else
120px margins for article and multi-media pages
