TOOLS - FIGMA, FIGJAM
Team project as a solo designer
Role - Lead Product Designer
Duration - 4 months
OVERVIEW
Dimensional provides investment solutions through wealth model management based on academic research. Tools Model Center is the place where users view all the portfolios including Dimensional wealth models, create their portfolios and compare different portfolios for analyzing data. These analyses could be of various types to emphasize and focus on certain aspects of the portfolio constituents based on the advisors' or clients’ goals. For example: some may just want to highlight region exposure while some may primarily show asset class exposure etc.
1. Understand
THE WHY
Today Dimensional only provides a standard model compare report for users to either view or download the entire report and observe the overall data which takes away the user's ability to convey their own story in a more impactful way. It would be helpful for the user to be able to choose the necessary sections of the reports based on their specific needs and remove the irrelevant exhibits.
The goal of this project is to deliver designs for a reimagined Model Compare where the user will have the flexibility to alter and modify the reports based on their requirements.
AUDIENCE
Internal users -
• Global Client Group (GCG)
• International Solutions Group (ISG)
• Research group
External users -
• Financial advisors
• Individual investors
This feature will most likely release to internal users in the US before broader release.
2. Research
COMPETITIVE ANALYSIS
I started by exploring similar features in some of the competitor websites. It allowed me to take an in-depth look at how others solve the same design problem and provided me a few strategic insights into their functions and flows.
Black Rock
JP Morgan
Vanguard
INSIGHTS
Based on my weekly discussions with the products owners and other stakeholders, I found out additional requirements:
• Customized view is needed for live report on the website and downloaded PDF report
• It's going to be a one time setting. So, next time user comes back, they will be sent back to the default view (where all the sections are pre-selected).
• Some of the sections and exhibits will be mandatory in the report so, they won't be available to customize
• Although there are a lot of other features for customizations in the competitor websites like creating a cover page, the project's scope didn't involve such a broad consideration
Since the customizations are just surrounding the comparative analysis report with no additional content, it made sense to display it in a modal window and not consume a whole separate page as other companies did.
3. Ideate
I started doing some brainstorming -
1. Toggle for sections and checkboxes for exhibits within the section
2. Checkboxes for both sections and exhibits
The second option was similar to how Black Rock showcases but they have the full screen at their disposal whereas I am trying to accommodate it in a modal window. So, it made more sense to go with the first option that is a combination of toggles and checkboxes. If one needs to hide a section in the report, then they can switch off the toggle which will simply collapse that section and saves the screen real estate.
In order to provide more flexibility to the users, I included the gripper icon next to sections and exhibits so that users can reorder them as per their preference.
Next, my focus went to these "Order Models" that appears as the first thing on Compare Models screen. Each of these models are flexible to rearrange. This basically alters the order of these models in the whole report. This feature serves as a part of customization. Therefore, we decided to move it in the modal window.
The mockup has now reached a stage where all the requirements have been incorporated but the modal window started to look overwhelming. Modal windows are supposed to have brief and focussed content.
This made me explore different ways to simplify the modal window to keep content concise. FinalIy, I came up with an option where the sections and lenses could be split into two columns. So, user can view one section's exhibits at a time. This significantly removed a lot of technical concerns and at the same time became quite easy on the eyes.
I also added the "Reset" link so, that users can always go back to the default view when needed.
Some of the other things that went into consideration were -
We decided to keep a filter icon for this modal window because it would essentially be filtering the entire report as per user's preference. As far as the placement of the filter icon is concerned, we landed on placing it at the very top in the header. Since the header is the sticky component, scrolling through the report users will have access to this action at all times.
Now, I was at a stage where I had to brush up my designs and make other UI adjustments. I mocked up a few versions so it looks elegant and intuitive when user interacts with it.
4. Prototype
5. Reflection
