IG Group is an established member of the FTSE 250 with a market capitalisation of £2.1 billion. It’s the No.1 provider of CFDs and spread betting worldwide, with offices located in 17 countries. IG gives over 150,000 retail investors leveraged access to over 15,000 financial markets through an award-winning dealing platform and mobile apps.
Understanding the problem
IG offer a multitude of products ranging from native apps to web-based trading platforms. As the company grew its global presence across 17 offices, it faced challenges in maintaining consistency in its products. The experience across IG’s offerings had become fragmented.
My task was to identify the fragmentation, inconsistencies and accessibility issues across the range, and create a unified design system that could be used by product designers, creative designers, developers, content writers, stakeholders and new hires. The system needed to act as the beating heart of design and user experience at IG; a collaborative set of principles and guidelines, with a comprehensive live inventory of UI components, style guides, assets, code snippets, developer guidelines and more. It needed to align all creative and development teams globally, while efficiently scaling with the company’s growth.
I began by auditing all platforms and products to identify and highlight the inconsistencies. I compiled these issues, defined my recommendations, and presented my work to multiple teams across IG to ensure that everyone was on the same page. The teams began to see how a design system could really benefit their workflow and create a consistent experience.
Once I had secured agreement on the direction of the design system, I defined the foundations for the style guide, the pattern library and the reusable components. I presented the system at regular intervals to teams around the world.
When the system was complete, I coordinated its global rollout. I ran workshops across various offices, presented the finalised system to stakeholders and senior management, and made announcements on IG’s internal networks. I ensured it was useful and usable for all teams involved, as a successful design system is only as good as its uptake.
There are three vital parts to a successful design system: a style guide grounded in strong foundations (colour, typography, brand mark, iconography), a comprehensive pattern library with principles, code examples and design guidelines, and a set of robust, reusable components to cover all UI cases and functionalities. I worked with a collective group of engineers across a range of development technologies, ensuring that everything defined in the system was easily transferrable to production code.
IG is currently using its design system to align its visual language across all platforms and products. The living style guides and pattern libraries are used across all creative teams, and the code examples and guidelines have greatly streamlined its development process.