Can Zhao


Morningstar Cloud





10 weeks

My role

Interaction design, UX Research, Information Architecture, Digital Mock up


Sketch, Ominigraffle, InVision, Flinto


Project Context



At Schema Design, I was assigned to work with Morningstar, Inc., a global investment research and investment management firm headquartered in Chicago. As a design firm, our mission was to provide UX strategies at a wireframe fidelity so that our clients could make incremental changes in the right direction. With 1 graphic designer and 1 creative director at Schema, I worked with Morningstar's in-house designers (through travels and remotely) from 10/2018 to 12/2018.


Morningstar Direct/Office Cloud is a web-based portfolio and investment analysis management software for financial professionals. The software was transformed from a native application to a web application that brings many new challenges.


User Challenge


According to our clients, Cloud does not have an intuitive and predictable IA pattern that orients their users to (a) where they are, (b) what they can do, and (c) how they can accomplish their jobs with confidence. Morningstar also does not want to change their naming system considering the learning curve of their previous users.

In summary, how can we improve the navigational experience of Morningstar Cloud with least learning curve for new users and previous users?


Problem Setting


In order to map the scope of this project, we travelled to Chicago multiple times. In total, we organized 3 activities to understand the users and the product.


Understanding the Users


In a word, Morningstar Cloud has 4 types of target users and each of them have slightly different workflows when using the product.


Target User Types

  • Asset Managers
  • Wealth Management (Home Office Researchers)
  • Wealth Management (Client-facing Advisors)
  • Independent Advisors

Activity 1

Activity 1.png

We asked stakeholders that represent different types of users to ask “how can I“ questions when using the products, and group them according to themes of “Planning, Analysis, Monitoring, Sharing, Operations.“


Activity 2

Activity 2.png

We had focus group sessions with stakeholders and asked them to describe a typical workflow for each of the user type. Below is an example of Wealth Management (Home Office Researchers).


Based on the input from Activity 1 and Activity 2, I mapped the current user flow for 4 user types.


Key Insights

  • When market events happen, Asset Managers, Home Office Researchers, and Independent Advisors need to take ad hoc actions.
  • Asset Managers, Home Office Researchers and Independent Advisors should stay tuned and find appropriate funds purchased from Asset Managers.
  • A colaborative relationship occurs between the Client-facing Advisors and the Home Office Researchers in Wealth Management Firms.
  • Independent Advisors' workflows overlap with Client-facing Advisors, with additional workflows such as billing.
  • For Independent Advisors and Client-facing Advisors, their actions are driven by the performance of client accounts.

Understanding the Product


Activity 3

I led meetings with Morningstar’s product managers, and diagrammed their current object relations. After that our team helped designers at Morningstar regroup the object types, and clarified definitions of each object type.


Object Relations of Morningstar Cloud.

Red-colored objects are groups of primary objects that are targets of object management. Green-colored objects are currently not in the system yet in Morningstar’s future strategies.

Object Types of Morningstar Direct/Office Cloud.

Blue-shaded areas are the scope we agreed to work on considering the limited budget.


key takeaways

  • Asset Managers, Home Office Researchers, Client Facing Advisors use Direct Cloud, while Independent Advisors use Office Cloud that includes billing and goals.
  • While in Office Cloud, objects are all grouped under "Clients," in Direct Cloud, client accounts are grouped under "Portfolio Objects" that include a variety of objects.
  • Portfolio Objects vary according to different user types.
  • The navigation and management of the primary objects are of the top priority, while the location of the secondary objects should be considered in this project.

Usability Research


I asked the stakeholders that represent different user types to accomplish the typical user flows we mapped together and video-recorded the process. I listened to the stakeholders’ feedback and conducted a heuristic evaluation of Morningstar Cloud based on users interactions in the videos.

In the realm of navigation and object management, 3 major problems occur in the current product:

The action button takes the user away from their current workspace.

The action button takes the user away from their current workspace.

Disconnected Actions and Modules

The connections between available actions and modules are disorganized.

"Grid View" is not informing what the user's current targeting object is.

Transitioning Burden

Currently, the user has to command click and open a new tab on the browser in order to transition from Portfolio Analysis to Investment Analysis.

Extra Steps to Manage Objects

After generating a report, the user has to go find it by opening the menu and leaving their current workspace to head to the Reports page. The user has to repeat several steps in order to go back to the original analysis page.

To summarize, the major user pain point of Morningstar Cloud is:

How do I go back to the previous page????

Low-fi Prototypes




After Activity 1 and Activity 2, we ideated some concepts as potential solutions:


However, after reviewing the concepts, our clients commented that though creative, “none of the concepts are implementable” on their current system. That was when we went back to conduct Activity 3 and Usability Research in order to understand the product better. After the usability Research, I sketched a low-fi prototype considering one common scenarios:

  • An Independent Advisor/Client-facing Advisor receives a call from a client, Tim Meyers, and the client wants to know how he’s impacted by recent news regarding a security breach at Facebook.


Concept Features

  • Surface the object management in a foldable left-hand sidebar.

  • Clicking different object types would open new tabs that are accessible any time at the highest level.

  • Layout (data charts) are scrollable components under each tab. A navigation of these components could be either sub-tabs under the object tabs, or a floating anchor menu.


Clients Feedback

  • They would like to move forward with objects tabs as a solution to not being able to transition between Portfolio Analysis and Investment Analysis.
  • They’d like further explore the design of the left hand navigation. This should include management of primary and secondary objects, Research Portal, Markets, ect.
  • Left-Hand nav should only have 2 levels max to drill in. No need to go to the account level from the navigation because it could get really messy really quickly.
  • Layout components cannot not be stacked in a scrollable web with an anchor menu since certain data charts are grouped for certain purposes (e.g. evaluating risk factors). They should be grouped components under sub-tabs .

Mid-fi Prototype


I synthesized the feedback and iterated on the mid-design several times. And finally, I made digital mock-ups with Flinto.

Customizable Foldable Side-bar

Each icon on the side-bar represents a Primary Object (Clients, Lists, Portfolios, Research Portal, Market Portal).
I add a dividing line to indicate the difference between nested objects and portals. The user should be able to customize this side-bar according to their roles.

Transition between Clients' Portfolios and Investment Analysis

When an object on the tab is clicked, an new tab is open on the right hand. The user can switch between different object tabs with just a click.
The user can manage the objects (renaming, sharing) in the left-hand side-bar anytime.

Filter Objects by Searching and Selecting Year Range

The object list will be filtered accordingly when a user types in the search bar and selects a year range.
Switch between Grid Analysis and Data Layout

When a user clicks a fund on the Grid panel, a data layout panael would appear on the right hand.
Morningstar's curated groupings of layout live in the Page Layout as a secondary navigation (Performance, Equitity Attribution, etc.)
If the user intends to focus on Grid Analysis, they can either click the expand button on "Grid" or the exit button on "Page Layout."

Final Thoughts


The clients spoke highly of this interaction model, considering my design as “clean and intuitive.“ In my yearly review, my boss specific mentioned that the concepts I developed for Morningstar were “compelling and addressed specific user goals.“

However, considering the limited budget and the nature of design firm, I was only able to deliver the design at the mid-fidelity to our clients without further exploring the interactions. In the next-step, the clients would conduct user testing with prototypes based on my design.

Without seeing the results of the user testing, I could already see a lot of interaction problems that need to be articulated. For example:

What happens when a user opens 10+ object tabs? Would it be difficult for the user to transition back to any of the open tabs? With that many tabs open, would the user click the objects that are already open?

The object management is sophisticated enough for 1000+ objects. What are the item types that the user use to sort different types of objects?

What happens when there are 1000+ child objects under a parent? How can a user browse quantities of child objects and parent objects?