Building trust and reliability so that global finance teams could act without calling the bank.
Overview
A slow and page-heavy import reconciliation tool became one clients could trust and self-serve. I led the redesign across all three reconciliation states, partnering with Product & Engineering to reshape how dense regulatory data meets the client. The tool served importers across several markets; the highest-value book anchored the bet.
On a global bank’s treasury platform, corporate importers track and clear unfinished cross-border purchases against a country’s import regulations.
The clients are corporate importers: companies buying goods from overseas, each on the hook to prove to the regulator that every purchase cleared the country’s import rules. They come to the tool with three jobs:
Above all, they need to trust the tool enough to act on it without calling the bank.
Defines the reconciliation rules every open record is measured against.
Monitors and reports records upstream, and surfaces what is open to the client.
Resolves open records and carries the regulatory liability back upstream.
What they’re really after: proof the import is settled, and a certificate they can claim for tax credits.
The client has paid the supplier abroad and is waiting on proof the goods arrived.
The client's imported goods have cleared customs, but the payment that closes them out is still pending.
The client downloads a certificate confirming the record is settled, and uses it to claim tax credits.
The existing tool was built on a legacy tech stack, reflecting the business logic of the time – not the client’s jobs to be done. I held numerous whiteboarding sessions with the executive product director of global trade to identify key issues and ideate how we can transform the platform.
Review outstanding aging across the donut charts.
Locate invoices in a paginated grid per entity.
Open each record on a dedicated detail page.
Legacy Outstanding BOE journey: dashboard, per-entity grid, and full-page record detail.
The only aging view sorted everything into a single bucket, “more than 3 years,” so the ring always read 100%. It couldn’t answer the one question that mattered: of everything outstanding, which records are closest to a penalty?
Records were split into a separate paginated grid for every importer entity (IE), each showing only a few fields and a handful of rows at a time. With no global search or filter across them, finding one record meant paging through grid after grid.
Acting on a record meant leaving the list for a separate full-page screen. Hitting Back dropped you at the top; you lost your place every time.
The challenge was to turn that flow into an experience clients could read, trust, and act on in one place.
Before designing a single screen, I mapped all three reconciliation states against one page skeleton: summary metrics and two decision-focused charts up top, a configurable data grid below, and record detail in a side drawer.
After creating the blueprint for the UI, I collaborated with our design systems team to utilize our latest approved & tested patterns. At the same time, we were able to successfully push our design system forward and be the first team to introduce expandable record drawers – an incredibly useful pattern for complex payments workflows.
The design-system pieces behind the screen — approved patterns from the library, plus the expandable record drawer we contributed back.
Record detail opens in a drawer, so the list never leaves the screen (two steps instead of five). The toolbar puts Filters, Columns, and Export within reach.
The redesigned Outstanding BOE overview — click View Details to open the record drawer.
Working alongside Product, we mapped relevant fields to the grid, drawer, or export. The grid defaults to nine columns—invoice number, amount, currency, BOE date, BOE number, status, AD code, supplier, and actions. Invoice amount and BOE status stay in every row so treasury can prioritize payment without opening each record. IE code, unrealized amount, port codes, invoice charge lines, and supplier address sit in the drawer. Export carries the full field set for audit and internal reporting. Columns remain configurable.
Default grid columns: invoice, amount, currency, dates, status, AD code, and supplier—settlement state visible in every row.
Status markers sit in every row so importers can scan the grid without opening a record. Unpaid shows as an open circle; Partially Paid as a half-filled circle.
Two settlement states, readable at row level—enough to spot what still needs action in a long list.
Clients needed to read penalty risk at a glance, not decode a chart. Labeled aging buckets surface the oldest, most exposed records first: a decision tool instead of decoration.
One bucket, one ring at 100%: no way to see which records are closest to a penalty.
Finer buckets reveal the spread the donut hid, ranking the 3-year+ band (the real penalty risk) to the front.
Only a bar per aging bucket made the oldest, most exposed band impossible to miss.
The redesigned experience piloted with seven enterprise importers: a global automotive manufacturer, a multinational tire maker, a major home-appliances brand, and a global networking firm among them. Feedback was positive across all three flows:
Learnings