Rebuilding IG Trading with a scalable mobile design system

Rebuilding IG Trading with a scalable mobile design system

Contribution

Contribution

Design system foundations

Design system foundations

Product design

Product design

Product Strategy

Product Strategy

Team

Team

Avinash T (Designer)

Avinash T (Designer)

Gosia M (Dev)

Gosia M (Dev)

Rupert T (Business)

Rupert T (Business)

Regions benefitted

Regions benefitted

APAC & ME

APAC & ME

TL;DR

TL;DR

Introduced a goal-based ‘Rewards Center’ feature to promote users’ trading behavior with points and other exclusive perks.

Introduced a goal-based ‘Rewards Center’ feature to promote users’ trading behavior with points and other exclusive perks.

Created an end-to-end digital experience of a pre-existing cash rebate program.

Created an end-to-end digital experience of a pre-existing cash rebate program.

Context

What is IG Trading and why does its mobile UX needs a refresh?

IG Trading is IG’s flagship trading platform and world’s leading CFD provider, available across web and mobile. While IG has its reputation for being reliable and free of latency issues, there was a steady decline in new client sign-ups and retention which kickstarted our client platform survey in 2024 and the results are below.

Current account page acting as a home page

Current account page acting as a home page

Current account page acting as a home page

>60%

of clients prefer mobile app over web platform

70%

of newer clients(<1 year)

feel the app was more complex and less-intuitive

48%

clients face challenges to find top indicators like Expert insights, trade signals & client sentiment

32%

of clients wanted feature improvements to be done on research tools

Goals

Design objective

Along with creating a modern and a fresh look, we wanted to

Along with creating a modern and a fresh look, we wanted to

make the initial app experience less intimidating and more navigable for first time users.

make the initial app experience less intimidating and more navigable for first time users.

show relevant information to the clients which will in turn increase platform launches per month directly impacting increased active clients and trades per client  

show relevant information to the clients which will in turn increase platform launches per month directly impacting increased active clients and trades per client  

help clients to identify 'fires' (e.g. losing positions / approaching margin call) they need to address more quickly

help clients to identify 'fires' (e.g. losing positions / approaching margin call) they need to address more quickly

reduce the time and effort taken by users to research, place and monitor trades

reduce the time and effort taken by users to research, place and monitor trades

enable users to make more informed trading decisions

enable users to make more informed trading decisions

Go-to-market approach

Since It was divisional decision to make the revamp, we wanted to make sure the global teams are not affected by the changes we make.

Since It was divisional decision to make the revamp, we wanted to make sure the global teams are not affected by the changes we make.

Start with the design system foundations

Start with the design system foundations

Build out essential components focussing on critical user flows.

Build out essential components focussing on critical user flows.

Design the critical screens like Home page, Market details, Account, etc

Design the critical screens like Home page, Market details, Account, etc

Do usability testing both moderated and unmoderated.

Do usability testing both moderated and unmoderated.

Align with stake holders, finalise the designs and prepare for tech hand-off

Align with stake holders, finalise the designs and prepare for tech hand-off

Solution

Design system foundations & components

Design system foundations & components

We had the Marketing style guide which the Branding team was pushing to use for the products but we took a stand and convinced them why the Marketing style guide cannot scale to be Product design system. So we took the marketing style guide as a base and built out the foundations and components more focussed on the product’s use cases.

We had the Marketing style guide which the Branding team was pushing to use for the products but we took a stand and convinced them why the Marketing style guide cannot scale to be Product design system. So we took the marketing style guide as a base and built out the foundations and components more focussed on the product’s use cases.

Home page

Home page

Once they land on the asset details page of any instrument, they get to see market sentiment and other indicators that would help them to finalise their decision and to place a trade. Once they tap on Buy/Sell, deal ticket screen with added risk management opens up and lets users place a trade in a seamless way.

Once they land on the asset details page of any instrument, they get to see market sentiment and other indicators that would help them to finalise their decision and to place a trade. Once they tap on Buy/Sell, deal ticket screen with added risk management opens up and lets users place a trade in a seamless way.

CFD home page

Share dealing home page

Market details & Rewards center page

Market details & Rewards center page

This flow show users can monitor their positions, edit risk management and close positions. Users have a granular view on their past performances and balances section with helper text. They also have visibility to all of their current positions and open orders.

This flow show users can monitor their positions, edit risk management and close positions. Users have a granular view on their past performances and balances section with helper text. They also have visibility to all of their current positions and open orders.

Market details

Rewards center

Validating our designs through usability testing

In order to validate our design and get initial impressions from customers, we did usability testing where we talked to 16 of our clients across Singapore and Australia.

Sorting activity

Sorting activity

We showed clients the bunch of cards containing different section of the homepage and asked them to sort the cards based on the order they would to see within the home page.

Usability testing and feedback

Usability testing and feedback

We let them explore the prototype and recorded their initial impressions, what they like and don’t like.

Insights from users

Insights from users

The overall response to the homepage was very positive. Users felt the screen was cleaner and more intuitive to navigate and discover what they were looking for, compared to the earlier version.

Participants were excited to see overall portfolio summary since there isn’t a way to monitor that in the current app experience.​

Clients wanted to see top movers, economic calendar and news after their balances, positions & watchlist

When sorting personalized news and narrowed down list of upcoming events were the most popular. There wasn’t a strong positive indication for other widgets

Key performance indicators

Key performance indicators

reduction in time to complete first trade

↓27%

↑ 35% increase in interaction with key home screen modules

↑ 35%

drop in navigation-related support tickets

↓38%

What I learnt


  • I learnt how we can use marketing, gamification and exclusivity as selling points for the users to drive more engagement.

  • Provided the technical and timeline constraints, I learnt how to not change things more than what is required in order to get the product delivered on time.

Other works

IG Markets CFD

Driving mass adoption of an advanced trading product

IG Rewards center

Loyalty program for driving engagement & user retention

Naveen

• All rights reserved

Home

About

Garden

Resume

Contact

Home

About

Garden

Resume

Contact