Web2021

Document Upload

A drag-and-drop file component for faster document upload to Chase servers.

Company: J.P. Morgan
Team: Investment Team
Role: Senior UX Designer

The goal

Allow users to drag files from their computer to Chase servers for faster file upload.

Interactive prototype

Everything below works — try it.

Mortgage application — 0 of 3 documents received · 0 files

CHASEInvestments by J.P.Morgan

Upload documents for your mortgage application.

These documents are required to move your application forward — 0 of 3 received.

Government-issued ID
Required
Driver's license, passport, or state ID — a clear photo or scan.
Proof of income
Required
A recent pay stub, W-2, or last year's tax return.
Signed mortgage disclosure
Required
The disclosure packet from your secure messages, signed and dated.

Acceptable document formats: JPG, PNG, GIF, SVG, WebP or PDF. Max file size: 10.0 MB.

The story

Clients regularly needed to send documents to the bank — tax forms, identity documents, signed agreements. The existing flow meant email, branch visits, or slow attachment forms with unclear states.

The drag-and-drop component was designed as a reusable pattern: a clear drop zone, visible progress, and explicit success and error states so users always know what happened to their file.

Design decision

The component supports dragging multiple files, validates type and size before upload, and shows per-file error states with a clear path to retry — keeping users in flow instead of starting over.