IG Group: Various Projects for Financial Derivatives Company

https://www.ig.com/uk/welcome-page

My role at IG Group was a combination of research and design using wire involve Lo and High fidelity prototyping.

Working across desktop and mobile myself and others members of the user experience team seek to improve the projects of IG Groups product suite to meet user and business needs.

I worked on many projects at IG, the following is a snapshot of some of the most prominent ones.

Transforming IG’s Trading Experience: A User-Centered Redesign for the iPad
Keeping Traders Informed: Designing a Feature-Rich Feed for IG’s Trading Platform
IG Investments: Designing IG’s Investment Platform
Integrating MetaTrader 4 with IG’s Platform
Redesigning the Deal Ticket for Professional Clients
Implementing Two-Factor Authentication for the IG Mobile App

1. Transforming IG’s Trading Experience: A User-Centered Redesign for the iPad

Project Overview:

This project involved a complete redesign of IG’s iPad trading app to capitalize on the launch of iOS 7 and its shift towards a flat design aesthetic. The goal was to create a user-friendly and feature-rich app that catered to the needs of IG’s traders.

Target Audience:

The target audience for this project was IG’s existing traders, individuals familiar with the financial markets and actively utilizing the company’s trading platform.

The Problem:

The existing app was outdated, designed for the skeuomorphic style of iOS 6 and in need of modernization to align with the flat design language of iOS 7.
User research was necessary to identify potential pain points and areas for improvement within the app.

The Process:

Competitor Analysis: The initial step involved a paper-based analysis of competitor apps in the trading space. This analysis compared features, usability, and design, providing valuable insights into industry trends and user expectations.
User Research: Extensive user research was conducted to gather feedback on both the current IG app and competitor offerings. This research included:
- Trader Interviews: In-depth interviews with around 30 traders provided valuable insights into their workflow, needs, and frustrations with the existing app.
- Internal Workshops: Workshops held with IG staff, particularly the professional traders and developers, aimed to understand their experiences with the current app and explore their vision for an ideal trading platform. This included brainstorming sessions where staff sketched out potential solutions and envisioned how new technology could be integrated.
Synthesis and Ideation:
- The research findings from traders and staff were grouped into themes, identifying key areas for improvement.
- Based on these themes, initial wireframes were sketched out on whiteboards, visualizing potential solutions and user flows within the app.
Prototyping and Iteration:
- Low-fidelity wireframes were first created and presented to internal stakeholders, traders, and developers for feedback. This feedback was captured using post-it notes to categorize suggestions and areas for improvement.
- The wireframes were then iterated upon, creating a more detailed vision for the app.
- Finally, a high-fidelity prototype was developed and tested with real traders to gather feedback on the overall user experience.

Results:

Award-Winning Design: The redesigned IG trading app received positive feedback and ultimately won an award for best trading app.
Enhanced User Experience: The research-driven design process resulted in an app that catered to trader needs and offered a user-friendly and efficient trading experience.
Modernised Interface: The app successfully transitioned to the flat design language of iOS 7, creating a visually appealing and modern user interface.

This project demonstrates the power of user-centered design in creating a successful financial trading app. By actively engaging stakeholders, traders, and developers throughout the research and design process, the project delivered a solution that addressed user needs, leveraged new design trends, and ultimately received industry recognition.

Benchmarking a selection of competitor apps and IG apps

Speaking to around 30 traders handling the recruitment of these individuals and then compiling the results so we could see the spread of information obtained.

Spreadsheet of results from traders

A report was then produced and then presented to stakeholders

Example page from discovery benchmark report

The next phase was to gather feedback internally from staff particularly traders and developers who would be building the new app. We held around 6 workshops asking staff a series of questions particularly what was wrong with the current app and asked them to sketch out their ideal solution or visually express how they saw features working and how new technology could be used.

Sketching workshops from internal staff

The main points from both staff and traders were grouped and organised into themes as seen below.

Grouping of staff and trader feedback

Sketching out possible solutions based on feedback received

Early stage sketches of the iPad app

We often used a whiteboard to sketch ideas out and discuss how the app would work across various screens.

Sketching whiteboard session

After producing initial first stage wireframes we then gathered feedback from internal staff. Traders, developers and stakeholder using post-it notes to attribute the various comments made.

Feedback on early stage wireframes from people within the business. Stakeholders, developers and traders.

From here the the vision of the app was expanded through further more detailed wireframes, before moving to a prototype that was tested with real traders.

Wireframes of the iPad App

Hi-fidelity version of the new iPad app using built Axure

The outcome was a well received app that won an award for best trading app. The app is still being used today.

Promotional page on IG.com of the iPad app

2. Keeping Traders Informed: Designing a Feature-Rich Feed for IG’s Trading Platform

Project Overview:

This project involved designing “The Feed,” a real-time news, social media, and trade alert tool for IG’s revamped desktop trading platform. The goal was to provide traders with the most relevant information at the right time, enabling them to make informed trading decisions.

Target Audience:

This project focused on IG’s existing traders, individuals familiar with the financial markets and actively utilising the company’s trading platform.

Understanding User Needs:

Leveraging Previous Research: Building upon existing qualitative data from prior research into trading habits, the project analysed trading patterns to understand user behaviour.
Global Usage Analysis: Quantitative data was gathered by analysing IG’s trading platform usage across various international locations. This cross-referenced data with trading behaviour patterns to gain insights into how traders operated across different time zones.

Designing the Feed:

Information Prioritisation: By combining trading habits data and global usage analysis, the research identified the type of information most valuable to traders and the optimal timing for its presentation within the Feed.
Prototyping with Axure: Low-fidelity prototypes were created using Axure to visualize the Feed’s functionality and interaction with other platform elements.

Development and Iteration:

Collaboration with Developer: Following feedback from prototype testing, several weeks were spent working closely with a developer to build the first implementation of the ‘Feed’.
Iterative Development: Based on user feedback, the Feed underwent several rounds of iteration and refinement to optimise its effectiveness.

Results:

Standout Feature: The Feed emerged as a key feature of the new trading platform, praised by users for its ability to provide real-time information crucial for informed trading decisions.
Enhanced User Experience: The Feed contributed to a more engaging platform experience by keeping traders informed with rich and timely content.
Positive User Reception: IG’s trading customers welcomed the Feed’s functionality and information delivery approach.

This project exemplifies how user research, combined with data analysis and prototyping, can inform the design of features that cater to specific user needs and ultimately enhance the user experience. Through a user-centered approach, the project successfully delivered a valuable tool that empowered IG’s traders with real-time information for informed decision-making.

Looking at the data across IG’s various trading platforms internationally that clients used across the globe provided the quantitative data to backup the qualitative data.

Graphs showing the logins by platform

Graph showing the logins by territory

The end result was an understanding of how traders traded across the different time zones and the sort of information they would be looking for. This formed the basis of how the feed would work in in the desktop trading application and what information would be useful and when.

After gaining an understanding of the type and timing of how information will be presented and when I tried to see how this would look and function in a prototype using Axure. Firstly on it’s own then how it could trigger other elements in the platform.

Early stage prototype using Axure. The feed (on the right) transitions down and clicking specific buttons would open up elements in other areas of the platform.

After testing, working with a developer for several weeks to build the first iteration then adapting over several iterations after each round of feedback from users

Outcome

The result proved to be one the standout features of the new trading platform. Presenting real-time information to traders so they could make vital trading decisions. It also helped bring the the platform alive with this rich timely content and was received warmly from IG’s trading customers.

The live version of the feed can be seen in the screenshot below:

Screenshot of the live version of the feed (on the right-hand side)

3. IG Investments: Designing IG’s Investment Platform

Project Overview:

Following the introduction of stockbroking services, IG aimed to expand into the investment space by offering investment accounts, ISAs (Individual Savings Accounts), and SIPPs (Self-Invested Personal Pensions). This project involved designing a user-friendly investment website within a small team.

Target Audience:

The target audience comprised potential investors interested in managing their investments through IG’s platform. This included both existing IG customers and new users seeking a user-friendly platform for diverse investment options.

Challenges:

Stakeholder Alignment: Understanding and aligning with stakeholder expectations regarding the investment platform’s functionalities and overall vision.
Balancing Risk Assessment and Conversion: Finding a way to integrate the lengthy “Oxford Risk Questionnaire,” a regulatory requirement, without hindering user conversion rates.
Investment Presentation: Determining an intuitive and engaging way to present investment products and information.

Research and Approach:

Competitive Analysis: Examining competitor investment platforms across their marketing websites, signup processes, and investment management interfaces. This analysis provided insights into industry best practices and potential areas for differentiation.
User Research: Conducting user research within IG’s existing customer base (“IG community”) to understand their preferences, pain points, and unmet needs regarding investment platforms. This research helped identify opportunities to leverage IG’s unique range of investment options and seamless account transfers.

Initial Design Phase:

Technical Feasibility: Collaborating with the developer to evaluate technical constraints and identify functionalities that could be realistically implemented.
Wireframing and Information Architecture: Sketches and early-stage wireframes were created, outlining the platform’s user interface and the information hierarchy. Detailed annotations described the specific details to be displayed at different stages of the user journey.

Results:

Foundation for Future Iterations: This project established a solid foundation for the initial launch of IG’s investment website. Further user testing and data analysis could be employed to refine the user experience and optimise conversion rates.
Addressing User Needs: By incorporating user research and competitor analysis, the project aimed to create an investment platform that addressed user needs for a user-friendly experience while balancing regulatory requirements.

By considering stakeholder needs, user preferences, and technical feasibility, the project laid the groundwork for launching IG’s investment platform, catering to a new segment of potential investors.

4. iPhone app redesign: Redesigning the IG iPhone App for Usability

Project Overview:

This project involved an initial redesign of IG’s iPhone app to adapt to the flat design language introduced with iOS 7. However, due to the lack of user research and testing, the redesign resulted in usability issues.

Target Audience:

The target audience remained IG’s existing traders, individuals familiar with the financial markets and actively utilising the company’s trading platform.

The Problem:

The initial redesign focused solely on implementing the new iOS 7 flat design aesthetics without considering user needs.
Negative user feedback highlighted usability issues with the redesigned app.

A Missed Opportunity:

While the initial redesign aimed to keep pace with the latest iOS design trends, it neglected user-centered design principles. This resulted in:

Skipping User Research: No user research or testing was conducted before launching the initial redesign.
Unforeseen Issues: The project did not anticipate how the design changes might impact user experience.

Addressing the Issues:

User Feedback Analysis: Reviewed user feedback pinpointed specific problems traders were encountering with the redesigned app.
Usability Testing: Two rounds of user testing were conducted with traders to understand their workflow and identify areas where the app fell short compared to the previous iOS 6 version.

Key Findings:

Ergonomic Issues: Replacing the bottom menu bar with a “hamburger” menu significantly impacted usability. Traders found it slower to access crucial screens and difficult to reach one-handed.
Information Clarity: The flat design elements lacked clear affordances, making it challenging for traders to quickly identify clickable areas within the app, especially during time-sensitive trading situations.

A Course Correction:

Menu Redesign: Based on user feedback, the hamburger menu was replaced with the original menu bar at the bottom of the app for easier one-handed access.
Visual Hierarchy: Clickable areas within the app were redesigned to be more visually distinct, improving information clarity and facilitating user interaction with the app.

Results:

Improved Usability: The revised design addressed the major usability issues identified through user testing, resulting in a significant improvement over the initial redesign.

Lessons Learned:

This project highlights the importance of user-centered design. By prioritizing user research and testing throughout the design process, companies can avoid costly mistakes and ensure their apps meet user needs while adhering to design trends. The revised IG iPhone app demonstrates the value of listening to user feedback and iterating on designs to deliver a user-friendly and efficient trading experience.

User testing iphone app with a trader

4. Integrating MetaTrader 4 with IG’s Platform

Project Overview:

This project aimed to integrate MetaTrader 4 (MT4), a popular trading platform, with IG’s existing platform. The goal was to attract a wider audience of traders familiar with MT4 while allowing them to leverage IG’s pricing and account structure.

Target Audience:

This project targeted two primary audience segments:

Existing MT4 Users: Traders already comfortable navigating and using the MT4 platform.
IG Customers Seeking Familiarity: IG’s existing customers who might prefer the interface and functionality of MT4.

Understanding the Needs:

Stakeholder Alignment: Discussions with stakeholders and business analysts helped solidify the overall objectives of the project and identify key areas for integration.

Mapping the User Journey:

Touchpoint Analysis: A user journey map likely focused on mapping out the various touchpoints involved in the integration process. This would consider different user scenarios, such as existing MT4 users transitioning to IG’s platform and IG customers accessing features through MT4.

Building a Shared Vision:

Sketching and Collaboration: Through sketches and discussions with various departments (business, marketing, development), initial ideas were explored for visually representing the integration points within the IG platform.
Wireframing and Iteration: More detailed wireframes were then created to depict the user interface for the integrated functionalities. These wireframes likely underwent several iterations based on feedback from stakeholders and potential users.

Results:

Enhanced User Acquisition: The successful integration of MT4 was aimed to attract new traders familiar and comfortable with the platform.
Improved User Experience: Existing IG customers who prefer MT4 could benefit from a familiar interface while enjoying the advantages of IG’s offerings.

Summary:

This project demonstrates a strategic approach to user experience by catering to the needs of both existing and potential customers. By integrating a popular platform like MT4, IG could expand its reach and provide a wider range of trading options to its user base. The focus on mapping user journeys and stakeholder collaboration through sketching and wireframing highlights the importance of user-centered design in developing a seamless integration experience.

Mapping MT4 integration across various touch points

Sketching out how some of this would look and talking to the business, marketing department and developers more complete wireframes were created, iterating several times to reach the best solution.

Sketch of the new MetaTrader webpage

Wireframe of the IG.com website introducing MetaTrader

5. Redesigning the Deal Ticket for Professional Clients

Project Overview:

This project aimed to improve the deal ticket interface for IG’s professional trading platform, used primarily by trading organizations. The goal was to enhance efficiency by facilitating faster access to pricing, markets, and order management functionalities.

Target Audience:

This project focused on IG’s professional clients, specifically trading organizations relying on IG for execution and pricing within their own professional platforms.

Understanding User Needs:

Stakeholder Insights: Initial discussions with the sales manager, who interacted directly with clients, provided preliminary information on client needs and desired improvements.
Client Site Visits: Visiting client offices provided deeper insights into their specific challenges. User research likely revealed a strong emphasis on speed: faster access to crucial information for informed trading decisions and quicker execution of orders.

Design Exploration:

Sketching Initial Ideas: Based on user research, initial sketches were created to visualize potential solutions for a more efficient deal ticket interface.

Building the Prototype:

Wireframing and Prototyping: Detailed wireframes were likely developed to refine the design and user flow within the deal ticket. A prototype was likely created to simulate the user experience and gather further feedback.

Challenges and Outcomes:

Shifting Priorities: While the project progressed to user testing with a planned development phase, organizational priorities shifted towards the development of a new desktop trading platform. This resulted in the deal ticket redesign being placed on hold.

Summary:

Despite not reaching full implementation, this project demonstrates the importance of user research in optimizing trading platform functionalities. By focusing on the needs of professional clients and prioritizing speed and efficiency, the project sought to streamline the deal ticket interface and enhance the user experience for IG’s professional client segment. The user research and design work conducted can serve as a valuable foundation for future iterations of the deal ticket or related features within the new desktop trading platform.

Advanced FX deal ticket on professional trading platform

6. Implementing Two-Factor Authentication for the IG Mobile App

Project Overview:

This project aimed to enhance the security of IG’s mobile app by introducing two-factor authentication (2FA). The goal was to create a user-friendly and secure login experience for mobile app users.

Target Audience:

This project targeted existing IG mobile app users, individuals familiar with the app and potentially new users who value an extra layer of security for their financial accounts.

Understanding the Technology:

Developer Collaboration: To gain a comprehensive understanding of how 2FA would function within the app, close collaboration with developers was crucial. This involved discussions about technical functionalities and integration considerations.

Mapping the User Journey:

User Flow Design: The user journey was mapped out to illustrate the 2FA login process from the user’s perspective. This likely considered different scenarios, including initial setup, regular login with 2FA, and potential troubleshooting steps.

Designing the Experience:

Wireframing the Solution: Detailed wireframes were created to depict the user interface for the 2FA login experience. These wireframes would have outlined the visual elements, screen layouts, and information hierarchy throughout the login flow.

Outcome:

Improved App Security: The introduction of 2FA adds an extra layer of protection against unauthorised access to user accounts, providing peace of mind for mobile app users.
Seamless User Experience: By prioritising user-friendliness throughout the design process, the project aimed to ensure the 2FA login experience is straightforward and efficient for users.
Solid Foundation for Development: The detailed wireframes provided a clear roadmap for developers to build the 2FA functionality within the IG mobile app.

Summary:

This project exemplifies the importance of balancing security with usability. By collaborating with developers to understand the technical aspects of 2FA and focusing on user-centered design principles, the project aimed to create a secure and user-friendly login experience for the IG mobile app. Through clear user journey mapping and detailed wireframes, the project laid the groundwork for a successful implementation of 2FA within the app.

Mapping user journeys for additional security

Wireframing how two-factor authentication would look and work within the app