Document Upload & Validation
Upload, validation, error, retry and success states for customer document collection in a loan workflow.
Client
Financial Services Client — Muthoot Finance (confidential)
Role
UX/UI Designer — upload states, validation messaging and retry design.
Platform
Mobile · Web
Confidentiality: Client identity and customer documents are confidential. Patterns shown are sanitised.
01Overview
Document collection for a loan workflow: upload, validation, error, retry and success — designed so failures explain themselves and never dead-end.
02Context
Customers had to submit documents over the phone or portal. Failures were unclear ('invalid document'), resubmissions were endless, and support time was burned on the same few questions.
03User Journey
Document flow
04UX Decisions
01Tell users what 'good' looks like
Each upload screen shows the expected document and capture tips before the first attempt — most failures are prevented, not handled.
02Specific failure reasons
'Too blurry to read' beats 'invalid document' — every validation failure explains itself and what to do.
03Retry without friction
Retake reopens the camera with the previous capture context; no form data is lost.
06Edge Cases
Good UX is what happens when things go wrong. Each case: the problem, the user-facing message and the recovery action.
Wrong document type
Edge caseThe uploaded file is not the requested document.
“This looks like the wrong document. We need your Aadhaar card.”
Recovery: Show the expected type and let the user retry.
Unreadable image
Edge caseThe photo is too blurry or cut off.
“We can't read this clearly. Retake with good light, filling the frame.”
Recovery: Retake with tips — the camera reopens.
File too large
Edge caseThe file exceeds the size limit.
“This file is too large. Choose a smaller photo.”
Recovery: Suggest compression or resizing before retry.
Expired document
Edge caseThe ID is expired.
“This document has expired.”
Recovery: Accept alternate documents from the approved list.
07Final Experience
Capture with guidance
Capture with guidance
Expected document, capture tips and status in one screen.
Schematic placeholder — add an approved screenshot via data/case-studies.ts
Validation & retry
Validation & retry
A specific reason, a clear fix and a retry that loses nothing.
Schematic placeholder — add an approved screenshot via data/case-studies.ts
Upload complete
Upload complete
Confirmation and what happens next — no ambiguity.
Schematic placeholder — add an approved screenshot via data/case-studies.ts