About
Understanding and reimagining complex financial data to redesign the transaction league tables page for S&P's Capital IQ Pro.
What are Transaction League Tables?
A League Table is a list of institutions (mostly financial) that highlights their rankings in the deal-making industry.
My Responsibilities
Tools Used
Figma, Heap Analytics, Highcharts
Timeline
2 weeks
Team
UX Designer(me), UX Manager, Product Manager, Product Owner
The Goal
Isolate the important filters and represent the legacy page graphically after creating relevant user personas and job stories that would validate the design decisions.
Fig 1.1 Before Vs After
I conducted a competitive analysis with competitor data available at hand to better understand the landscape of the product.
We considered Investment Banking, Private Equity, and Corporate Development Officer personas to come up with relevant job stories.
Fig 1.2 Investment Banking Persona
As a team, we devised a process in place for implementing data visualization to ensure that it meets the needs of the user. This was done to ensure that data visualization is used only when it adds real value to the product.
Fig 1.3 Data Viz Process
I created job stories for TLT users after talking to the product owner, project managers and junior investment bankers in the company who use the page.
All design decisions were made to satisfy the needs of the user in accordance with the job stories.
"As an investment banker, I want to understand the transaction or transaction sub-types where my bank is best performing, so that I can highlight this information to potential clients.”
Fig 1.4 Initial Sankey Chart
Fig 1.5 Final Sankey Chart
This Sankey chart shows the different divisions of tree structure in the filters and their co-relation. The widths of the branches correspond to the value of each branch. On hover, a tooltip shows the contribution of the corresponding branch to the mapped industry.
This enables investment bankers to drill into industries with a transaction type to view which banks are best perfoming, so that they can validate their bank’s value to potential clients".
In the 1st version, I tried a monochrome grey with blue highlights for the selected path to streamline the design. Badges are used here to display text to improve accessibility.
In the 2nd version, I used the graph colors from the design system to make it more in tune with the other visuals.
In the final version , I used minimal colors & lower saturations to allow the user to focus on the data.
“As an investment banker, I want the ability to drill into geographies and/or industries with a transaction type to view which banks are best performing, so that I validate my bank’s value to potential clients".
Fig 1.6 Industrial Segments
A map filter filters the page based on the geographical region selected. This improves the interactivity of the page and satisfies the requirement from the job story.
This view allows the user to look at trends of key data points within League Tables over time or on a map, including number of deals, transaction value, fees generated, in data visualizations, so that it’s quicker to understand success between investment banks in a specific view.
Accessibility Check
Fig 1.7 Industrial Segments
This chart shows the financial flow of the product to various industrial segments. This allows the investor to choose a high-performing industry while looking at growth trends, so that the potential investment may result in a profit.
Here, a bar graph is used to show the percentages as this provides a comprehensive view of the data at a glance.
Accessibility Check
“As a Private Equity professional, I want to view the top investment banks and the industries they advise on, so that I can pitch mergers, acquisitions, or equity offerings for my portfolio companies."
Fig 1.8 Top Banks
The graph above shows the performance and no of deals made in each category in the selected time period. It helps the user to understand the volatility of the market by identifying the fluctuations in deal value/number over a specified time period.
After receiving user feedback, I changed the initial designs to use actual values instead of percentages for looking at Deal Values for the top ten competitors. A table grid view is available on the toggle. The improved version is more precise and easier to understand compared to the first where the user has to scan the entire width of the page to understand the data visualization.
Accessibility Check
I remodeled the filters in a 'Z -pattern' (left to right) to promote ease of scanning by collaborating with the product owner after informed decision-making sessions after analyzing the page using the heap analytics tool. A 3 column layout was used to reduce the length of the filter box while still maintaining the same number of filters.
We analyzed the page using the heap analytics tool to measure the efficiency compared to the previous version. The following were the results:
You can reach me at
