Overview

Fidelity Investments is a premier, privately held financial services corporation founded in 1946, managing approximately $9.9 trillion in assets. Fidelity internal brokerage team provides trading capabilities across asset classes for the firm.

I was the sole designer on the securities application for an internal trading platform for Fidelity Investments. The application allows over 8k Fidelity associates to view and compare securities. The initiative also marks Fidelity's transition from mainframe systems to cloud-based applications.

Challenge

Fidelity’s Internal Brokerage team managed trading and operations using legacy mainframe 3270 screens. This legacy technology was becoming a bottleneck in many fronts including recurring mainframe costs, human errors, risks and a steep learning curve. Fidelity had a multi-year initiative to deprecate mainframes in favor of a cloud-based platform.

Key issues:

• Rising subscription costs— Reduce operating costs by deprecating legacy mainframes that costs millions to run and maintain.

• Delayed tasks completion— Over 8k associates across 28 teams have to switch between 200+ mainframe screens to conduct securities inquiry. Time on task takes 10+ minutes due to a context-switching and steep learning curve.

• Training costs and churn— Training new associates took 6+ months, and many left because the learning curve was too steep.

AI representation of the trading associate persona

"The mainframe is challenging to use, especially with abbreviations and codes. It's easy to miss important data since there are so many fields."

-Eve Cohen (Trading associate)

Key activities

1. Audit

User interviews were conducted with 28 departments to assess their current mainframe usage. Each key user flow was documented and key fields were highlighted for API prioritization. Pain points and a wishlist of features were captured from brokerage associates.

Audit of legacy applications used (No PII displayed)

2. Workflow analysis

Detailed workflow analysis and user flows were created based on user interviews with 28 departments. These were then documented and shared with Product Managers to inform product requirements.

Image caption here

3. User flows

User flow diagrams for the Securities application ensured alignment across product, business, and engineering teams.

Securities user flow

4. Information architecture

Since the Securities application had to exist within the larger trading platform, efforts were taken to define the information architecture. Continued input from associates informed the structure and organization of the platform.

Navigation information architecture

5. Wireframes

Rapid, iterative wireframes were created in Figma with placeholder data to showcase key screens and interactions. These went through early review from Product teams.

Security details wireframe

6. High-fidelity designs

High-fidelity screens were created for the end to end experience using a new brand-aligned design systems. Updates were made to the data structure and layouts based on feedback.

Security details high fidelity design

7. Prototypes

Monthly prototypes showcased high fidelity prototypes to associates for early feedback and revisions.

Image caption here

8. Usability studies

Demos, usability studies and surveys ensured that associates were instrumental in shaping product vision.

Survey insights for account memo study

9. Design system assets

The design team audited the Fidelity customer facing design system to strategize how it could be used for the internal trading application. I was tasked with auditing and creating Figma color and spacing variables.

Image caption here

The design team collaboratively worked on the design system over a period of 6 months. I was tasked with crafting buttons, steppers and navigation elements. I ensured that all components were tied to semantic (or usage) variables. Documentation was provided with guidelines and code snippets for developers.

10. . Quality assurance

Finalized components were handed off to Engineering for development as reusable Angular components in Storybook. Applications underwent rigorous QA sessions with design feedback incorporated. All items were documented in Jira and prioritized on the roadmap.

Quality assurance screen comparison

Impact

• Unifying 200+ legacy mainframe screens into a unified application.

• Time and cost savings through phased deprecation of legacy mainframes.

• Consistent, brand-aligned reusable components that speed up launch and adoption.

• Time on task reduced from 10+ minutes to under 2 minutes.