Scaling UX Governance Across Trading Platforms

  • +5% mobile trading volume uplift

  • ~9.7 years of cumulative design capacity optimised

  • 70% component complexity reduction during iteration

R O L E
Senior Product Designer

SCOPE
Execute (Rates & FX)

FOCUS
12 Asset Classes

ENVIRONMENT
High-regulation financial

The Environment

Execute had been operating for decades. The J.P. Morgan Design System had matured over six years. A recent migration from Sketch to Figma introduced structural inefficiencies.

Challenges included:

  • Non-adherence to Figma best practices

  • Bulky components averaging ~30 layers

  • Heavy file sizes are reducing performance

  • Broken or non-reusable component structures

  • Misalignment between design naming and Storybook

  • Poor file discoverability across large ecosystems

Problem Framing

The system worked — but at scale, inefficiencies compounded. I initiated a structured discovery workshop to align the team around a shared objective:

How might we create a reusable, scalable component ecosystem across 12 trading assets that accelerates delivery, improves discoverability, and supports long-term system maturity?

This reframed the issue from "tidying files" to improving enterprise delivery mechanics.

Discovery & Research

To diagnose friction properly, I conducted interviews and cross-functional research with design teams, floor traders, delivery managers, engineering teams, and the UI Toolkit governance team. I mapped the full delivery workflow and presented a delivery bottleneck diagram to senior stakeholders, securing cross-functional buy-in.

Four key themes emerged from the research:

Component discoverability

Designers struggled to locate and reuse components efficiently.

Complex component states

Base components and variants were overly heavy and difficult to manage.

Diverged naming conventions

Misalignment between design naming and Storybook implementation.

Slowed iteration cycles

Structural inefficiencies created significant drag on design delivery.

R E S E A R C H

Expert Analysis

Interviews

Discovery Workshop

S T R A T E G Y

Methodology definition

Ecosystem Maps

Workflow Modeling

Information Architecture

Requirements Definition

1. Atomic Deconstruction

I deconstructed core trading components using Atomic Design principles. We moved from nested components with excessive layers to base atomic structures with controlled properties. By strategically using Figma properties and auto-layout over rigid componentisation, we simplified state management while preserving flexibility.

2. Iterative Usability Sandbox Testing

To validate improvements, I ran 3 Usability Sandbox Tests (UST) with designers simulating real delivery tasks. This was UX applied internally.

UST01 20% > Component reduction

Comments: “It is too complex; we need a simpler way to change the state.”

UST02 60% > Component reduction

Comments: “Flexible, it’s does what I need it to do.”

UST03 70% > Reduction + 100% completion.
Comments: “Flexible, it’s does what I need it to do.”

3. Governance & File Architecture

I introduced a structured delivery model: Core System → Core Workflow Files → Delivery Files. This added lightweight reusable component sets, clear migration strategies, Confluence documentation, and meta-tagged files for discoverability. Governance shifted from reactive to structured.

Cross-team Alignment Workshops

Disclaimer

I’m under a strict NDA for my portfolio and cannot show direct examples of my work on each application. However, I can use images of the application that live in the public domain and create no replicas. Hopefully, this gives you an idea of the types of applications I work on. (Images may not be in high resolution.) All images already exist in the public domain and are the property of JPMorgan Chase & Co. All mockups are alternative examples of what is online in the public domain. I’ve also used Bitcoin instead of actual fiat currency.

UX Improvements Within Trading Workflows

Alongside infrastructure changes, I contributed to UX improvements across Rates and FX trading interfaces. In regulated financial contexts, clarity directly impacts user confidence and trading behaviour.

  • Simplifying ticket creation flows

  • Evaluating edge cases in pre-trade and post-trade states

  • Improving clarity in high-risk financial interactions

  • Supporting mobile trading experience optimisation

+5%

Increase in mobile volume

Improved workflow clarity positively influenced trading behaviour in high-stakes financial environments.

-2%

Delivery efficiency improvement

At enterprise scale, 1% equated to ~4.85 years of combined design effort. This translates to ~9.7 years of cumulative design capacity optimised.

80%

Prototype sign-off confidence

Improved early alignment prior to development reduced late-stage rework and overall delivery risk.

70%

Reduction in component complexity

Significant reduction in nested layers during iteration cycles, resulting in lighter Figma files and much faster design workflows.

Organisational Impact

Beyond metrics, systemic impact included design evolving from fragmented execution to coordinated infrastructure.

  • Reduced duplication across 12 asset classes

  • Stronger alignment between design and Storybook

  • Lower cognitive load navigating large systems

  • Improved cross-team shared vocabulary

  • Established scalable governance for expansion

Why This Matters

In enterprise financial systems, inefficiencies compound across teams and time.

Clear governance reduces ambiguity. Reduced ambiguity improves speed. Improved speed lowers delivery risk. Lower delivery risk increases organisational confidence.

This initiative strengthened the operational backbone of a $1B-per-month trading ecosystem — not through visual redesign, but through structural clarity.

What This Demonstrates

Systems-level product thinkingEnterprise UX governance maturityCross-functional influenceInfrastructure optimisation under constraintMeasurable behavioural impactDesign authority in complex orgs

This is how I operate: Not just improving interfaces, but improving how systems scale and how teams deliver.

“We all know many challenges arise when working under pressure and time constraints during the design delivery process. But when we truly look into what we are designing, I realise our users are not just those we serve. It is also our team. We construct designs that create efficient workflows, allowing them to iterate and move faster.”
— Edward Ofori-Attah

2020 - 2023 EXPERIENCE

Lead designer on Transact from the inception of the product. I delivered:

  • Original Designs and concepts for the application.

  • Complete designs for pre-trade and post-trade MVP journeys

  • Migration of product designs from Sketch to Figma

  • Component Library development, maintenance and governance.

Lead Designer on Client Management and Client Controls application. I delivered

  • Maintenance of application

  • Streamlining complex user journeys

  • Migration from the old toolkit version to the new one on the client controls platform.

Leading design (UI/UX) on Rate and FX types for Execute (Desktop and Mobile) platform. I delivered;

  • Figma migration and strategy for all trading ticket types

  • Creating pre-trade, post-trade, pending, active, failed, and success states)

  • Improvements to the delivery experience and design (figma) ecosystem within the design teams by 2%

  • UX Workshop and sandbox testing for component improvement

  • Engaging prototypes for complex trading user journeys that garnered 80% sign-off rate.

  • Designs user flow for additional trading feature for mobile platform, resulting in a 5% surge in trading volumes

During my time within the DXD Markets team, my key responsibilities included:

  • Guardian of the design ecosystem and guidelines

  • Building high-fidelity user flows and interactive prototypes for stakeholders

  • Documentation and Design specifications for development teams

  • I engage daily with development and the wider team to foster collaboration and increase my knowledge of complex front—and back-end systems.

  • Daily delivery of requested features (UI/UX) from stakeholders

  • QA and testing 

  • Contribution to main toolkit governance

UX

  • Discovery workshops

  • User Interviews

  • User Journeys + Flows

  • A/B Testing

  • Stakeholder Management

  • Agile Ticket Creation (JIRA)

  • Prototypes

  • Dev Specification

  • Development QA Testing

  • Accessibility

UI

  • Design Systems

  • Component Library Management + Maintainance

  • Pixel Perfect Designs

  • Component Migration (From Sketch to Figma)

  • Prototypes

  • Dev Specification

  • Documentation (on Confluence)

OTHER ACHIEVMENTS

  • I optimised internal functionalities within front office systems, pinpointing component inefficiencies and elevating the performance of existing systems.

  • Elevated the mobile trading platform by introducing cutting-edge features, culminating in a noteworthy 5% surge in trading volumes and heightened user satisfaction, fed back from stakeholders.

LEADERSHIP AND MENTORING

I presented work on Global calls to the entire DXD team on multiple occasions.

Onboarded new employees to the applications I was working on. Creating documents and artefacts for handover.

I monitored interns and guided them through the design processes at JP Morgan. I represented JPM Morgan at conversion. I also was a speaker on internal panels for students and graduates.

FIN.

Although my journey here ended, I have picked up many skills, such as UX and its depths, that will add value to the next part of my journey now as a Product Designer.

Next

Virgin Media