DLx Design System Migration

J.P. Morgan

DLx Design System Migration

J.P. Morgan

Contents

Role

Lead product designer

UX/UI

Workshop lead

Usability testing moderator

Team

1 designer

PD

1 product manager

SG

MP

2 developers

Timeline

May - July 2025

Contents

Role

UX/UI

Product strategy

User research

Usability testing moderator

Team

3+

4 designers

LU

1 product manager

PC

RE

2 researchers

HA

1 developers

Timeline

October - December 2021

Contents

Role

Product design intern

UX/UI

User researcher

Team

1 product designer

PD

1 product manager

PD

1 researcher

AY

PX

2 developers

Timeline

June - August 2022

Contents

Role

Lead product designer

UX/UI

Product strategy

User researcher

Usability testing moderator

Team

AE

2 designers

PD

1 product manager

PW

OM

VY

3 developers

Duration

July 2026 - ongoing

Chase Design System Migration

J.P. Morgan

Chase Design System Migration

J.P. Morgan

Overview

The Chase Digital Loan Experience (DLx) is the platform borrowers and internal teams use to complete and track every task needed to close a loan. When a reorganization moved DLx to a product group with a different design system, the entire product had to be rebuilt, screen by screen.

As the sole designer, I saw the migration as more than a technical lift. With every screen already being touched, it was the right moment to resolve long-deprioritized design debt instead of porting it over as-is.

Role

Lead product designer

UX/UI

Product strategy

Branding

Workshop lead

Usability testing moderator

Design system

Team

1 designer

PD

1 product manager

CH

MA

HP

MA

4 developers

Timeline

February - June 2026

The problem

Years of mismatched patterns, unpredictable behaviors, and confusing onboarding had become the productโ€™s baseline. Touching every screen in the migration gave us the leverage to finally fix them for internal teams and borrowers alike.

Role

Lead product designer

UX/UI

Product strategy

Branding

Workshop lead

Usability testing moderator

Design system

Team

1 designer

PD

1 product manager

CH

MA

HP

MA

4 developers

Timeline

February - June 2026

Discovery

Rather than migrate blind, I started by listening. I ran a series of conversations with the sales team and product manager, the people closest to daily platform use and client friction, structured around three goals:

Synthesized objectives

From initial calls, there were 2 main objectives I wanted to tackle:

Full design system migration

Objective 1

The biggest effort of this initiative was migrating 40+ screens from one design system to another. It was important to always be in sync with the developers and have frequent demos of the screens.

Addressing inconsistencies and updating components + tokens

Auditing the UAT loan flow against Figma surfaced inconsistent spacing, content, colors, and icon sizes. I flagged them with developers at the migration demo, then fixed the root cause by linking every screen to design tokens and components, with Storybook references for the exact code.

Vibe coded flow for testing and demo's

I built a working prototype with Copilot and Claude that clarified every interaction for engineers before implementation and showed stakeholders the vision and planned enhancements.

NEW MIGRATED SCREEN

Loan Details Page

NEW MIGRATED DESIGN

Loan Details Page

NEW MIGRATED DESIGN

Loan Dashboard

NEW MIGRATED DESIGN

Webform

NEW MIGRATED SCREEN

Loan Dashboard

NEW MIGRATED SCREEN

Webform

Onboarding revamp

Objective 2

During our discovery phase, users brought up confusion on the create an account flow and sign in flow. The confusion was mainly in which email to use for their account and if they should "Continue with Chase" or not.

Previous version

Onboarding user flows

After reviewing the old flow with product, engineering, and sales, I redesigned onboarding to address every known pain point. I simplified the UI, removed โ€œContinue with Chase,โ€ and auto-linked accounts to the invited email address.

New and improved onboarding experience

Using our updated user flow, I designed the new onboarding experience in Figma and built a working prototype with AI-assisted coding tools. Internal testing was positive across the board. Key enhancements:

  • Removed the โ€œContinue with Chaseโ€ option to simplify sign-up

  • Pre-filled known information when users open their invitation link

  • Split the flow into steps to reduce cognitive load

CREOS AI Chat

J.P. Morgan

Contents

Role

Lead product designer

UX/UI

Product strategy

Branding

Workshop lead

Usability testing moderator

Design system

Team

1 designer

PD

1 product manager

CH

MA

HP

MA

4 developers

Timeline

February - June 2026

Let's connect!

I'm not just here to design products; I'm here to connect with people.

Phone Number

Current Residence

San Fransisco, CA

Let's connect!

I'm not just here to design products; I'm here to connect with people.

As a product designer, I'm on an exciting journey to blend creativity with technology to craft memorable user experiences.

Phone Number

Current Residence

San Fransisco, CA

Let's connect!

I'm not just here to design products; I'm here to connect with people.

Phone Number

Current Residence

San Fransisco, CA