Overview
The signer information webform captures who can sign loans on behalf of a borrowing entity. Built for J.P. Morgan’s Middle Market Banking & Specialized Industries (MMBSI) group, it simplifies complex loan signing documents into a digital webform so bankers can serve mid-market clients faster, with fewer errors.
Discovery workshop
I hosted a workshop with the sales team and product manager to uncover pain points around collecting authorized signer information and to capture real client scenarios. Given the complexity of corporate signing structures, I also gathered all common cases, critical edge cases, and possible signer/entity types before moving into design exploration.
Results
Signing structures are often complex and difficult to track:
I collected all entity types and their signer requirements.
I learned that entities can sign on behalf of entities.
Two signing structures required per loan and both can potentially get very long:
Primary borrower structure
Guarantor structure
Delays are caused by missing/incorrect information provided by the clients.
Paper/manual collection is time consuming and leads to frustrated clients.
The problem
In the final stage of loan processing, client specialists struggle to collect accurate authorized-signer information. Errors and back-and-forth with clients put 33% of cases on hold, delaying loan closings and frustrating both specialists and clients.
The solution
We are digitizing the way our clients provide authorized signer information for their loans and how internal teams collect that information.
Low Fidelity Wireframes + Concepts
With research complete, I sketched four low-fidelity concepts. After reviewing them with the core product and sales teams, I moved the tree structure and tab list forward for testing.
Moderated usability testing
After narrowing down to 2 best solutions, it was time to put them in front of the users.
Testing script
I wrote my moderator script to keep sessions consistent across participants.
Created high fidelity flows
I brought the sketches to high fidelity using our design system.
Coded prototype
Using Copilot and Claude in VS Code, I created the end-to-end flow to send to participants
Concept 1
Users enter signers through a visual hierarchal structure
Concept 2
Users enter the primary signers first and the underlying signers in a tab list
I affinity mapped user feedback to identify common themes and define priorities for the first release:
Users wanted the digital flow to mirror their offline process: collect the entity’s primary signers first, then gather signers for any entities signing on their behalf.
The tree structure helped users see every signer at a glance and catch errors, especially in multi-entity structures.
Captured quotes from users at testing:
"Frankenstein" the 2 concepts
Using the testing results, I combined the strongest elements of both concepts into a single solution.
Final solution
For the final solution, we targeted to include 4 main features based on user feedback.
Primary signer collection dialog
To match the client specialists mental model and how they naturally collect signer information, the task begins by collecting the primary signers first.
Signer list as tab
The users will have a view of each authorized signer and the corresponsing list of underlying sisgners in a tab list. This ensures that long signing structures are clearly defined and digestable for users.
Entity as a signer
Since an entity cannot be a stand alone signer, an automatic required signer field will cascade.
Signer hierarchy tree
The signing structure can be previewed clicking the "Signer Hierarchy" feature that will display who is signing on who's behalf easily.
Guarantor signer collection
The guarantor follows the same flow as the primary borrower, with entity-type rules applied. For example, a corporate borrower requires an individual guarantor, so “Individual” is pre-selected and read only (see example below).
Review all signing structures
To ensure there are no validation errors, the review page allows users to check their inputs. This page also has a signer hierarchy view for both the borrower and guarantor.
E-consent
To meet legal signing requirements, each signer must provide e-consent when they receive the webform. This page consolidates long forms into one page.
Edge cases + error states
I documented every form label, error state, and use case in a spreadsheet and shared it with the developer as part of handoff.
Impact + results
Internal teams and clients reported a faster and simpler process for collecting signer information.
The signer structure was adopted into the design system for reuse across other products.
