Goal: To redesign a Futures & Options Order Management System focused on new approaches, efficiency gains, and the removal of 3rd-party providers while enhancing the trading platform UI design system.
Role:
Design Lead (Solo Designer)
Business Impact:
– Re-imagined desktop trading application
– More efficient platform functionality
– Reduce Third-Party Applications
– Higher-order pattern library for trading platforms as by Product
– Other equities applications adopted the technology
Company:
Tier 1 Bank (In House)
Skills:
– Research
– UX/UI
– Design Systems
– Client Engagement
Timeframe:
2 Years
Project Overview
Context and Challenge: For the Futures & Options Trading Platform, the main challenges included aligning the C-based system with the web-based UI Toolkit, addressing inefficiencies in order management and market data, reducing reliance on third-party applications, and streamlining other repetitive tasks to enhance trader satisfaction. On the back of this work, we needed to build a higher-order Markets Toolkit to help the initial trading platform work, as well as provide a system for other asset class dev teams.
Approach: My role as the lead designer involved deeply understanding trader needs through direct interviews, simplifying use cases, and standardizing processes for a more intuitive trading experience. The project strategy included assimilating best practices from existing third-party platforms into our proprietary system and developing the Markets Toolkit (MTK). Continuous user testing and feedback were integral to align the design with real-world trading scenarios.
Outcome: The successful overhaul of the trading systems significantly improved trader satisfaction and operational efficiency. The launch of the Markets Toolkit marked a pivotal enhancement in the bank’s trading infrastructure, leading to faster developer onboarding and widespread adoption across different asset classes. This project also broadened the stakeholders’ influence within the Equities group, highlighting the strategic impact of our design and research initiatives on the organization’s broader goals.
Successes and Challenges
Rebuild Desktop Platform with Web Technologies
What kicked off the book of work was a small order ticket widget (“Block Trade”). The goal was to build with web technologies and utilize the JPM UI Toolkit instead of the C Sharp platform.
Growing a Single Component into a Full App Rebuild
The web-based “Block Trade” ticket was such a hit that we got budget to enhance and reimagine the entire Futures & Options OMS.
Reduce Third-Party Products
We built from the ground-up solutions within the Futures & Options OMS that replaced bespoke exchange-based applications. This included complex “strategy” trading widgets and market data tools like Neovest.
Automate Repetitive Tasks
For example, we provided solutions to auto-update market data for futures & options as well as made it easy to fill out order tickets with a “favorites” component.
Shop New Build Processes to Other Asset Class Teams
As we were building the Futures & Options OMS, we thought that many other asset class product teams could use what we were building, so I went and interviewed about 10 teams to learn what they were doing and to see how they could leverage our work. The response was enthusiastic with many teams aligning themselves with us as we built out a centralized trading toolkit.
Create Higher-Order Component Library
With the assset class teams onboard, a central team of 15 developers was assigned to build the “Markets Toolkit”. I would be the designer working with them. This initially created friction with the JPM UI Toolkit team, so we had to do a lot of persuasion that this is an enhancement targeted for specific use cases and would not encroach upon the UI Toolkit team’s remit.
Expand the Remit of Key Stakeholder
With the good work we did on the Futures & Options OMS and Markets Toolkit, the key stakeholder’s remit expanded to include much of the Equities group’s products. Towards the end of my time at JP Morgan, I worked alongside this stakeholder on a couple equities platforms.
Some Key Results
- F&O OMS: Simplified workflows reduced some trader tasks by as much as 25%
- Markets Toolkit: 215 Engineers; 10 Components; 300+ Users; 36 Apps; 180 Contributions
Futures & Options OMS + Markets Toolkit
- Full Redesign of the Futures & Options Order Management System (F&O OMS)
- A Markets Toolkit UI Platform grew out of this project
- The success of this project won more Equities engagements
Project Progression
- This diagram shows the progress from the initial block ticket utilizing the original toolkit, to creating a higher-order Market Toolkit, and then to building the current F&O OMS.
Planning & User Research
- Understanding the investment trade lifestyle
- Understanding on how Futures & Options work
- Planning for what features to build and rollout
- Userflows for features across the platform
Wireframes and Early Concepts
- Challenge: Filtering and Blotter customization
- Challenge: Working with a non-trading specific UI toolkit
- Ideation Concepts for Tickets
- Transforming a single feature to a full platform re-design
F&O Project “Phase 1” Outcome (Built with Initial JPM Design System)
- Started as a basic Feature Project (Block Trade)
- Extended to F&O OMS Full Project
- Utilized Corporate UI Toolkit, which was insufficient for trading use cases
Interlude: Launching Markets Toolkit Initiative
“Markets Toolkit” Planning
- Once the F&O OMS project was underway, we began to develop the project so that it might be used by other product teams.
- This image shows the documentation we created to prepare for the project.
- Some of the artifacts were a team organization diagram, core component creation process diagram, current component inventory, and a decision tree to help understand if a component should be built or not.
“Markets Toolkit” Deliverables (New Basis for OMS)
- This toolkit was derived from the F&O OMS work
- The goal was the speed up the delivery of trading platforms across the organization.
- I spent half of my time for 9 months getting this project off the ground from a design stance
- It was built on top of the Corporate UI Toolkit
- It was a Higher Order Toolkit for trading use cases
Pivot Back to Futures & Options: Applying the Markets Toolkit and Full Rollout
The Futures & Options OMS built with Markets Toolkit
- Functional rebuild of full platform
Automation: Market Data (Passive Instrument Updates)
- Usage of Markets Toolkit Blotter
- Watchlists help a trader know the value of a tradable instrument. F&O instruments expire so a lot of maintenance is required to keep watchlist up to date
- Primary goal was to have expired F&O instruments roll off the Watchlists and be replaced with current instruments without trader input.
- Additionally, once a watchlist is constructed we made it valid for both futures and options instruments. Typically, futures and options have separate market data features that are visually distinct and function differently in terms of maintenance and setup.
Automation: Ticket Entry (Reduction of Trade Risk)
- Streamlined the ticket input experience
- Reduced visual footprint so traders could also monitor their dashboards.
- Leveraged “Favorites” feature to speed up entry and reduce typing errors.
UI Standardization: Ticket System
- Once tickets were produced for regular order entry and block orders, we expanded the framework to handle more complex tickets.
- The F&O Ticket System was both inspired and helped expand the Markets Toolkit ticket framework.
3rd-Party App Replacement: User-Defined Strategies
- Futures will trade on only one exchange. For example, US treasuries are traded on CME
- Each exchange has its own bespoke trading UI.
- Exchanges allow trading of strategies. For example, Buy Future 1; Sell Future 2, Buy Future 3
- The goal of this feature was to build a uniform strategy builder through the exchanges’ APIs
Workflow Example
- Sample workflow for managing user-defined strategies and then creating an order.
Various Component Work
- Various components and specifications for the F&O OMS
Light Theme
- Examples of light theme app features