Signature Asset Library


In my role as a visual designer at Morningstar, I lead the redesign of 3 core products under the Signature Asset Library (SAL) umbrella:

• Equity Report Page
• Managed Investments Report Page
• Global Market Barometer

 


Equity Report Page
The Equity Signature View page is intended to highlight Morningstar’s editorial perspective through a curated, interactive view geared toward helping the investor identify if the stock is a good investment. Through the restyled and editorially curated view of the stock, Morningstar will surface our proprietary qualitative or quantitative stock valuation.


Contribution: UI/UX Designer
Product and development team is located in Shenzhen.

 


Managed Investments  Report Page
The Morningstar Report for Managed Investments helps investors assess the value of the fund and fund manager using Morningstar’s research, data, and visualizations. Managed Investments Signature Views currently cover Open-end funds, Equity Indexes and Exchange Traded Funds (ETFs).


Contribution: UI/UX Designer
Product and development team is located in Chicago and Mumbi.

 


Global Market Barometer
The Global Markets Barometer is a stylized visual representation of world equity markets.


Contribution: UI/UX Designer
Product and development team is located Chicago.

 


Design Process
Design process on my squads consists of 5 main steps:

1. Feature Introduction
2. UX Design
3. UI Design
4. User Research
5. Review


1. Introduction
The whole team meets to learn about the new feature, its context for why it is needed and to set priority compared to other features. By sprint planning, the Feature Scope Checklist is filled out by design.

At this stage, product Management determines to what extent Accessibility concerns will be addressed. (For example, write in the Acceptance criteria if there will be alt text, etc.) They also note all text that will require translations to other languages. They aim to have them translated before the design process begins. A wiki page exists for any feature that spans many JIRA stories. Before feature picks up, there is a data review meeting to make sure everyone understands the data being introduced in a new feature.


2. UX Design
Data Analysis:
• Verify items in Feature Scope Checklist
• Verify that NULL scenario is handled in the specs
• Illustrate the Information architecture


Sketching/Wireframing:
my UX counterpart and I always consider edge cases on charts and diagrams: What should the data look like when values are very large or very small.


Before marking the UX task as completed,  we go over designs with the rest of the team.


3. UI Design
At this stage I create high fedility mock-up for all the applicable viewports using Sketch app. Spec should include all the applicable visual language elements, such as colors, typography, borders, space

All the breakpoint should be considered and the edge cases must be resolved and illustrated in the spec.

Provide additional specs for different scenarios if needed: for example for different asset types, domicile, languages


Provide specs for layering such as popovers, dialogs
Provide visual assets like icons if needed
Specs should meet Morningstar Design Standards (MDS) requirements (Provide mappings to MDS constants)


4-User Testing
We conduct occasional user tests during the design and development of individual features. I work with product management and business analysis to define scenarios and questions for testing the higher-level system of all the pieces and parts fitted together.


5-Review
Before marking the UI task as completed,  we go over designs again with the rest of the team.