Introduction
About the Project
UX Design
Redesigning complex lending and mortgage workflows within Asset & Wealth Management, this project streamlines enterprise tools to improve interface clarity, user validation, and operational efficiency.
The proposed solution redesigns the Loan Pricing Tool, leveraging AI-assisted workflows and expert usability testing to accelerate iteration cycles while keeping the user experience at the core.
Project Details
Project Timeline
8 weeks
Tools Used
Copilot, VS Code
Figma
Company
JPMorgan Chase
Roles and Responsibilities
User Research, User Testing, AI Prototyping, Design Visuals, Cross-Functional Collaboration
Chapter 1
Process
Design Process
I followed an iterative loop rather than a straight line: Understanding, Brief/Research, Design Exploration, Feedback, Prototype, User Testing, and back to Design Exploration whenever testing surfaced new problems.
AI-Assisted Design Process
Leveraged GitHub Copilot within VS Code alongside Figma to accelerate design iterations, prototype complex data interactions, and streamline handoffs. Using AI as a thought partner allowed me to quickly test functional ideas, refine UI concepts, and focus more energy on user research and strategic decisions.
What is the Loan Pricing Tool ?
The Loan Pricing Tool (LPT) empowers financial advisors to request loans on behalf of their clients, streamlining the process from initial inquiry to final approval. Advisors can tailor loan terms, including special discounts and rate adjustments, to strengthen client relationships and deliver personalised financial solutions.
Chapter 2
Discovery and Architecture
Existing Screen
Analyzed the legacy tool to identify visual clutter, fragmented data points, and inefficient spacing. The layout required excessive scrolling and lacked visual hierarchy, hiding key metrics needed for fast evaluations.
Research
What does the tool do ? - Understanding the Tool
I mapped the tool’s functionality to understand how information flows across different sections.
This exploration helped me uncover redundancies, inconsistencies, and opportunities to simplify the experience.
Who uses the tool ? - User Journeys
The platform caters to two primary users - Advisors, who initiate and tailor loan pricing requests, and Approvers, who review key metrics to finalise decisions.
Advisor
Approver
Primary User
While both roles interact with the platform, the redesign prioritises Approvers. Their decision-making velocity directly impacts deal approval times, making optimised data density and key metric prominence our top priority.
Chapter 3
Key Takeaways from Approvers
This feedback from our internal team to highlight critical user experience challenges within the Loan Pricing Tool (LPT).
01
"I can't tell what I'm approving without scrolling"
Critical information like approval amount, facility type, and proposed spread is buried, forcing approvers to scroll and dig before they even understand what they're being asked to sign off on.
02
"I don't trust the numbers in front of me"
Approvers said metrics like ROE, AUM, and EML tags don't always feel accurate, with no clear sense of where the numbers come from or how they're defined.
03
"I'm bouncing between screens just to compare"
Facility details, pricing, and prior approval history live in separate views, so even a simple comparison means jumping back and forth and re-reading the same information twice.
Design Oppurtunity
Goal
Design a clearer, more focused workflow that surfaces critical information, simplifies comparison, and helps users make confident decisions with less effort.
Chapter 4
Design Exploration
Exploration
Evaluated four visual structural approaches, ranging from multi-tab progressive disclosure to single-page consolidated grid layouts, to determine which balance minimized context-switching for Approvers.
Layout Architecture Trade-offs
Evaluated two structural models—a single-page scrolling interface versus a multi-step guided layout—to determine the optimal balance between information density and cognitive load for decision-makers.
Continuous Scroll
Pros
Cons
Stepped / Tabbed View
Pros
Cons
Chapter 5
Final Solution & Impact
Final High-Fidelity Interface
The updated design introduces a responsive layout featuring sticky headers, contextual side drawers, and inline editing. Key pricing metrics, approval histories, and facility breakdowns remain visible without requiring context-switching.
Section- Wise
Workflow
How can we streamline the approval workflow?
Existing: The workflow required users to scroll through dense sections and move between different parts of the tool to find the context needed for approval.
New: A more structured, step-based layout that surfaces critical information at each stage while reducing unnecessary navigation and scrolling.
Data Density & Comparison
How can we make facility comparison easier?
Existing: The original layout made it difficult to view and compare multiple facilities at once.
New: Restructured the information into a consolidated view, making cross-facility comparison faster and easier.
Contextual Features
How can we simplify complex information?
Existing: The original tables displayed too much information at once, making it difficult to focus on what mattered.
New: Combined the tables and introduced collapsable columns, allowing users to prioritise and view only the most relevant information.
Putting comparable columns right next to each other
Features
Additional Features
A persistent comment panel lets users scroll through the screen while commenting, making it easier to reference specific numbers and provide context.
Chapter 6
Feedback
Testimonials
Chapter 7
What I Learned
Learnings
01
AI as a Prototyping Partner:
Using Copilot in VS Code helped me quickly build and test interactive code prototypes. This meant I could test real, complex financial numbers early on instead of spending hours making static layouts in Figma first.
02
Collaboration Across Teams:
Working on complex enterprise screens taught me how to collaborate closely with product managers and developers. By co-creating prototypes and aligning early on technical constraints
03
Understanding a Complex User Base:
Entering an unfamiliar domain like finance meant I had to quickly get up to speed on complex jargon, financial metrics, and—most importantly—how the users actually think. Taking the time to deeply understand the approvers' daily workflows and pain points was essential to creating a tool that actually solved their real-world problems.
