Button Text

The Ask

Modernize IG's UI with updated current design and accessibility standards

Role

UI Lead

Category

Website

Design System

Outcomes

The first UI lead hired to guide IG's UI design and establish a comprehensive design system, undertake a redesign, and set the foundation for UI best practices.

Opportunity

IG Wealth Management embarked on revitalizing their original website. Advisors expressed a desire for an enhanced website that would impress clients and prospects. By optimizing the user experience and showcasing a new brand direction, the company aimed to boost customer satisfaction and engagement. Updating the UX & UI would not only refresh and elevate the client experience, but it would also enhance customer interactions and ensure compliance with AODA requirements, further elevating the company's online presence and continuing to drive them to be thought leaders in financial advice.

KPIs

Established UI best practices, including deliverables, guiding principles, and thought leadership expectations.

Created a consistent voice throughout IG's digital platforms.

Ensured AODA compliance for accessibility.

Enhanced trust and confidence in IG.

Elevated business perception and engagement with UI.

Developed a flexible and scalable design system for seamless adaptability.

Key Deliverables

User journeys

Thought leadership

Website redesign

‍Design system

Phase 1

A comprehensive system overhaul

Assigned with the responsibility of converting a campaign design into a comprehensive design system for MVP pages and product pages. Collaborating closely with UX to gather requirements and insights, conducting iterative design sprints, and leading the UI initiative.

Before launching a large-scale redesign, our objective was to showcase the business benefits of implementing a design system. We focused on analyzing the pain points of the older site, which lacked responsiveness and hadn't undergone a substantial architectural update in several years.
Source: Heatmap of campaign pages

Research

Collaborating closely with UX, we conducted comprehensive audits to assess AODA compliance and analyze the competitive landscape. UX conducted valuable heatmap analysis and user testing to gather insights, which guided our enhancements to the page designs. The results were impressive, with 3,178,618 unique pageviews tracked.
Style title based on agency redesign
Style Tile
IG sample website page displaying UI style across additional pages
Foundational cleanup, updates and expansion

Expansion

We embarked on a process of updating and incorporating design system styles into additional MVP pages and product pages to establish a cohesive visual identity across the most frequently visited pages by clients and advisors. By reimagining and leveraging the live campaign style, we expanded its elements into components, thus establishing improved UI standards throughout the entire site.
Design system for IG
Design system - Sample set

Foundations

We extended the designs to encompass the entire site, paving the way for the creation of IG Wealth Management's first design system. This initiative highlighted the advantages of adopting a systematic approach and building reusable components. By reimagining and incorporating the live campaign style into component-based elements, we established enhanced UI standards throughout the entire site.

Key Learnings

80%
Of users landing on the page would not scroll and immediately leave
42%
Reduced bounce rate, and increased engagement on page
70%
Of users scrolling from the hero section increased to 78% of the page
Custom Digital Design system UI
Custom digital design system - Sample set

System

We encountered a significant challenge related to licensing the art and fonts utilized in the original campaign on the website, which reached a critical point in the new year. As a result, we accelerated our timeline and implemented a redesign. To streamline our workflow, we developed an in-house repository that offers easy access to new team members and remote freelancers.

Phase 2

Elevating the user experience

With only a three-month timeframe remaining until launch, we collaborated closely with our UX team to perform a thorough content audit. Simultaneously, we engaged in discussions with our business partners to assess the relevance and requirements of the content. As a result of this process, we successfully eliminated over 1,400 pages. Our launch strategy was meticulously planned, and we divided it into essential phases to ensure its effectiveness.
White label IG page system
Design system updates

The art of adaptability

We were in the process of refreshing our brand, which presented multiple potential directions to consider. The finalization of the brand was not achieved until two weeks before the launch. To ensure a successful outcome, we collaborated with our UX team to establish a comprehensive plan for testing and validation throughout the development process. Our war room became a hub of activity, with daily updates posted on walls and boards, providing a transparent view for business updates and facilitating walkthroughs for all team members to easily grasp every detail at a glance.
MVP website page, Investments, Mortgages, Home Ownership, Our Philosophy
White label branding

Navigating a challenging schedule

Our minimum viable product (MVP) centered around developing a streamlined design system that could be rapidly adapted. Considering the time constraints, we made the decision to create a white-label version since full implementation of the brand was not feasible. With a significant number of pages to convert, we identified the MVP pages and provided essential guidance on typography, color, and alignment for the remaining pages. The finalized brand arrived just two weeks before the launch, which we promptly incorporated within a few days. Rigorous testing of the updated pages ensued, ensuring a successful and timely launch. As the Lead UI, my primary objective was to demonstrate to the business the effectiveness and necessity of a comprehensive design system, highlighting the advantages of adaptable and updatable components. With a highly skilled team, I had full confidence that we would deliver a product that surpassed expectations.

Phase 3

Designing with purpose

Following the triumphant launch of our design system, our brand is now fully operational. Collaborating closely with UX, we are conducting comprehensive testing and actively searching for any opportunities to further refine our system before embarking on the exciting journey of implementing the new brand.
Product page samples
UI brand updates

Telling our brand story

After identifying key areas and hero pages that demand additional focus, we devised a straightforward plan: leverage the achievements of our initial implementation, thoroughly test our designs, and execute the necessary enhancements. With the aid of AEM (Adobe Experience Manager), we seamlessly integrated these components, font variations, and color updates across the entire site.

Advisor App

IG Wealth Management

Explore

PWM

IG Wealth Management

Explore

Redesign

IG Wealth Management