Portfolio Management Platform
the problem
FactSet’s Portfolio Management Platform (PMP) is a tool that allows institutional asset managers (Fidelity, Vanguard, T. Rowe, etc..) to monitor portfolios and simulate adding or changing positions in securities of a portfolio. PMP was built piecemeal over several years with UX involvement starting late it its life. The UI ended up convoluted while not adhering to best practices. As such, usability became a problem as features related to trading, compliance, and execution were added. Additionally, the UI was built in the previous design system and felt dated with low contrast and no accounting for accessibility.
The simulation UI is a hodgepodge of unaligned buttons, form fields, and data points.
A series of modals was the only workflow support for simulation -> trading.
The breakdown
The product team engaged with UX to create a new version of the PMP using our Fusion design system. Fusion has a new visual theme, focuses on progressive disclosure, and allows for true responsiveness. Through our story mapping, we found several pain points as well.
There was no real layer of communication between trade simulation, compliance checks, and trade execution.
There were discoverability problems with in-table editing features. Users didn’t know they could take action on in-table data.
Constant use of modal dialogs is how most workflows were handled disconnecting the user from their workflow.
The entry form for trade simulation was crowded and not extensible for future features.
Several story maps were made to refine our understanding of the user and their journey through the trade simulation workflow.
Early ideas were put together in Figma as playground to explore approaches to the PM’s workflow.
The solution
After our story mapping session, a team of three (myself, another IX designer, and a Visual designer), collaboratively worked in Figma to come up with improvements to the UI. We gave the product an extra layer of summary for high-level monitoring at any screen size, utilized panels for trade simulation entry, and separated the compliance workflow into a separate activity.
We started off with a similar but refreshed approach for the monitor/simulation table. We added a panel for the user to add/edit positions to the portfolio. We also added small infographics to show the overall portfolio impact from the order.
A key change was moving the workflow into the table and leveraging our new layout system with panels. A basket of orders, compliance checks, and post-submission progress tracking of orders were all mocked up.
results
After successfully integrating some changes from product and stakeholders, we had built enough to take out to the street. Between our prototype and a beta build we tested several clients to great success. As with any testing, we found we missed several workflows and small improvements for day-to-day use. As the product now stands, users can only simulate one trade for one portfolio at a time, so there is complexity that must be addressed when adding in multi-portfolio simulation. We made several changes before I handed the project over to another designer to manage the process of research and future iterations:
We wanted to cut down on our panels as they were creating the same problem as before, so we integrated more of the workflow into the table.
Users responded well to the order ticket, but wanted to track trade sentiment as well.
We needed to add more to our table to allow for trade editing and status communication.
The main view had an updated section with monitoring infographics for the portfolio. We also included a new, standardized, news feed that users could dismiss in our new layout system. Simulation was now accessed via a toggle button.
A change for simulation was adding in some controls for users add/clear/undo/redo edits to their portfolio. We also added in some higher level controls like the portfolios, benchmark, and table status indicators.
We also included quick actions for users to remove a new simulated stock or undo a change to an existing stock.
The ticket was updated and we replaced the infographic with trade sentiment input fields.
Instead of a panels for orders summary and compliance checks, we created a ‘simulation summary’ view where the users can see a summary of everything while also only viewing the simulated trades and their compliance checks.