J.P.Morgan

My 3+ Years as a Senior Visual 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. 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 the real thing.

OVERVIEW

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

S K I L L S

UI

  • Design Systems

  • Component Library Management + Maintainance

  • Pixel Perfect Designs

  • Component Migration (From Sketch to Figma)

  • Prototypes

  • Dev Specification

  • Documentation (on Confluence)

UX

  • Discovery workshops

  • User Interviews

  • User Journeys + Flows

  • A/B Testing

  • Stakeholder Management

  • Agile Ticket Creation (JIRA)

  • Prototypes

  • Dev Specification

  • Development QA Testing

  • Accessibility

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.

E X P E R I E N C E

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

  • Daily engagement with development and 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

PROJECT - EXECUTE PLATFORM

Improving delivery and Design (Figma) ecosystem

Trading platforms effectively manage extensive datasets and oversee monthly trades amounting to $1 billion. Moving legacy designs spanning decades can sometimes be challenging regarding delivery and tooling. My goal was to understand the platform from where it has been to where it is going. I applied my knowledge of current design practices and UI and UX perspective as an individual contributor and strong team player. (atomic design methodology)

The Challenge

A trading platform went through migration from Sketch to Figma. Several designs, components and styles were migrated. However, the following challenge arose when the designer (UI/ UX) and developers came to interact with design files for delivery:

  • Components were too bulky (pre-token Figma and properties era)

  • Large file sizes due to bulky build using to too much device memory thus slowing down designers machine.

  • Design discoverability increased production time. - designers spent too much time looking for design files

  • Broken Components broken, not built to current design standards,

  • Upgrading would incur significant development costs.

  • Naming conventions and component features did not match the storybook build.

My Approach

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. I deep dive with 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.

Following the Atomic Design Methodology, I broke down 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.

Methodology

Original Build

Atoms
buttons/toggles/ input fields/tabs pills
Atoms within the library were components on almost every level, making one atom component very bulky for every 30 layers. These types of atoms carry this weight when grouped as components, making the grouped components heavier.

Molecules
navigation/tab rows/input lockups/button lockups
When atoms were grouped, they 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
At an organism level, it was brought together and variants were made based on what was priorities in the delivery.

New Build

Atoms
buttons/toggles/ input fields / tabs pills
I first created a base component for each atom and used ‘Instances’ for different features.
Example: A button with 1 size and 2 instances - icon on / icon off. These instances would be created in the original build, and component variables make this component too heavy. Instances make it easier to edit and swap button styles

Molecules
navigation/tab rows/input lockups/button lockups
Molecules were grouped with Figma restraints instead of being placed in components. This allowed them to be edited from a component level more quickly.

Organism
Trading tile/subscription box/blog tile
At an organism component level, users are still able to detach instances, but they would have a significantly better baseline for their design. As all the states for specific trading journeys were provided for them, allowing them to alter the design for delivery work quickly.

Sandbox Testing

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:

Sandbox 1 

30% - Completion rate

20% component reduction

Sandbox 2

50% Completion Rate

60 % Component reduction

Sandbox 3

100% completion rate

70% Component reduction

The Outcome

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 went on to influence other design teams across other parts of the business.

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 I made room for governance and incorporate key stakeholder.

Legacy Approach

Solution

To conclude

We all know many challenges arise when working under pressure and time constrain within the design industry. But when we truly look into what we are designing as reliase users are not just the users we serve but also the team we serve too, we can construct designs that create efficient workflow allowing us ti iterate and move faster as a team.

Other Achievements

  • 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.

Conclusion

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