top of page

Project

DART money fx

Role

Product designer  / Project manager

Duration

2022-24

I was brought in as a Product Designer and Project Manager in June 2022. My task was to create the front end of the new system and enhance the trader experience. The aim was to minimize clicks and foster innovation to ensure the software operates seamlessly all while i manage the flow of the project accordingly.

The process for this project includes the following 

Research

Context study

Pain points

Use case

Requirement gatherings

Kano model

Trader journey map

In this stage, we engaged with brokers and traders on the trading floor, gathering extensive data and requirements. This process was essential to ensure accurate documentation and prevent future miscommunication.

Analysis

Problem statement

Feature prioritization

Trader journey flow

After gathering the necessary data, we analysed and refined the brokers' needs and wants. We then began developing the Business Requirements Document (BRD) and System Requirements Document (SRD).

Design

Overview

Design system

Trader journey flow

With a clear understanding of the requirements, we created wireframes and prototypes, focusing on intuitive user interfaces and seamless user experiences. We also developed a comprehensive design system to ensure consistency across the platform.

Implementation

Tools

Technical specifications

AGILE methodology

Using a mixture of SDLC and Agile methodology, we broke the project into sprints for iterative development. Figma, Git, and Google Suites managed tasks. We integrated web services and ensured secure connections with JWT.

Testing & quality assurance

Test plan

User acceptance testing

User Acceptance Testing (UAT) was conducted to ensure the system met user expectations. A detailed test plan guided the process, identifying and resolving issues to guarantee a high-quality product.

Project management

Timeline

Task management

Documents

The project followed a clear timeline with key milestones. Task management was organized using Figma, Git, and Google Suites to ensure smooth progress. Comprehensive documentation was maintained throughout the project.

MoneyFX 12-07.png

Diving into this project alongside my father, who was a broker, greatly deepened my understanding of the financial market. However, adapting to the evolving practices of the new generation of brokers presented challenges. The client’s broking house consists of 15 brokers across 5 different desks, each specializing in different market sectors.

​

Upon arrival, I noticed the sophisticated ecosystem they had built, cleverly integrating Microsoft Office and various third-party apps for seamless communication with brokers and banks. Surprisingly, they still use landlines in 2022. While it may seem old-fashioned, they believe it helps speed up deals, despite the potential for miscommunication. That's where we plan to address the pain points and tailor the new system to accommodate them.

A detailed summaries of the pain points were done after we were given the requirements from the brokers. 

No data analysis

There is no machine learning or AI to analyze the data. All data is stored on a hard drive in the server room.

Server graveyard

The servers run continuously to store data, but have no other function. The only software in use is a database system for managing deal records.

"Putting deals in is hard!"

The brokers struggle to input deal values into an ever-expanding Excel sheet, which adds hundreds of columns daily.

Messy deal queue

The broking house lacks a queue system to prioritize incoming deals, making it difficult to identify which deals are most important.

Unable to locate deals

The brokers find it hard to organise the deals with all the excel sheet overlap each other

No framework

A makeshift system was established by the brokers to handle the deals. The framework is unfeasible and messy. 

Data to nowhere

Thousands of data flowing into their servers everyday with no proper organizational method

“This broking house does not have a proper system to manage the dealings and the data management that comes after that.”

I summarised the pain points that were gathered and came to a conclusion for the Problem Statement with few of the brokers

​

From here it was easier to chart and identify the issue that was sitting in front of us. The challenge we would face is how should we design a system that is farmiliar to the traders while we innovate to make their tradings more seamless. I began to sketch a Journey Map to have a broader picture of the issues

A rough sketch of how their current system’s look and feel

The current system our clients are using feels a bit outdated, to say the least. The interface isn’t user-friendly, and simple tasks end up taking way longer than they should. 

​

It’s pretty frustrating for traders trying to move quickly—things that should be smooth are, instead, clunky and full of extra steps. Navigating the platform can feel like finding your way through a maze, leaving traders wasting time on workarounds and slowing down their momentum.

Asset 6@4x.png
Asset 16@4x.png
image.png

I’ve drawn up a Trader Journey Map that resembles a Customer Journey Map to help chart out what the traders need for this system after analysing all of the pain points. I needed a clearer picture on the challenges that i’ll have to endure down the road.

Stage

Trader's actions

Trader's feelings

Solution

Requests

Live on-demand tradings 

Traders request access to real-time trading features to execute trades swiftly and accurately.

Reduced Manual Data Entry

Traders express a need for automation to minimize time spent on repetitive tasks.

Doubtful of New System

Traders may feel uncertain about the effectiveness or reliability of a new trading system.

Comfort Zone

Tend to stick with familiar processes and systems, leading to reluctance in adopting new tools.

On-Demand Trading Features

Implement a real-time trading platform for instant trade execution, improving market responsiveness.

Automate Data Entry Processes

Tend to stick with familiar processes and systems, leading to reluctance in adopting new tools.

Research

Gather Market Data

Traders actively seek and collect data from various sources to inform their trading decisions.

Evaluate Trading Platforms

Traders compare different trading platforms and tools to find the best fit for their needs.

Curious

Traders are eager to explore new tools and data sources to improve their trading decisions.

Overwhelmed

The vast data and complex tools can be overwhelming, making it hard to analyze relevant information.

need content

Traders may feel uncertain about the effectiveness or reliability of a new trading system.

Comfort Zone

Tend to stick with familiar processes and systems, leading to reluctance in adopting new tools.

Data entry

Input Trade Details

Traders manually enter details about trades, including transaction data, pricing etc

Update Market Information

Traders input and update relevant market data, such as stock and traders info...

Frustrated

Manual data entry can be tedious and error-prone, leading to frustration and a sense of wasted effort.

Anxious

There may be anxiety about entering accurate data and ensuring that all relevant details are correctly recorded.

Develop Data Validation Tools

Implement real-time validation tools to reduce errors during data entry.

Simplify Input Forms

Design intuitive forms that require minimal effort from traders while ensuring accuracy.

Analysis

Analyze Trade Performance

Traders review and analyze their trade history to assess performance and identify trends.

Conduct Market Research

Traders perform in-depth analysis of market conditions, trends, and forecasts to guide future trades.

Confident

Successful analysis and insights can boost traders' confidence in their trading strategies and decisions.

Stressed

The pressure to make data-driven decisions can cause stress, especially in volatile markets.

Integrate Advanced Analytics

Provide easy access to analytics tools that help traders interpret data efficiently.

Offer Customizable Dashboards

Allow traders to customize dashboards based on their specific analytical needs.

Experience

Monitor Live Trades

Traders observe and manage ongoing trades in real time, adjusting strategies as necessary.

Interact with Support

Traders may contact support for assistance with system issues, trading queries, or technical problems.

Satisfied

Efficient and effective trading experiences can lead to a sense of satisfaction and accomplishment.

Disappointed

Issues with current system performance or trading outcomes can result in disappointment or frustration.

Ensure Consistent Performance

Optimize the system for stability and speed, delivering a smooth trading experience.

Enhance User Feedback Loops

Create mechanisms for traders to provide feedback directly within the platform

Some components were designed based on brokers' requests to streamline our workflow and simplify system design.

With the Trader Journey Map providing a clear view of user interactions and emotions, we now move on to the Use Case analysis. This will dive into the specific scenarios where brokers engage with the system, ensuring that every user need is effectively addressed.

Use cases

Based on our comprehensive data analysis and conclusions, I have curated several use cases that highlight typical trader interactions and system functionalities.

Asset 20@4x.png

“We’re not sure where the data’s are stored”

Abundance of data are being kept in their offline servers in the backroom.

image.png

“There’s people screaming all the time!”

The trading room is open, deals are shouted, and it raises anxiety for some traders.

“I need to check old logs but they’re un-organised”

Abundance of data are being kept in their offline servers in the backroom.

image.png

“What do we do with these data?”

The data that’s in their backrooms are not filed properly in folders as they should.

The data we’ve gathered from crafting the Traders Journey and Use Case needed to be connected and simplified even more thus the Kano model

Kano model helped to determine which features of the system are essential to the traders and which ones will provide an added advantage. With this, i focused on delivering the best user experience as possible

Executive summary

This broking house is in need of a new system to handle the deals and analyse the data afterward to see patterns in the dealings as well as organising the history of the deals in the system. The details will be in the Analysis section.

image.png

Statement

After countless back and forth, we sat down and analised which feature needed to be prioratized with the these main principle that we have concluded from talking to the clients. 

Second nature

Our system must be intuitive for brokers, with natural interactions and clear, simple data presentation.

Structured

The system's structure must be robust and functional for all desks in the broking house.

Ease of access

We used our web services API to create a fully web-based system, enabling brokers to operate globally without an in-house server.

The core principle laid the foundation for how the system should function, shaping both user experience and overall system architecture. Following this, the technical specifications break down the precise requirements and technical details to bring the vision to life.

Technical specs

The technical specifications outline the foundational elements of the DART Trading System, including the technology stack, tools, and security measures. These specifications ensure the platform's robustness, efficiency, and security, facilitating a seamless trading experience for users.

Platform architecture

Built using a microservices architecture, allowing for modular development and easy scalability.

Security

Implements JWT for secure user authentication and uses SSL/TLS for data encryption.

Hosting &
deployment

Hosted on WWS with CI/CD pipelines, ensuring a robust and scalable deployment process.

Performance
optimization

Employs caching and load balancing to maintain fast response times and efficient resource use.

Integration

Seamlessly integrates with Bloomberg, Refinitiv, and TPI for real-time data exchange.

With the technical requirements now clearly defined, the next step involves determining which features should take precedence. Feature prioritization ensures the most impactful functionalities are implemented first, aligning with the project's strategic goals.

Feature prioritization

Feature prioritization involves evaluating and ranking the most critical functionalities of the system to ensure a focused development approach. By prioritizing key features like Deal trade and history, Account management, and Market analysis, we ensure that the system addresses the most pressing needs of traders and administrators first, enhancing overall user experience and efficiency.

Account management

Enables administrators to efficiently create and manage broker accounts, ensuring proper access control and security settings. This feature simplifies the setup process while maintaining system integrity.

Deal trade & history

Provides traders with easy access to their trade history, allowing for quick reviews and performance analysis. It includes filtering options to help traders identify patterns and optimize future trades.

Asset 27@4x.png
Asset 28@4x.png

Assigned desk

Assigns traders to specific desks, improving organization and monitoring. It ensures traders are focused on the right markets and facilitates team collaboration.

Market analysis

Delivers real-time insights and data to support traders in making informed decisions. It integrates market indicators and news feeds to help traders stay ahead of trends.

Soft onboarding

Gently introduces new users to the trading system with guided tutorials and tooltips. This feature helps users quickly acclimate and become proficient.

After establishing the hierarchy of features through careful prioritization, we turn our attention to the Journey Map UX Flow. This next step outlines the user interactions, ensuring the prioritized features align seamlessly with the trader's experience.

Journey map ux flow

Based on the feature narative, we began to construct the user experience flow, taking into consideration the following: 

Overview

This section focuses on key visual elements like typography, color schemes, and logo design choices. These components were carefully selected to support brand recognition and create a consistent, user-friendly experience across all platforms.

I was tasked with designing and formulating the logo for the DART system, resulting in a clean and modern design. The minimalist style emphasizes reliability and ease of use, representing the system's focus on efficient and clear communication. The design features a sleek 'D' shape that also hints at the tail of a dart.

Logo

over3@4x.png

Design system

Disclaimer

This section focuses on key visual elements like typography, color schemes, and logo design choices. These components were carefully selected to support brand recognition and create a consistent, user-friendly experience across all platforms.

​Apex Design System keeps things sleek and consistent, giving our product a solid look and feel. It’s all about making design and development work together seamlessly.

Colour palette

The color palette brings together a set of hues that make the interface feel clean and easy on the eyes. Each color was chosen to strike a good balance between functionality and a smooth, professional look. Below is an example of how it looks like with the guidence of Material IO’s palette generator.

Other palettes

While the displayed palette covers the core system colors, there are additional palettes that complement different design scenarios. Rather than overcrowd this section, we’ve chosen to keep it concise, focusing on the primary shades that define the overall aesthetic.

Token / Variables

This section covers the different token / variables used within the design system to maintain consistency. These include color, typography, spacing, and other elements that can be adjusted globally to quickly adapt designs across multiple components.

Components

Components are pre-designed UI elements that can be reused across multiple screens, saving time and maintaining design consistency. They’re flexible and adaptable, allowing for changes in a single instance to update all occurrences, making the design process more efficient and scalable.

Wireframe

Laying it all out

This section highlights the initial sketch and brainstorming phase, where ideas were explored through low-fidelity wireframes. These rough drafts helped map out the core functionalities and layout of the project, ensuring a solid foundation for the next design stages.

A simple mock layout showcasing our wireframe brainstorming process, designed to align with brokers' needs.

Many hours were spent sketching out the system on this whiteboard refining all the flows

Wireframes

In this stage, wireframes were developed to create a more structured and detailed representation of the layout. These blueprints refined the design and functionality, guiding the user experience and setting the foundation for further development.

Development

During the development phase, we combined AGILE methodologies with the Software Development Life Cycle (SDLC) approach to ensure a flexible and comprehensive build process. Utilizing tools like Figma and Google Suites, we efficiently collaborated and iterated on the platform's design and functionality.

With the development cycle in place, we began implementing key elements to build the system. Below are the main actions I took to keep the project flow as efficient as possible.

image.png

Collaborative 
feedback loops

I worked closely with stakeholders, gathering feedback and updating the project as needed. All updates were tracked in the Master Overview, ensuring clear communication and alignment throughout the process.

Design Direction

I led the design initiatives, including building a components library, designing the logo, and establishing the design system. These steps ensured consistency and improved communication between design and development.

Documentation

Throughout the project, I was responsible for creating detailed documentation, including the Business Requirements Document (BRD), User Acceptance Testing (UAT) scripts, Technical Specifications, and the Sign-off page. These ensured that every aspect of the project was tracked and validated.

Testing Oversight

I played an active role in overseeing testing phases, ensuring that all test cases were completed as per the specifications and that the product met the required standards before final approval.

Test plan

The test plan outlines the strategy, objectives, resources, and schedule for the UAT. It ensures that all aspects of the system are tested thoroughly to meet user expectations and business requirements. 

Objectives

Ensure the system meets all user requirements and is free of severe bugs.

Scope

Includes features and components outlined in the BRD and SRD.

Schedule

The UAT phase will be conducted over a 3-week period. This ensures a thorough examination of all system functionalities and allows sufficient time to identify and resolve any issues.

Resources

Will include end users (traders and administrators) and technical staff. They will use standard documentation, test cases, and scripts provided for thorough testing.

Test environment

A dedicated testing environment will be set up to closely replicate the real-world trading conditions. This environment will include all necessary hardware and software components, mirroring the production setup to ensure accurate and reliable testing outcomes.

Asset 29@4x.png

User acceptence test

We conducted the User Acceptance Testing (UAT) over the course of three weeks to ensure the system was developed with high quality and free of severe bugs. The UAT document, crafted over five months, meticulously included every feature from the BRD and key components of the SRD, ensuring comprehensive testing and alignment with project objectives.

Overall tests

Detailed Test Scripts

Detailed test scripts provide step-by-step instructions for testers to follow, ensuring consistent and thorough testing. Below is a example of said script :

Asset 5@4x.png

Gives an overview of the specific functionality being tested.

Asset 5@4x.png

Visual aid to guide the tester through the process.

Asset 5_4x_edited.png

Outlines the initial actions to kick off the test procedure.

Asset 5_4x_edited.png

Space for additional notes, observations, or comments from the tester.

Asset 5_4x_edited.png

Header with all of the elements that includes the Test ID that ties in with the index. The SRS or SRD ID’s that relates to the test. Procedure, results, and tester are as usual in the UAT

Asset 29@4x.png

Results & Feedback

During UAT, testers provided valuable feedback and identified key issues that were promptly addressed. The results demonstrated the system's readiness for deployment, with significant improvements made based on user input.

UAT analysis

Overview of testing results

The UAT phase successfully identified several critical issues, which were promptly resolved to ensure the system's functionality and reliability.

User feedback

The UAT phase successfully identified several critical issues, which were promptly resolved to ensure the system's functionality and reliability.

Bug fixes and improvements

Testers praised the system's user-friendly interface and efficient performance, noting significant improvements over the previous version.

Asset 37_4x.png

Signed, Sealed & Delivered

Building a Smarter Trading Experience: Lessons, Challenges, and Future Steps

This project set out to create a streamlined and efficient trading system, focusing on usability, performance, and scalability. Through structured research, design iterations, and a well-managed development process, we successfully built a system that meets both user and business needs.
​
Challenges like tight deadlines and evolving requirements were tackled through adaptive problem-solving, clear documentation, and collaboration. The Apex Design System played a crucial role in maintaining consistency across the platform.
​
The result is a trading system that enhances user experience, optimizes workflows, and sets a solid foundation for future improvements. Looking ahead, the insights gained from this project will shape future iterations and innovations in trading solutions.

Trading simplified

Clarity in Every Trade

We transformed the trading experience by cutting through the noise and simplifying decision-making. With a user-first approach, the system delivers critical data in a way that’s easy to understand and act on. No complexity, just clear, actionable insights.

Task management

Task management was key to keeping the project on schedule. We used agile methodologies combined with SDLC principles to prioritize and organize tasks into sprints. Figma, GitLab, and Google Suite were essential for collaboration, enabling real-time updates and adjustments throughout the process.

Segregation of Tasks

​My role

I led task management, ensuring the project stayed on track by prioritizing deliverables and coordinating with the team to meet deadlines.

Asset 27@4x.png
Asset 28@4x.png

Tools & 
techniques used

I used Figma for design, Git for version control, and Google Sheets for tracking progress, Trello for flow managementwhich kept our workflow smooth and transparent.

Milestones

We set a clear timeline and milestones from the beginning, adjusting as needed to overcome challenges and keep the project on track.

Challenges 
and solutions

While managing tasks had its challenges, we stayed adaptable and worked together to find solutions, keeping progress steady toward our goals.

Task Prioritization

I prioritized tasks based on their importance and assigned them to the right team members, allowing us to stay flexible and adjust quickly when needed.

Timeline

During UAT, testers provided valuable feedback and identified key issues that were promptly addressed. The results demonstrated the system's readiness for deployment, with significant improvements made based on user input.

delibg1_1@4x.png

Master overview

Regular updates were provided throughout the project's lifecycle, detailing progress, milestones, and adjustments. These updates ensured that all stakeholders were informed and aligned.

delibg3@4x.png

SRD

The SRD translated the business requirements into detailed technical specifications. It outlined the system's architecture, security protocols, data flow, and integration points, ensuring the technical team had a clear roadmap for development.

delibg5@4x.png

Figma Files

Design elements of the DART Trading System were created and refined using Figma. These files include wireframes, prototypes, and the final design system, providing a visual representation of the user interface and experience.

delibg2_1@4x.png

BRD

The BRD captured the essential requirements and objectives for the Trading System. It served as the foundation for system development, detailing both the functional and non-functional needs of brokers and traders.

delibg4@4x.png

UAT

The UAT phase involved thorough testing by end users to validate that the system met their needs. This process included detailed test scripts and scenarios, with results meticulously documented to confirm the system's readiness for deployment.

dede4_1_4x.png
dede2_1_4x.png
delibg6@4x.png

Test responses

Collected during the UAT, test responses documented user feedback, bug reports, and enhancement suggestions. This data was crucial for refining the system and ensuring it met user expectations before the final rollout

Reflections

Challenges and Solutions

Throughout the project, we encountered several challenges, particularly in balancing the diverse needs of brokers and traders with the technical and security demands of the system. One significant challenge was integrating real-time trading functionalities while maintaining robust security protocols. This was addressed by implementing a flexible architecture and prioritizing clear communication across all teams.

Key learnings

A major takeaway from this project was the importance of iterative feedback loops. Engaging users early and often allowed us to adapt the system to better meet their needs. This project reinforced the value of agility in development, as well as the necessity of anticipating and addressing potential issues before they escalate.

Future enhancements

Potential improvements

Looking ahead, there are several areas where the system could be further refined. Enhancements in the user interface could improve ease of use, especially in terms of customization options for individual traders. Additionally, exploring more advanced data analytics features could provide users with deeper insights into their trading activities.

What’s next?

The next phase of development will focus on incorporating user feedback to fine-tune the system. Plans include implementing additional security measures, expanding integration with other financial platforms, and exploring the use of AI to further enhance trading strategies and user interface and experience.

...in retrospect

Reflecting on the development of the DART Trading System, the journey was marked by significant challenges and triumphs. From understanding the nuanced needs of brokers and traders to translating those requirements into a functional and intuitive system, the project demanded a careful balance of technical precision and user-centric design.

One of the key lessons learned was the importance of continuous communication with stakeholders. Regular feedback loops and iterative testing were crucial in aligning the system with the evolving needs of users. The project also underscored the value of flexibility, as unforeseen technical hurdles required quick adjustments and problem-solving.

While the system successfully met the primary objectives, there are always opportunities for improvement. Future iterations could focus on further streamlining the user experience and enhancing the system's scalability to accommodate a broader range of financial products and users.

Overall, this project provided invaluable insights into managing complex requirements, ensuring user satisfaction, and delivering a robust trading platform that aligns with the strategic goals of our client

To comply with my non-disclosure agreement, I’ve carefully omitted and anonymized confidential details in this case study. The information presented is entirely my work and doesn’t necessarily reflect DART’s official stance.

Thanks for reading.

I hope you enjoyed my case study!

If you have any questions, want to discuss new opportunities / side hustles, or simply want to say hi, feel free to drop me a line

Note: the work displayed belongs to respective company and me, the designer. Please refrain from downloading, copying, or sharing them with others.

Other works

A algorithmic based lead capturing system

Management, UX/UI design,
Design system

Crypto trading app with a wallet manager

Strategy, UX/UI design, Design system

Personal trainer tracking app

Strategy and UX/UI design

Loyalty app with a reward system

Strategy and UX/UI design

bottom of page