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

I led the rebuild of IG Trading's mobile app on a new product design system, after convincing the branding team that their marketing style guide couldn't scale to a product. The redesigned app cut time to first trade by 27%, raised interaction with key home-screen modules by 35%, and reduced navigation-related support tickets by 38%.

I led the rebuild of IG Trading's mobile app on a new product design system, after convincing the branding team that their marketing style guide couldn't scale to a product. The redesigned app cut time to first trade by 27%, raised interaction with key home-screen modules by 35%, and reduced navigation-related support tickets by 38%.

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

Legacy accounts page acting as 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 make the initial app experience less intimidating and more navigable for first time users.

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.

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

Card sorting with clients showed a clear order: balances, positions and watchlist first, then top movers, the economic calendar and news. The new home page follows that order and keeps add funds, withdraw and transfer one tap away. CFD and share-dealing accounts each get their own home page, so each shows what matters for that product.

CFD home page

Share dealing home page

Market details & Rewards center page

Market details & Rewards center page

Market details puts the chart, buy and sell prices and client sentiment up front, with insights, news and market info a tab away. The Rewards Center brings tier progress and cash rebates into the app, so clients can see what their trading has earned.

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

Insights

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%

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