Securities Application
Designed the Securities application for an internal trading platform for Fidelity Investments. The application allows Fidelity associates to view and compare securities. The initiative also marks Fidelity's transition from mainframe systems to cloud-based applications.
Consolidated over 200 mainframe screens
50% adopton across 8K users
Securities inquiry tools
178 DAUs
0-1 Design
Client
Fidelity
Domain
Fintech- Internal
Deliverables
UX, UI, Design System, QA
Timeline
Q2 2023-Q1 2025
Securities Application
Designed the Securities application for an internal trading platform for Fidelity Investments. The application allows Fidelity associates to view and compare securities. The initiative also marks Fidelity's transition from mainframe systems to cloud-based applications.
Consolidated over 200 mainframe screens
50% adopton across 8K users
Securities inquiry tools
178 DAUs
0-1 Design
Client
Fidelity
Domain
Fintech- Internal
Deliverables
UX, UI, Design System, QA
Timeline
Q2 2023-Q1 2025
Securities Application
Designed the Securities application for an internal trading platform for Fidelity Investments. The application allows Fidelity associates to view and compare securities. The initiative also marks Fidelity's transition from mainframe systems to cloud-based applications.
Consolidated over 200 mainframe screens
50% adopton across 8K users
Securities inquiry tools
178 DAUs
0-1 Design
Client
Fidelity
Domain
Fintech- Internal
Deliverables
UX, UI, Design System, QA
Timeline
Q2 2023-Q1 2025
Legacy Mainframe Screens Create Friction in the Securities Inquiry Process
$32.7 Billion (2024)
Assets under management
8,000+
Internal associates
28+
Departments
200+
Mainframe screens
Context
Fidelity’s Internal Brokerage team managed trading and operations using legacy IBM 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.
Challenge
Over 8,000 associates across 28 departments are trapped in a difficult daily workflow, manually navigating outdated mainframe systems to perform basic securities inquiries. Entering identifiers by hand, juggling multiple screens, and cross-referencing complex codesets just to monitor asset performance. The experience also had to be customized to fit the needs of each department.
Business goals
Fidelity was focused on reducing operational costs and save millions by moving away from legacy mainframes to a modern accessible experience built on the cloud.
User goals
Streamlined securities inquiry that supports searching and filtering securities across asset classes. Supporting comparative analysis between securities and tracking performance with ease and precision.
Legacy Mainframe Screens Create Friction in the Securities Inquiry Process
$32.7 Billion (2024)
Assets under management
8,000+
Internal associates
28+
Departments
200+
Mainframe screens
Context
Fidelity’s Internal Brokerage team managed trading and operations using legacy IBM 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.
Challenge
Over 8,000 associates across 28 departments are trapped in a difficult daily workflow, manually navigating outdated mainframe systems to perform basic securities inquiries. Entering identifiers by hand, juggling multiple screens, and cross-referencing complex codesets just to monitor asset performance. The experience also had to be customized to fit the needs of each department.
Business goals
Fidelity was focused on reducing operational costs and save millions by moving away from legacy mainframes to a modern accessible experience built on the cloud.
User goals
Streamlined securities inquiry that supports searching and filtering securities across asset classes. Supporting comparative analysis between securities and tracking performance with ease and precision.
Legacy Mainframe Screens Create Friction in the Securities Inquiry Process
$32.7 Billion (2024)
Assets under management
8,000+
Internal associates
28+
Departments
200+
Mainframe screens
Context
Fidelity’s Internal Brokerage team managed trading and operations using legacy IBM 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.
Challenge
Over 8,000 associates across 28 departments are trapped in a difficult daily workflow, manually navigating outdated mainframe systems to perform basic securities inquiries. Entering identifiers by hand, juggling multiple screens, and cross-referencing complex codesets just to monitor asset performance. The experience also had to be customized to fit the needs of each department.
Business goals
Fidelity was focused on reducing operational costs and save millions by moving away from legacy mainframes to a modern accessible experience built on the cloud.
User goals
Streamlined securities inquiry that supports searching and filtering securities across asset classes. Supporting comparative analysis between securities and tracking performance with ease and precision.
Securities Application to View and Compare Securities
Time and cost savings
Fidelity saved millions from deprecating mainframe screens and moving it to a consolidated cloud-based platform
Internal associates can view all securities data under a unified application instead of context-switching between applications.
Fidelity saved on training costs and employee turnover due to switching from a mainframe experience that requires a steep learning curve.
Ease of use
Associates claimed the new experience was faster, efficient and allowed for easy comparative analysis.
A modern web interface with the ability to customize workspaces and favorite frequently used security identifiers were appreciated. Previously, associates were bogged down by mainframe screens that were unintuitive and complex text-based interfaces.
Reusable components
A unified, brand-aligned design system ensured visual and functional consistency across the trading platform.
The design system helped in component reusability, and reduced technical debt.
The system also led to time and cost savings for design and development and acted as a single source of truth.
Securities Application to View and Compare Securities
Time and cost savings
Fidelity saved millions from deprecating mainframe screens and moving it to a consolidated cloud-based platform
Internal associates can view all securities data under a unified application instead of context-switching between applications.
Fidelity saved on training costs and employee turnover due to switching from a mainframe experience that requires a steep learning curve.
Ease of use
Associates claimed the new experience was faster, efficient and allowed for easy comparative analysis.
A modern web interface with the ability to customize workspaces and favorite frequently used security identifiers were appreciated. Previously, associates were bogged down by mainframe screens that were unintuitive and complex text-based interfaces.
Reusable components
A unified, brand-aligned design system ensured visual and functional consistency across the trading platform.
The design system helped in component reusability, and reduced technical debt.
The system also led to time and cost savings for design and development and acted as a single source of truth.
Securities Application to View and Compare Securities
Time and cost savings
Fidelity saved millions from deprecating mainframe screens and moving it to a consolidated cloud-based platform
Internal associates can view all securities data under a unified application instead of context-switching between applications.
Fidelity saved on training costs and employee turnover due to switching from a mainframe experience that requires a steep learning curve.
Ease of use
Associates claimed the new experience was faster, efficient and allowed for easy comparative analysis.
A modern web interface with the ability to customize workspaces and favorite frequently used security identifiers were appreciated. Previously, associates were bogged down by mainframe screens that were unintuitive and complex text-based interfaces.
Reusable components
A unified, brand-aligned design system ensured visual and functional consistency across the trading platform.
The design system helped in component reusability, and reduced technical debt.
The system also led to time and cost savings for design and development and acted as a single source of truth.
Intuitive Securities Search and Analysis
Searching and filtering
Securities search based on full or partial security identifier, description or asset class.
Advanced search and filtering by asset class levels, coupon type and interest rates.
Date filters for call, maturity and dated date.
Security details
Security details organized into sections that make sense to associates validated by research.
Analyze security details across predefined parameters like Asset classification or Price details.
Users can compare between securities.
Grid views
Security details employ grid views for further analysis.
Historical pricing changes on specific securities can be viewed as grids.
Support for Excel or .CSV export.
Customization
Custom workspaces to support specific departments.
Frequently searched securities available for quick access.
Favoriting fields that are critical to the tasks at hand.
Users can reorganize security details cards by priority.
Intuitive Securities Search and Analysis
Searching and filtering
Securities search based on full or partial security identifier, description or asset class.
Advanced search and filtering by asset class levels, coupon type and interest rates.
Date filters for call, maturity and dated date.
Security details
Security details organized into sections that make sense to associates validated by research.
Analyze security details across predefined parameters like Asset classification or Price details.
Users can compare between securities.
Grid views
Security details employ grid views for further analysis.
Historical pricing changes on specific securities can be viewed as grids.
Support for Excel or .CSV export.
Customization
Custom workspaces to support specific departments.
Frequently searched securities available for quick access.
Favoriting fields that are critical to the tasks at hand.
Users can reorganize security details cards by priority.
Intuitive Securities Search and Analysis
Searching and filtering
Securities search based on full or partial security identifier, description or asset class.
Advanced search and filtering by asset class levels, coupon type and interest rates.
Date filters for call, maturity and dated date.
Security details
Security details organized into sections that make sense to associates validated by research.
Analyze security details across predefined parameters like Asset classification or Price details.
Users can compare between securities.
Grid views
Security details employ grid views for further analysis.
Historical pricing changes on specific securities can be viewed as grids.
Support for Excel or .CSV export.
Customization
Custom workspaces to support specific departments.
Frequently searched securities available for quick access.
Favoriting fields that are critical to the tasks at hand.
Users can reorganize security details cards by priority.
Alpha and Beta Releases Within 2 Years
Discovery
User interviews
Workflow analysis
Surveys
Data mapping
Requirements gathering
Feature prioritization
Design
Wireframes
High-fidelity design
Prototypes
Presentations
User testing
Delivery
Design system
Documentation
Annotations
Visual quality assurance
Alpha and Beta Releases Within 2 Years
Discovery
User interviews
Workflow analysis
Surveys
Data mapping
Requirements gathering
Feature prioritization
Design
Wireframes
High-fidelity design
Prototypes
Presentations
User testing
Delivery
Design system
Documentation
Annotations
Visual quality assurance
Alpha and Beta Releases Within 2 Years
Discovery
User interviews
Workflow analysis
Surveys
Data mapping
Requirements gathering
Feature prioritization
Design
Wireframes
High-fidelity design
Prototypes
Presentations
User testing
Delivery
Design system
Documentation
Annotations
Visual quality assurance
Analyze Mainframe Usage of 28 Departments
Activities
Audit
Workflow analysis
Surveys
Requirements gathering
Example of a mainframe screen
Audit
Research revealed that call center agents have to use three disjointed legacy applications to complete enrollments. While on the phone, they had to switch between them to view Benefit Recipients, Rep payees and manage benefits. The agents also had to manually copy and paste data between applications. This led to decision fatigue from frequent context-switching, increased case handling time and scope for human error.
Workflow analysis
Research began with user interviews involving internal associates from 28 departments. The goal was to understand how they access securities data, identify their tools, map workflows, document key mainframe fields required for task completion, and gather insights on pain points and feature requests.
Example of a workflow diagram by department
Surveys to rank filters
Surveys
With a wide user base spanning 28 departments, I launched surveys to capture key insights. This ranged from feature wishlists to search and filtering needs. The results made it clear that workspaces had to be customizable to align with each department’s daily tasks.
"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 (Client Experience)
Personas
Fidelity Internal Trading Departments
Over 28 internal trading departments previously operated on legacy mainframe systems. These departments need a modern, unified trading application to streamline their daily operations and improve efficiency. Key departments include Operations, Mutual Funds, Client Experience, Equities, Margin and others.
Requirements
Advanced securities search and filtering.
Comprehensive securities details view.
Contextual security comparison tools.
Role-based view and customization.
Key insights
Customization is key
Department operates with unique workflows and relies on specific fields essential to their daily tasks.
Recognition over recall
Simple, clutter free UIs with recognizable patterns would help users execute quickly.
Tools to aid analysis
Workforces that aid analysis between equities and provide a holistic picture of performance.
Analyze Mainframe Usage of 28 Departments
Activities
Audit
Workflow analysis
Surveys
Requirements gathering
Example of a mainframe screen
Audit
Research revealed that call center agents have to use three disjointed legacy applications to complete enrollments. While on the phone, they had to switch between them to view Benefit Recipients, Rep payees and manage benefits. The agents also had to manually copy and paste data between applications. This led to decision fatigue from frequent context-switching, increased case handling time and scope for human error.
Workflow analysis
Research began with user interviews involving internal associates from 28 departments. The goal was to understand how they access securities data, identify their tools, map workflows, document key mainframe fields required for task completion, and gather insights on pain points and feature requests.
Example of a workflow diagram by department
Surveys to rank filters
Surveys
With a wide user base spanning 28 departments, I launched surveys to capture key insights. This ranged from feature wishlists to search and filtering needs. The results made it clear that workspaces had to be customizable to align with each department’s daily tasks.
"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 (Client Experience)
Personas
Fidelity Internal Trading Departments
Over 28 internal trading departments previously operated on legacy mainframe systems. These departments need a modern, unified trading application to streamline their daily operations and improve efficiency. Key departments include Operations, Mutual Funds, Client Experience, Equities, Margin and others.
Requirements
Advanced securities search and filtering.
Comprehensive securities details view.
Contextual security comparison tools.
Role-based view and customization.
Key insights
Customization is key
Department operates with unique workflows and relies on specific fields essential to their daily tasks.
Recognition over recall
Simple, clutter free UIs with recognizable patterns would help users execute quickly.
Tools to aid analysis
Workforces that aid analysis between equities and provide a holistic picture of performance.
Analyze Mainframe Usage of 28 Departments
Activities
Audit
Workflow analysis
Surveys
Requirements gathering
Example of a mainframe screen
Audit
Research revealed that call center agents have to use three disjointed legacy applications to complete enrollments. While on the phone, they had to switch between them to view Benefit Recipients, Rep payees and manage benefits. The agents also had to manually copy and paste data between applications. This led to decision fatigue from frequent context-switching, increased case handling time and scope for human error.
Workflow analysis
Research began with user interviews involving internal associates from 28 departments. The goal was to understand how they access securities data, identify their tools, map workflows, document key mainframe fields required for task completion, and gather insights on pain points and feature requests.
Example of a workflow diagram by department
Surveys to rank filters
Surveys
With a wide user base spanning 28 departments, I launched surveys to capture key insights. This ranged from feature wishlists to search and filtering needs. The results made it clear that workspaces had to be customizable to align with each department’s daily tasks.
"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 (Client Experience)
Personas
Fidelity Internal Trading Departments
Over 28 internal trading departments previously operated on legacy mainframe systems. These departments need a modern, unified trading application to streamline their daily operations and improve efficiency. Key departments include Operations, Mutual Funds, Client Experience, Equities, Margin and others.
Requirements
Advanced securities search and filtering.
Comprehensive securities details view.
Contextual security comparison tools.
Role-based view and customization.
Key insights
Customization is key
Department operates with unique workflows and relies on specific fields essential to their daily tasks.
Recognition over recall
Simple, clutter free UIs with recognizable patterns would help users execute quickly.
Tools to aid analysis
Workforces that aid analysis between equities and provide a holistic picture of performance.
2 Releases in 2 Years While Migrating to a New Design System
Activities
User flows
Wireframes
Mockups
Prototypes
Design system
Presentations
User flow diagrams for securities
User flows
User flow diagrams were drafted to gain product alignment across the Product, Business, and Development teams.
Information architecture
Initiatives to define the IA for the platform navigation were done based on secondary research and needs of specific departments.
Navigation- information architecture
Security details early wireframe
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.
High-fidelity design- alpha release
High-fidelity screens were created foe key screens based on generic styled Bootstrap components.
Security details- High-fidelity design for the first release
End-to-end experience prototype
High-fidelity design- beta release
The 2nd release leveraged a Fidelity brand-aligned design system. Updates were made to the data structure and UI layouts.
Prototypes, usability studies and surveys
Monthly prototypes showcased work in progress prototypes to internal associates for early feedback and revisions. Usability studies and surveys ensured that end users were instrumental in shaping product vision.
Figma prototype
2 Releases in 2 Years While Migrating to a New Design System
Activities
User flows
Wireframes
Mockups
Prototypes
Design system
Presentations
User flow diagrams for securities
User flows
User flow diagrams were drafted to gain product alignment across the Product, Business, and Development teams.
Information architecture
Initiatives to define the IA for the platform navigation were done based on secondary research and needs of specific departments.
Navigation- information architecture
Security details early wireframe
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.
High-fidelity design- alpha release
High-fidelity screens were created foe key screens based on generic styled Bootstrap components.
Security details- High-fidelity design for the first release
End-to-end experience prototype
High-fidelity design- beta release
The 2nd release leveraged a Fidelity brand-aligned design system. Updates were made to the data structure and UI layouts.
Prototypes, usability studies and surveys
Monthly prototypes showcased work in progress prototypes to internal associates for early feedback and revisions. Usability studies and surveys ensured that end users were instrumental in shaping product vision.
Figma prototype
2 Releases in 2 Years While Migrating to a New Design System
Activities
User flows
Wireframes
Mockups
Prototypes
Design system
Presentations
User flow diagrams for securities
User flows
User flow diagrams were drafted to gain product alignment across the Product, Business, and Development teams.
Information architecture
Initiatives to define the IA for the platform navigation were done based on secondary research and needs of specific departments.
Navigation- information architecture
Security details early wireframe
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.
High-fidelity design- alpha release
High-fidelity screens were created foe key screens based on generic styled Bootstrap components.
Security details- High-fidelity design for the first release
End-to-end experience prototype
High-fidelity design- beta release
The 2nd release leveraged a Fidelity brand-aligned design system. Updates were made to the data structure and UI layouts.
Prototypes, usability studies and surveys
Monthly prototypes showcased work in progress prototypes to internal associates for early feedback and revisions. Usability studies and surveys ensured that end users were instrumental in shaping product vision.
Figma prototype
Design System Assets, Annotations and QA
Activities
Design system assets
Documentation
Annotations
Visual quality assurance
Color variables
Foundational Tokens
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 variables.
Components
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.
Button component
QA notes
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
Design System Assets, Annotations and QA
Activities
Design system assets
Documentation
Annotations
Visual quality assurance
Color variables
Foundational Tokens
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 variables.
Components
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.
Button component
QA notes
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
Design System Assets, Annotations and QA
Activities
Design system assets
Documentation
Annotations
Visual quality assurance
Color variables
Foundational Tokens
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 variables.
Components
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.
Button component
QA notes
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
Supporting Applications for the Trading Platform
Notes module- Design, documentation and prototype
Notes module
A reusable notes module for trading associates to communicate with each other and write notes relating to trades.
Mutual fund break management
Dashboard design for analyzing automated and manual Mutual Fund transfers.
Mutual fund break management dashboard High-fidelity design and flows
Cancel correct rebill- High-fidelity design and flows
Cancel correct rebill
Dashboard to view, modify and cancel trades placed by associates based on user entitlements.
Reference
Supporting Applications for the Trading Platform
Notes module- Design, documentation and prototype
Notes module
A reusable notes module for trading associates to communicate with each other and write notes relating to trades.
Mutual fund break management
Dashboard design for analyzing automated and manual Mutual Fund transfers.
Mutual fund break management dashboard High-fidelity design and flows
Cancel correct rebill- High-fidelity design and flows
Cancel correct rebill
Dashboard to view, modify and cancel trades placed by associates based on user entitlements.
Reference
Supporting Applications for the Trading Platform
Notes module- Design, documentation and prototype
Notes module
A reusable notes module for trading associates to communicate with each other and write notes relating to trades.
Mutual fund break management
Dashboard design for analyzing automated and manual Mutual Fund transfers.
Mutual fund break management dashboard High-fidelity design and flows
Cancel correct rebill- High-fidelity design and flows
Cancel correct rebill
Dashboard to view, modify and cancel trades placed by associates based on user entitlements.
