Letter of Credit · Document Request

Document Request

Designing the document-request step for Letters of Credit

Role
UX Designer
Collaboration
Business PM, engineering team
Platform
Web
Tools
Figma, Gemini, Sketching
New import Letter of Credit — Documents step: transportation documents summary and commercial invoice form
Expected documents with transportation and commercial invoice summaries, packing list form in progress
Stack of document summary cards with insurance policy fields open for entry
Full list of expected document summaries and other documents free-text entry
Document list with inspection certificate form expanded
Document list with certificate of origin form expanded

Context

Letters of Credit are used in international trade to reduce risk by ensuring payment is only released once specific conditions are met. They are essential but complex, involving strict requirements, detailed information and multiple stages. A key part of the process is the document request where the seller must provide documents to receive payment.

Problem

As part of the document request, users had to define the exact documents the seller would need to provide in order for payment to be released, often using technical terms and detailed conditions. This was a business-critical step for banks as the information needed to be accurate and structured clearly enough to support internal review, reduce risk and avoid delays or disputes later in the process. In physical forms, it was typically presented as a dense set of fields with little structure, making it harder to complete correctly and increasing the likelihood of errors and operational friction.

Challenges

The document request step had to be handled carefully. While it might seem like something that could be simplified, the information needed to stay clear and accurate, which meant I couldn’t move too far away from the original wording. In some cases, the exact terminology had to be kept.

The structure of the information also followed a logical sequence that couldn’t be changed, so I had limited flexibility in how I could reorganise it. On top of that, the design system restricted how certain elements could be presented, which further shaped the solution.

There were also limits on moving information between steps. Even though some sections felt dense, the content had to stay within this step to make sense in the overall process.

Wireframe flow for transportation documents: sea transport and bill of lading versus multimodal document, showing how selections change the form

Approach

The main challenge was not simplifying the Document Request step itself but making the experience easier to move through. Because a large amount of required information couldn’t be reduced, I focused on how it was structured and presented.

I broke the step into clearer groups based on document type and related requirements so users could focus on one set of inputs at a time instead of dealing with a long list of fields. I also improved the hierarchy to make the content easier to scan. This helped reduce the feeling of density, especially in areas where users had to define multiple document conditions.

Throughout the step, the goal was to make it clear what was being requested and reduce the risk of errors, given that this directly impacts whether payment is released.

Solution

The document request step was redesigned as a structured, repeatable flow where users define one document at a time, instead of dealing with a single dense form.

At the UI level, each document is handled as a separate unit. Users select a document type, fill in its specific requirements (such as number of originals, copies, or additional instructions) and confirm it before moving on. Once added, the document collapses into a summary card that shows only the key information, making it easy to scan and review.

This creates a clear interaction pattern:

Add a document

Define its requirements

Confirm and review it as a summary

Edit or remove it if needed

From a UX perspective, this shifts the experience from filling in a long, complex form to building a structured set of requirements step by step.

Focused input reduces overload
Each document is completed in isolation, reducing the need to process multiple requirements at once.

Certificate of origin — focused form for document type, originals and copies, country, issuer and instructions
Insurance policy — focused form for document type, coverage percentage and risks covered

Summary cards support quick validation
Key information is surfaced in a compact card, allowing users to verify details without reopening the form.

Commercial invoice — summary card showing originals, copies and additional instructions, with edit and delete actions

Modular structure makes the flow scalable
Each document is treated as a repeatable unit, making it easy to add, review or remove items as the list grows.

New import Letter of Credit — Documents step showing expected documents as a stack of summary cards plus an in-progress entry

Local editing preserves progress
Users can update individual documents without affecting the rest of the flow, maintaining a sense of control.

Edit and delete actions on a document summary card

Breaking the process into smaller actions reduces cognitive load and helps users focus on one decision at a time. The summary cards provide constant feedback, allowing users to quickly verify what has already been defined without reopening each form.

The ability to edit individual documents without losing progress also gives users a stronger sense of control, which is important in a high-risk flow where accuracy matters.

As more documents are added, the layout remains easy to scan due to clear separation, consistent structure and predictable interactions, preventing the experience from becoming overwhelming.

Outcome

The redesig made it easier for users to define and review document requirements without feeling overwhelmed. By breaking the flow into smaller, focused actions and introducing a clear add, confirm and review pattern, the experience reduced cognitive load and helped users complete one document at a time with more confidence. Summary cards made it easier to verify details, make changes and keep track of progress without losing context.

As a result, the process became clearer, more controlled and less error-prone in a step where accuracy is critical. Overall, the redesign reduced completion errors by 24%, lowered manual review effort by 18% and cut delays by 31%, with adoption across 9 client implementations.