Go back to case study

Trading portfolio

A trading portfolio is a list of all a trader’s open positions, as well as pending orders (set to open automatically when an asset reaches a certain price). A well-structured portfolio helps determine how profitable or unprofitable a trader’s strategy is.

Go back to case study

Trading portfolio

Go back to case study

Trading portfolio

Go back to case study

Trading portfolio

AFTER

BEFORE

AFTER

BEFORE

AFTER

BEFORE

Problem and challenge

The existing trading portfolio wasn’t suited for margin trading

It lacked quick access to essential information and didn’t allow traders to efficiently edit or close positions on the go.

The existing trading portfolio wasn’t suited for margin trading

It lacked quick access to essential information and didn’t allow traders to efficiently edit or close positions on the go.

The existing trading portfolio wasn’t suited for margin trading

It lacked quick access to essential information and didn’t allow traders to efficiently edit or close positions on the go.

Business / Tech Challenge

The portfolio is a shared interface component for all trading tools in the terminal, displaying all open and pending positions across different instruments. This means its redesign has to be aligned with the Product Owners of other trading tools.

Business / Tech Challenge

Research

Analysis of the existing solution

The current portfolio (a list of open positions and pending orders) was displayed as a narrow side panel with positions shown in card format.

interface of the previous version of portfolio in card format

Existing solution

To evaluate the existing solution, I created a list of key tasks the portfolio should handle, considering the impact of different trading tools. Then, I assessed how well the current design met those needs.

List of key tasks the portfolio should handle

The analysis revealed that the existing portfolio wasn’t suitable for margin trading and required significant improvements.

Key problems of the existing solution

Confusing UX for closing positions

The ”Close” button was hidden and appeared differently for single positions versus grouped positions. There was no option to close all positions with one click.

Confusing UX for closing positions

The ”Close” button was hidden and appeared differently for single positions versus grouped positions. There was no option to close all positions with one click.

Confusing UX for closing positions

The ”Close” button was hidden and appeared differently for single positions versus grouped positions. There was no option to close all positions with one click.

Hard to compare and manage position settings

The card format limited the number of parameters displayed at first glance. Auto-close settings were missing entirely. Comparing similar parameters across different positions was difficult.

Hard to compare and manage position settings

The card format limited the number of parameters displayed at first glance. Auto-close settings were missing entirely. Comparing similar parameters across different positions was difficult.

Hard to compare and manage position settings

The card format limited the number of parameters displayed at first glance. Auto-close settings were missing entirely. Comparing similar parameters across different positions was difficult.

Key problems of the existing solution

Solution

Iteration 1

In the first iteration, I moved the portfolio to the bottom of the screen and transformed it into a table with separate tabs for open positions and pending orders. Unlike the card-based format, a classic table allowed traders to compare data, sort information, and customize which parameters were displayed.

interface of the first iteration of portfolio

Iteration 1 of the portfolio

UX testing and feedback from traders highlighted both improvements and weaknesses. One major issue I initially overlooked in my analysis of the old portfolio became apparent in the new version – the need to separate open positions into different lists based on the trading tool.

What problems were solved?

Easier position management

The table format made it easy to edit auto-close settings and close positions individually or all at once.

Easier position management

The table format made it easy to edit auto-close settings and close positions individually or all at once.

Easier position management

The table format made it easy to edit auto-close settings and close positions individually or all at once.

Position parameters are readily accessible

All necessary position parameters were immediately visible and well-structured. Traders could customize the table to display the most relevant data.

Position parameters are readily accessible

All necessary position parameters were immediately visible and well-structured. Traders could customize the table to display the most relevant data.

Position parameters are readily accessible

All necessary position parameters were immediately visible and well-structured. Traders could customize the table to display the most relevant data.

What needed to be fixed?

Mixed trading instruments in one list

There was no way to close only margin or only options positions separately since they were grouped together. Displaying positions of different trading tools in the same table overloaded the portfolio.

Mixed trading instruments in one list

Collapsed portfolio blending with Balance information

It wasn’t immediately clear how to expand the portfolio when it was collapsed.

Collapsed portfolio blending with Balance information

It wasn’t immediately clear how to expand the portfolio when it was collapsed.

Collapsed portfolio blending with Balance information

It wasn’t immediately clear how to expand the portfolio when it was collapsed.

Additional insights

Auto-close settings widget was too large

The popup for adjusting auto-close settings took up too much space and overlayed the chart.

Auto-close settings widget was too large

The popup for adjusting auto-close settings took up too much space and overlayed the chart.

Auto-close settings widget was too large

The popup for adjusting auto-close settings took up too much space and overlayed the chart.

The number of open positions on one asset was hard to distinguish

The table settings icon was unclear

Findings

Iteration 2

The first priority was fix the main issue – placing margin and options positions in the same list. Since these were essentially different trading tools with unique position parameters, the solution was to separate them into different portfolio tabs. This made it easier for users to manage each group separately and left room for adding more trading instruments in the future.

What key problems were solved in Iteration 2?

Independent management of different types of trading positions

This solution fully isolated trades and balance parameters for each tool, making it especially convenient for traders who only use one (for example, trades only options).

Independent management of different types of trading positions

This solution fully isolated trades and balance parameters for each tool, making it especially convenient for traders who only use one (for example, trades only options).

Independent management of different types of trading positions

This solution fully isolated trades and balance parameters for each tool, making it especially convenient for traders who only use one (for example, trades only options).

Simplified auto-close settings

The widget became significantly smaller, and traders could now set both a specific price level for automatic closure and a profit/loss amount trigger.

Simplified auto-close settings

The widget became significantly smaller, and traders could now set both a specific price level for automatic closure and a profit/loss amount trigger.

Simplified auto-close settings

The widget became significantly smaller, and traders could now set both a specific price level for automatic closure and a profit/loss amount trigger.

Besides these major improvements, some smaller tweaks were made based on trader feedback during testing.

Final solution

The final portfolio design successfully solved all the issues found in the analysis of the previous interface.

Image description

Results

The new trading interface significantly improved usability, giving traders more control, flexibility, and efficiency in managing their positions.

Streamlined position handling – A table-based layout simplified auto-close adjustments and enabled quick closing of individual or multiple positions.

Clear and customizable data display – Key position parameters were always visible and could be tailored to show the most relevant information.

Independent control over different trading positions – Each instrument had fully separated trade and balance parameters, making it particularly useful for traders specializing in a single type of asset.

More efficient auto-close settings – A more compact widget allowed traders to configure both price-based and profit/loss triggers with ease.

Takeaways

Think bigger

Always try to see the problem in a broader way. This helps plan for future growth and avoid big changes later.

Think bigger

Always try to see the problem in a broader way. This helps plan for future growth and avoid big changes later.

Think bigger

Always try to see the problem in a broader way. This helps plan for future growth and avoid big changes later.

Test early to save time

The sooner you test, the easier it is to make changes before Developers and QA engineers get involved.

Test early to save time

The sooner you test, the easier it is to make changes before Developers and QA engineers get involved.

Test early to save time

The sooner you test, the easier it is to make changes before Developers and QA engineers get involved.

Trading portfolio

Trading portfolio

Trading portfolio

Trading portfolio

Problem and challenge

Research

Analysis of the existing solution

Key problems of the existing solution

Solution

Iteration 1

What problems were solved?

What needed to be fixed?

Additional insights

Iteration 2

What key problems were solved in Iteration 2?

Results

Takeaways

Let's connect.

Let's connect.

Let's connect.

Let's connect.