J.P.Morgan

My 3+ Years as a Product Designer (UX/UI).
Crafted compelling UI, UX design and design systems for B2B, B2C, and SaaS applications across JPM Markets. Utilised JPM toolkit components in Figma to improve upon applications that effectively managed extensive datasets and oversaw monthly trades amounting to $1 billion.

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 recreate none 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 to use Bitcoin instead of actual fiat currency.

OVERVIEW

I was a Senior Visual Designer at JP Morgan and worked on 5 JPMorgan Markets applications, including Execute & Transact.

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)

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

THE PROJECT - EXECUTE

Objective: Improve Delivery efficiency
+ Design System

The Execute: Trading platforms effectively manage extensive datasets, trading everything from currency to raw materials and overseeing monthly trades amounting to $1 billion.

Execute has been around for decades, but the UI toolkit has matured for 6 years. Its last design, migrating from Sketch to Figma, had significant challenges with the design files, which led to inefficiencies in delivery, quality, and time.

C H A L L E N G E S

  • Non-adherence to best Figma design practices.

  • Bulky Figma components - leading to large file sizes > increase in computer loading times > hindering productivity in delivery.

  • Broken, non-reusable components within the delivery

  • Old codebase > Development costs.

  • Divergence of component naming conventions from Design to Development (Storybook)

  • Lack of design file discoverability and documentation.

MY APPROACH

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

D O U B L E D A I M O N D A P P R O A C H

Understanding the trading platform and the delivery team's needs was key to creating the optimal design system architecture to improve delivery efficiency and build cohesion in the application. To do this, I used the double-diamond approach ( Discover, Define, Develop, Deliver) throughout the project's execution. I started with. a deep dive for the initial discovery and research through:

  • Interviews with key stakeholders and users of the application on the trading floor to understand the application

  • Interviews with designers you initially built the first iteration of the Figma Design System to understand their approach to the build.

  • Interview project managers to understand the bottlenecks in delivery further.

  • Audit the application's key features (Trading tickets)—deconstructions of the existing component. Reconstruct and experiment using new methods. (Atomic Design)

  • Leased with other parts of the business, mainly the UI toolkit team, to align with their future vision cross-application.

U X D I S C O V E R Y - K I C K O.F F

Goal
Researching and gathering enough evidence to Frame the Problem and gain initial direction. Get my team on the same page to begin the discovery.

Step One - Onboarding Team
Although I was solely appointed to this task, I used the workshop to discover everyone's capabilities and knowledge of the applications they could contribute. Agreeing norms such as cooperation around interviews and testing twice a week


Step two - Frame problem or opportunity
I then next created a concise description of the problem to be solved. Thus creating alignment around the problem that needs to be explored.

Problem Statement
“How can we create a reusable, efficient, and scalable component library and sticker sheet for 12 trading assets that accelerate delivery, improve discoverability, and support future growth?”


Step Three - Set a Goal
I then brainstormed what features would be helpful to pursue:

  • Component sticker sheet for all 12 trading assets 

  • Figma migration and strategy 

  • Confluence page of all research and results.

  • Figma file structure for discoverability


Step Four - Identifying Blocker or bottleneck - (unknowns)
Many of the unknowns came from the constant state of delivery we were in for the main application. Even while on this project, we all still had delivery work to complete and keep on top of our work.

Step Five -  Create a plan to tackle the unknown. 
I time-boxed the project for a month (6 weeks of 5 working days) and would deliver findings and updates twice a week. Scheduling meetings, interviews and other UX tasks.

M E T H O D O L O G Y

Following the Atomic Design Methodology, I analysed the existing components from an organism level.

Note: For context, this work was done around October 2023, and by the time you are reading this, I know Figma would have found a wonderful way of making some of my methods in this next section more efficient.

A C C E P T A N C E C R I T E R I A + D E L I V E R A B L E S

From interviews, I approved the following criteria and deliverables that needed to be met by the senior design manager. We agreed on a component Library and sticker sheet for 12 different trading assets, which must do the following:

  • Improve delivery efficiency

  • Have Figma best practices applied

  • Be lightweight and reusable

  • Be compatible with business logic

  • Documentation artefacts that can be shared across delivery stakeholders.

  • Figma file system that helps discoverability

  • Migration strategy for the rest of the components

D E L I V E R Y R E S E A R C H

Along with my research, I was part of the design delivery team and built partnerships with 4 different application teams across the business for 3 years. I saw first-hand what delivery was like across the board and could compare. I presented the delivery map below, outlining the current bottleneck delivery process.

Presented diagram to key stakeholders for validation. Senior Designer Manager. Product stakeholders and delivery managers.

COMPONENT AND DESIGN SYSTEM AUDIT

Audit the application's key features (Trading tickets) by deconstructing existing components. Reconstruct and experiment using new methods. (Atomic Design)

  • Identified a starting point for key component key components and a starting point (delivery workflows)

  • Identified the need to produce components from workflows from prioritised delivery. For example, each stated a trade tile.

D E S I G N

  • Design System

  • Component Library Management + Maintainance

  • Pixel Perfect Designs

  • Component Migration (From Sketch to Figma)

  • Usability Sandbox Testing

  • Prototype (Testing an iteration)

  • Documentation (on Confluence)

O R I G I N A L B U I L D - D E C O N S T R U C T I O N

Atoms - Buttons/Toggles/ Input fields/Tabs pills

  • All Atoms within the library were components on almost every level of their structure.

  • Making them bulky (average: 30 layers).

  • Heavier is file size

Molecules - navigation/tab rows/input lockups/button lockups

  • Grouped atoms were componentised to create different states in the user journey.

  • Making them easier to swap. However, this only made them heavier.

Organism - Trading tile/subscription box/blog tile

  • The final tile design (Organism) was brought together, and variants were made based on what were priorities in the delivery.

N E W B U I L D - R E C O N S T R U C T I O N

Atoms
buttons/toggles/ input fields/tabs pills


  • Created a base component for each atom
    Used ‘Properties’ and ‘nested Instances’ for different component states (reducing the number of components).
    Adding local styles to Local Variables

Molecules
navigation/tab rows/input lockups/button lockups

  • Atoms grouped with Figma restraints (auto-layout) instead of being placed in components.

  • Allowed them to be edited from a component level more quickly.

Organism - Trading tile/subscription box/blog tile

  • At the organism level, users are still able to detach instances
    Significantly better baseline for their design.

  • They were provided with all the states for specific trading journeys, allowing designers to alter the design quickly for delivery work.

U S A B I L I T Y S A N D B O X T E S T I N G

Once I understood the challenges and architecture of components. I took one of the components deconstructed and reconstructed it again according to current-day design standards. I then conducted 3 sandbox tests with 5 designers (UI and UX) and then conducted.



The sandbox aimed to reflect designers' day-to-day delivery tasks and handoff. This involved rapid prototyping, iterations, and updating new features to reflect the technology and codebase's maturity over time.


The results of each Sandbox were as follows:

UST 1 

30% - Completion rate

20% component reduction

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

UST 2

50% Completion Rate

60 % Component reduction

Comments: “Need more customisation from an atom level.”

UST 3

100% completion rate

70% Component reduction

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

Improvement

A critical success factor of this effort was ensuring that the design system was directly correlated to each stage of the delivery journey. In the diagram above, you can also see that I made room for governance and incorporated key stakeholders.

- Added a new level of governance
- Lighter component sets
- Reusable components and flows

RESULTS

I spearheaded the implementation of a streamlined design framework for their existing design system components. This made them lightweight and more reusable, resulting in a remarkable 2% reduction in design delivery time across each financial products design team using Figma. This influenced other design teams across other parts of the business.

D E L I V E R A B L E S

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

  • Created component sticker sheet for all 12 trading assets (States: pre-trade, post-trade, pending, active, failed, and success states)

  • Figma migration and strategy for all assets trading tickets.


  • Confluence page includes all research and results and details of new component architecture.

  • Figma file structure that made it easier to search for files (Including meta tags)

CONCLUSION

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.

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

Green Oil Energy / Spark Energy