Back
FX Trading Support Tool
July 2023
Supporting tool for FX traders to project calculations for internal products. Project includes heavy data visualization such as charting and editable datatables. 70+ global daily users including five main user groups. Due to confidentiality, cannot share design.
Supporting tool for FX traders to project calculations for internal products. Project includes heavy data visualization such as charting and editable datatables. 70+ global daily users including five main user groups. Due to confidentiality, cannot share design.
Basics
Stakeholders | Quant analysts and traders |
|---|---|
Collaborate with | FE/BE developers and QA |
User Base | 70+ daily global users 3 different user groups |
Project Size | Medium size desktop app |
Project Type | Enterprise, desktop app, migration/overhaul from legacy to next gen application, data-heavy |
My Role | Lead/Sole UX developer ("unicorn") |
Context
Including problem statements below due to the size and complexity of the project
Migrating a legacy version of the application to a new application
Application for FX traders and quants (70+ global internal users)
Functionalities include calculating trading curves and rates, visualizing long-term values, client pricing service, and publishing different prices
No previous UX involvement in the team prior to my start. This includes lack of support from both engineering and stakeholders (see Integrating UX in a Non-UX Team for more)
Not following UX best practices such as error feedback to user upon data submission
Highlights
Built new relationship with stakeholders and engineers to put UX at the forefront and invest in UX overhaul
Researched & designed five pages as a lead and sole designer, responsible from beginning to end including dev handover and post-production feedback from users
Research includes user interviews and ethnographic research
Design includes interactive data-table, charts,
Developed the designed products in ReactTS into production
Users' productivity increased (more on below)
Details
Summarized details of two of five modules designed.
*Please bear in mind that names of the modules and exact functionalities/problem statements cannot be shared due to confidentiality reasons.
Module #1: Cashflow Management
Discover - identifying and researching the problem
Problem Statements
Due to various reasons*, the system may have discrepancy in trade records, where users had to manually trigger a script to send themselves email alerts to track the records as a makeshift solution. When the discrepancies appear in the system, the users would then look for the gaps and manually input them by cross-checking their email alerts and what the system has.
User personas*
Define - understanding user's needs
Desired user flow*
"How Might We" exercise*
Design - wireframe and check-in with users/stakeholders*
Interactive datatable that is simple and easy to navigate
Table flags user when two records don't match and provide trade ID for further research for user to do external to the system
Quick add feature for users to enter the trading records that were missing
Extensive filters and sorting functionalities for quick look ups
Deliver - gather feedback and finalize design*
Further check-ins with users and iterate to finalize high-fidelity design
Using Figma to conduct usability testing with realistic prototype before delivery into production
After releasing, users' productivity increased by 33% as they no longer needed to go through email reports everyday to find missing trades
Module #2: Risk Management
Discover - identifying and researching the problem
Problem Statements
Existing method of controlling volume of trades was unintuitive (from users' feedback)
Unnatural layout composition (counterintuitive to user's natural flow and mental model)
Lack of labels and misplaced items
Usage of unconventional indications with ambiguous icons
Users need to navigate to various external systems to have a consolidated view of all risk management measures for the team
User personas*
Define - understanding user's needs
Desired user flow*
User interviews*
Discovered more on users' mental model for the job to be done
After making changes to the system, users were manually going to the database to ensure their changes were indeed submitted due to the lack of feedback on the UI
Design - wireframe and check-in with users/stakeholders*
Re-organized features as well as separating them out into tabs to give space for each job to be done
Re-labelled and removed ambiguous icons that were confusing to users
Clear indication of when risk measures were breached vs. what the threshold is
Added user input validation as well as measure to prevent incorrect data input to ensure transparent system feedback to users
Deliver - gather feedback and finalize design*
Further check-ins with users and iterate to finalize high-fidelity design
Using Figma to conduct usability testing with realistic prototype before delivery into production
After releasing, users' were finally able to control and measure risks in the team which led to 50% increase in speed of finishing their tasks
Basics
Stakeholders | Quant analysts and traders |
|---|---|
Collaborate with | FE/BE developers and QA |
User Base | 70+ daily global users 3 different user groups |
Project Size | Medium size desktop app |
Project Type | Enterprise, desktop app, migration/overhaul from legacy to next gen application, data-heavy |
My Role | Lead/Sole UX developer ("unicorn") |
Context
Including problem statements below due to the size and complexity of the project
Migrating a legacy version of the application to a new application
Application for FX traders and quants (70+ global internal users)
Functionalities include calculating trading curves and rates, visualizing long-term values, client pricing service, and publishing different prices
No previous UX involvement in the team prior to my start. This includes lack of support from both engineering and stakeholders (see Integrating UX in a Non-UX Team for more)
Not following UX best practices such as error feedback to user upon data submission
Highlights
Built new relationship with stakeholders and engineers to put UX at the forefront and invest in UX overhaul
Researched & designed five pages as a lead and sole designer, responsible from beginning to end including dev handover and post-production feedback from users
Research includes user interviews and ethnographic research
Design includes interactive data-table, charts,
Developed the designed products in ReactTS into production
Users' productivity increased (more on below)
Details
Summarized details of two of five modules designed.
*Please bear in mind that names of the modules and exact functionalities/problem statements cannot be shared due to confidentiality reasons.
Module #1: Cashflow Management
Discover - identifying and researching the problem
Problem Statements
Due to various reasons*, the system may have discrepancy in trade records, where users had to manually trigger a script to send themselves email alerts to track the records as a makeshift solution. When the discrepancies appear in the system, the users would then look for the gaps and manually input them by cross-checking their email alerts and what the system has.
User personas*
Define - understanding user's needs
Desired user flow*
"How Might We" exercise*
Design - wireframe and check-in with users/stakeholders*
Interactive datatable that is simple and easy to navigate
Table flags user when two records don't match and provide trade ID for further research for user to do external to the system
Quick add feature for users to enter the trading records that were missing
Extensive filters and sorting functionalities for quick look ups
Deliver - gather feedback and finalize design*
Further check-ins with users and iterate to finalize high-fidelity design
Using Figma to conduct usability testing with realistic prototype before delivery into production
After releasing, users' productivity increased by 33% as they no longer needed to go through email reports everyday to find missing trades
Module #2: Risk Management
Discover - identifying and researching the problem
Problem Statements
Existing method of controlling volume of trades was unintuitive (from users' feedback)
Unnatural layout composition (counterintuitive to user's natural flow and mental model)
Lack of labels and misplaced items
Usage of unconventional indications with ambiguous icons
Users need to navigate to various external systems to have a consolidated view of all risk management measures for the team
User personas*
Define - understanding user's needs
Desired user flow*
User interviews*
Discovered more on users' mental model for the job to be done
After making changes to the system, users were manually going to the database to ensure their changes were indeed submitted due to the lack of feedback on the UI
Design - wireframe and check-in with users/stakeholders*
Re-organized features as well as separating them out into tabs to give space for each job to be done
Re-labelled and removed ambiguous icons that were confusing to users
Clear indication of when risk measures were breached vs. what the threshold is
Added user input validation as well as measure to prevent incorrect data input to ensure transparent system feedback to users
Deliver - gather feedback and finalize design*
Further check-ins with users and iterate to finalize high-fidelity design
Using Figma to conduct usability testing with realistic prototype before delivery into production
After releasing, users' were finally able to control and measure risks in the team which led to 50% increase in speed of finishing their tasks