Overview
The Chase Digital Loan Experience (DLx) is the single touchpoint borrowers and internal teams rely on to complete and track every task required to close a loan. When a company reorganization moved DLx under a new product group running a different design system, the entire product needed to be rebuilt on a new foundation, screen by screen.
As the sole designer on the initiative, I treated the migration as more than a technical lift. Since every screen in the product was already being touched, this was the moment to resolve design debt that had never been prioritized before, addressing it deliberately rather than simply porting it over as-is.
The problem
Users had grown used to inconsistency. Design discrepancies in the legacy product, mismatched patterns, unpredictable behaviors, and an onboarding flow that never quite made sense had gone unaddressed for so long that they'd become part of the product's baseline experience. The migration gave us leverage we hadn't had before: a mandate to touch every screen meant we could finally fix what had never been in scope, for both internal teams and external borrowers.
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 I had, there were 3 main objectives I wanted to tackle for this objective.
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
I went through the end-to-end loan application flow on our User Acceptance Testing (UAT) platform and cross-checked each screen against Figma. This surfaced inconsistencies in spacing, written content, colors, and icon sizes across the migrated screens. Documenting these discrepancies allowed me to address them directly with developers during the migration demo. To resolve the root cause, I attached all migrated screens to design tokens and linked components, and provided the corresponding Storybook links so developers could reference the exact code to use.
Vibe coded flow for testing and demo's
Using Copilot and Claude, I built a functioning prototype of the migrated screens for our developers. This gave the engineering team a clear understanding of all user interactions, behaviors, and patterns before implementation began. I also used the prototype to show stakeholders the vision behind the migrated screens and highlight the new enhancements we wanted to introduce.
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
Mini workshop brainstorm for flow revamp
I met with the product owner, product manager, 2 developers, and 3 internal sales team members to go through the old flow and created a new flow that addressed all known user pain points.
I proposed to simplifying the onboarding process UI and also eliminating the "Continue with Chase" option and automatically linking the email used to send the invitation to create an account on the onboarding flow.
New and improved onboarding experience
Using the updated user flow chart we curated, I designed a new and improved onboarding flow in Figma and built a working prototype using AI-assisted coding tools to test with internal team members. Testing was successful across the board, with users responding very positively to the new flow. Key enhancements included:
Removing the "Continue with Chase" login option to simplify the onboarding experience
Pre-filling information already collected on the backend once a user clicks their invitation link to create an account and log in
Breaking the flow into multiple steps to reduce information overload and ease cognitive load
Streamlining workflow
Objective 3
To help new designers, developers, and product partners navigate my working files more easily, I organized clear points of reference throughout, so anyone jumping in could quickly understand the structure and find what they needed.
File structuring
Style guides with spacing, type sizes, color choice, etc. are all labeled in a page inside of each file
I created a design system where all master components live within the DLx file to have consistency across all screens
