Skybonds, a financial analytical platform
Skybonds is a platform for financial analytics and portfolio management of securities, used within the Sovcombank corporation. I worked on the Skybonds interface from November 2020 to February 2023 and proposed many great solutions.
Process of work:
Problem #1
Scattered information structure
The information on securities in Skybonds was presented in a disorganized manner. The bond widget and page lacked a clear structure and consisted of a long page with dozens of parameters. It was necessary to constantly scroll through the page to find the required data.
UX research
How clients use Skybonds?
The parameters, scattered throughout the system, needed to be meaningfully grouped and structured. To achieve this, it was necessary to understand how exactly users utilize the system.
Skybonds is a closed platform with a limited number of clients, allowing for personal interviews with users.
The results of in-depth interviews with 10 users were recorded in the form of protocols, which served as the basis for creating a summary of the key findings.
The interviews revealed 3 types of system users, which were documented in the form of personas.
Sections and data were aligned with the personas. It turned out that the service structure could be distributed into logical sections that corresponded to the personas and their roles.
Before the redesign, the bond page occupied 40,000 pixels in height.
The new page is divided into two parts. On the left, there is static information about the bond issuance. On the right, there are market data.
UX research showed that users can be categorized based on their roles. Traders require market data, while accountants need transaction reports. The bond parameters are divided into tabs according to these roles.
Problem #2
Poor readability of data tables
The foundation of Skybonds is complex financial tables. Before the redesign, improper alignment was used in the tables, resulting in unnecessary spacing between columns.
As a result of the redesign, the compactness of the tables increased several times.
Work was carried out for 6 months on a new design language for financial tables. Unique tables were developed specifically for Skybonds, which have an incredible density of data, maintain readability in any conditions, and allow for the display of all types of information.
The findings are presented in the article “Design of Complex Tables” and published in the American journal UX Collective.
UX research
What list reads faster?
In the Skybonds system, lists were aligned based on the width of the block, which resulted in gaps between columns. It was suggested to align both columns to the left edge. However, what if this leads to a decrease in readability?
It was decided to conduct UX research and compare the reading speed of the lists. Two variants were compared: the current Variant A and the proposed Variant B.
Methodology
– 7 tasks to find a value in the list
– 20 non-system users as respondents
– 2 groups of respondents, each group given one of the variants
– Response time for each question is measured
– Average test completion time is calculated for each group
The measurement results were averaged.
The research showed that Variant B differs from Variant A by only 0.58%, which is within the margin of error. The design was accepted for implementation.
Problem #3
Low clarity of charts
Market charts are one of the central functions of Skybonds. Before the redesign, reading the charts in the system was incredibly difficult. Lines intersected with labels and created visual clutter. The grid had excessive contrast, making it challenging to read the lines. The yield axis was placed on the left, which is atypical for financial charts.
UX research
Competitive analysis of financial charts
To address the task of redesigning the charts, a competitive analysis was conducted. Two main financial tools, Bloomberg Terminal and TradingView, were studied to examine their chart-building techniques.
In addition to the overall stylistic approach of the charts, Bloomberg Terminal featured a complex two-section date scale that allowed for convenient tracking of intervals. The client agreed to incorporate such a scale in Skybonds.
Scatter plots are rarely encountered. For comparative analysis, the Tableau service and the infographic guide by Claus Wilke were used.
Based on the conducted competitive analysis, a new design for the charts was proposed:
– Removed cluttered labels that hindered line readability
– Made the grid less contrasting
– Selected brighter colors for the lines
– Added a gradient shadow below the main chart
– Implemented a two-section date scale
– Placed the vertical axis on the right
For the Skybonds system, both large full-size graphics and miniature graphics for widgets have been developed.
Similar work has been done for the Scatter Plot:
– The shapes have been made semi-transparent, which enhances readability
– The grid has been made less contrasting
– A system for encoding average lines has been developed
Based on the work, three research articles about graphic design have been written, which were published in the UX Collective journal.
Problem #4
Lack of universal design system
The design system of Skybonds suffered from inconsistency in its component base.
The design system lacked sufficient modes. For example, dropdowns could only contain text, whereas often an icon and a counter are required in this component.
Additionally, the states of components and the components themselves were confused. For example, the blue primary button and the pressed state of the white secondary button were implemented using the same component.
A refactoring of the design system was conducted. New components were added, and existing ones were structured based on their states and behavior.
The components were implemented as variants, presented in Figma right at the beginning of the refactoring work.
User request #1
Design benchmarking tools
The task from the main user of the system is to develop a set of tools for bond portfolio benchmarking. Requirements:
– Displaying Total return curves for the portfolio and Bloomberg benchmark
– Building the spread between the curves
– Ability to exclude portfolio securities from the Total return curve
– Parameters for filtering securities of comparable portfolios
– Tabular view reflecting the contribution of each security to the overall portfolio growth
User request #2
Suggest new user interface
Task: Propose a new design for the system interface.
– Attractive design in a modern style
– Simplified filtering panel
– Status bar with a set of additional commands
– Use of all the developments from previously completed tasks