Signing a supplier order

An importer needs to see what they are committing to.

The starting workflow split related information between tables, status labels and individual order pages. The design question was straightforward: can someone understand the cost, progress and next step before signing?

I retained the navigation and terminology to focus the work on the payables flow. The importer, people and amounts in the prototype are fictional; supplier brands appear only as sample data.

Make the wait between payment and repayment understandable.

The journey starts with a draft, moves through signing and supplier payment, then waits for repayment. During that interval, an importer needs to know where the order stands and who holds the next step.

I brought the work into one table with four filters. Within an order, a progress sequence reveals the stage, responsible party and completed dates. Available credit remains visible across the product.

Make the fee part of the decision.

Payout, fee and repayment are presented as one calculation. The reader can check how the total is formed without comparing disconnected columns.

Building the sample data exposed a fault in my initial model: separately entered payout and repayment values could contradict each other. Deriving repayment from payout plus fee keeps the interface and the data aligned.

A consistent product in both themes.

The light and dark themes share the same layout, type hierarchy and components. Changing the theme changes the colour values, not the structure of the workflow.

I also designed loading and failure states for the real table component. When orders cannot load, the message explains what is unavailable and what the user can still rely on.

Keep the terms visible through confirmation.

The order page brings together the cost, progress and next responsible party. The signature dialog states the commitment before it is made, then updates available credit in the prototype.