User interface for Markets

Online broker FXPro wants to gradually improve the trading workflow: “We did this experiment to figure out what the trader’s user interface will be in the future.” Bureau Gorbunov conducted research on the topic and created a user interface concept for Markets, FXPro’s trading platform.

March 1, 2018
fxpro.com/markets

Conventional trading platforms deprive users of the sense of control with countless buttons & indicators and cause chaos by exuberant blinking. ‘Markets’ is calm and simple without loss of functionality.

Trading

The main screen consists of financial instruments’ widgets. When a trader opens a position, it gets added to the bottom panel.

Depending on the display mode, the trader sees either a full candlestick chart, the market depth with a compact sparkline or just large Sell and Buy buttons
At night, markets are closed
Open positions, quantity, price changes, PNL

Prices constantly change. To show the changes, most platforms paint the whole charts and prices green or red.

For ‘Markets’, we created a better kind of price chart. We only highlight the final segment of continuous price rise or fall. The color becomes prominent only when something interesting is going on.

Before
After

User engagement

One of the objectives of the new design was to attract more traders. To spark the interest of beginners in what’s happening in markets, we created the magazine‑like Explore screen:

fxpro.com/markets

No editorial staff required: the multiple formats are automatically replenished with information. The product team can always add custom blocks if they so choose.

The selection of financial instruments and news headings tempt to try trading

Neatness

Most platforms let traders drag elements around to customize their workspace. Arranging them neatly requires effort, and most traders end up with a mess. The user interface for resizing and repositioning complicates the already dense user interface.

Now, to adjust the layout, there is one magic Rearrange button:

fxpro.com/markets

Smart search

Widgets are added from Explore screen or from search. To search, you don’t even need to click the field⁠—any text input is interpreted as search automatically:

Search finds instruments, categories, countries and industries. The highly informative dropdown lets you type a couple of letters and see the price without even adding widgets.

History

The history screen shows filled and pending orders along with other account activity:

fxpro.com/markets

To fill some orders, multiple transactions should be made. In this case, they are grouped together with a bracket. Additionally, transactions related to one position are highlighted on hover.

About the project

The new interface is not intended for immediate deployment. The traders’ work involves quick decision making and is based on habits formed through years of experience, so radical interface changes are dangerous. Certain elements will be tested and may be progressively deployed.

Art director

Ilya Birman

Designers

Aleksey Salnikov

Yuri Mazursky

Special thanks to Evgeny Sorokin for comprehensive explanations.

The current interface of the online trading platform
Pin
Share
Send