Size: XS

My Work

Costs transparency in trading, making it less risky!

My roles: CodingPrototype + testingUI DesignUX Design

Project Objective

One of the key reasons for new client’s hesitations into leveraged trading is because they often have a hard time understanding what they are actually risking with each trade, this includes how market movement will impact their returns as well as costs involved with each trade. As part of a new regulatory requirement, we decided to take the opportunity to bringing full cost transparency for our clients.

The Challenges

The greatest challenge for this project is perhaps gaining alignment from various parties within the business, the showing of costs and charges impacted over 27 tech teams over 3 main platforms (Web, iOS, and Android) with not a single person nor team who had thorough understanding of the mechanics of trade costs.

Experimenting how costs and charges should be displayed on desktop platform

The Outcome

Working closely with the product owner, we iterated over 40 designs over 9 months to ensure we balanced the needs of business, compliance & legal, dealing desk, and most important of all, our client’s.

As the design for cost transparency start to take form, we began to develop a set of interaction principles for how we should show trading costs, the first three are:

  1. We must not interrupt the trading journey of our clients, more experienced clients would not require this information as much, since they tend to generate high profit, we must ensure their journey remain the same.
  2. Costs must be shown before users are able to place a trade, whether it’s in opening or closing.
  3. Since IG operates in over 20 countries, but costs transparency is only be implemented for European clients, we need designs that would have minimum impact to the overall platform design and behaviour.

Not only did the interaction principle guide us in design decision making, but they also allowed us to communicate with developers much more efficiently in terms of edge case logic.

The size of our trading platforms meant there were over different 80 touch points across Web, iOS, and Android where a user could open/close/edit a trade.

At the time of writing, the costs transparency project had only launched for 3 weeks and remains to be seen whether it had any impact of trading volume. However, we have received several compliments welcoming the new feature for bring transparency into trading.


CFD options UI breakdown for costs and charges
Tool tip for one-click trades on IG’s desktop platform
Detailed breakdown of charges
Showing costs and charges for when trading on charts with developer hand off notes