OBJECTIVE

OBJECTIVE

To design an internal billing and reconciliation system to help financial teams identify discrepancies, reduce manual effort, and improve accuracy in high-volume workflows. Focus on simplifying complex data views and enabling faster decision-making. Improve usability while working within enterprise constraints like large datasets and compliance requirements.

CONTEXT

CONTEXT

Finance teams were reconciling invoices manually, cross-referencing spreadsheets, chasing approvals over email, and catching discrepancies only at month-end. Every error introduces audit risk. Every delay extended the close cycles.

DURATION

DURATION

10 weeks

TOOLS

TOOLS

Figma, FigJam, Maze, Jira, Confluence

THE TEAM

THE TEAM

2 Devs · PM · Finance SME · Legal

MY ROLE

MY ROLE

Senior UX Designer

Skills

  • Led user research through competitive analysis, persona development, and usability testing planning.

  • Created wireframes, mid- and high-fidelity prototypes, and interactive design concepts to communicate design direction.

  • Developed and refined designs through iterative feedback and close collaboration with cross-functional teams.

01

The problem

Financial teams struggled to reconcile transactions due to fragmented data, unclear status visibility, and manual verification steps.
This led to delays, increased cognitive load, and a higher risk of reconciliation errors. The system needed to support fast, accurate decision-making in a high-stakes financial environment.

Business problem

Month-end close took 4–6 days. Finance managers spent 40%+ of that time on manual matching. Mismatches flagged late caused payment delays and strained client relationships.

Business problem

Month-end close took 4–6 days. Finance managers spent 40%+ of that time on manual matching. Mismatches flagged late caused payment delays and strained client relationships.

User problem

No single workflow. Reconcilers jumped between the billing tool, email threads, and spreadsheets. Approval status was invisible until someone asked. Auto-match results weren't trusted.

User problem

No single workflow. Reconcilers jumped between the billing tool, email threads, and spreadsheets. Approval status was invisible until someone asked. Auto-match results weren't trusted.

02

User Research

Conducted 6 stakeholder interviews (finance managers, clerks, a compliance officer) + competitive analysis of enterprise billing tools.
Key method: contextual inquiry, observed live reconciliation sessions to capture workarounds.

03

User Flow and Affinity Map

Simplified the workflow into sequential, recoverable stages. Each stage has a clear entry/exit state, preventing mid-flow confusion and creating a full audit trail per invoice.

Key UX Decisions
  • Consolidated fragmented data into a single dashboard to reduce context switching

  • Introduced clear status indicators to improve scanability and reduce errors

  • Structured workflows into sequential steps to guide users through complex tasks

  • Used progressive disclosure to prevent information overload

Key UX Decisions

  • Consolidated fragmented data into a single dashboard to reduce context switching

  • Introduced clear status indicators to improve scanability and reduce errors

  • Structured workflows into sequential steps to guide users through complex tasks

  • Used progressive disclosure to prevent information overload

View User Flow

Trade-offs & Decisions
  • Balanced data density with readability by grouping related information instead of showing everything at once

  • Simplified workflows while ensuring compliance requirements were still met

  • Prioritized critical actions over secondary features to reduce decision fatigue

View Affinity Map

04

Wireframes & Key Screens

Progressed from mid-fi flows (validated with stakeholders in sprint reviews) → high-fidelity screens. Key screens annotated with interaction rationale for dev handoff. In respect of a signed NDA, high-fidelity screens from this project cannot be shared publicly.

View Wireframes

05

Key Design Decisions

AI confidence display

Showing "95% confidence" alongside auto-match details, not just "Suggested: Yes", increased user trust from 34% to 71% in testing. Users needed to understand the basis of the suggestion, not just see the result.

AI confidence display

Showing "95% confidence" alongside auto-match details, not just "Suggested: Yes", increased user trust from 34% to 71% in testing. Users needed to understand the basis of the suggestion, not just see the result.

Side-by-side matching panel

Auto-match and Manual Match presented simultaneously, not sequentially. Reduces cognitive switching and prevents users from defaulting to manual every time, which was a key ops inefficiency.

Side-by-side matching panel

Auto-match and Manual Match presented simultaneously, not sequentially. Reduces cognitive switching and prevents users from defaulting to manual every time, which was a key ops inefficiency.

Inline approval status pipeline

3-node inline tracker (Requested → Under Review → Success) replaces email-based approvals. Managers see status without leaving the tool; clerks don't need to follow up manually.

Inline approval status pipeline

3-node inline tracker (Requested → Under Review → Success) replaces email-based approvals. Managers see status without leaving the tool; clerks don't need to follow up manually.

Breadcrumb + step progress persistence

Breadcrumb and stepper are visible on every step. Finance users working across 50+ invoices needed orientation at all times; removing it increased error rates in early testing.

Breadcrumb + step progress persistence

Breadcrumb and stepper are visible on every step. Finance users working across 50+ invoices needed orientation at all times; removing it increased error rates in early testing.

06

Compliance & Accessibility

Colour contrast — WCAG 1.4.3

All text meets 4.5:1 minimum. Status badges (Pending, Approved) use accessible teal/amber pairs, not red/green alone — critical for colour-blind users.

Colour contrast — WCAG 1.4.3

All text meets 4.5:1 minimum. Status badges (Pending, Approved) use accessible teal/amber pairs, not red/green alone — critical for colour-blind users.

Keyboard navigation — WCAG 2.1.1

Full tab order mapped. Every interactive element reachable by keyboard. Escape closes modals. Focus traps removed. Tested with NVDA + JAWS screen readers.

Keyboard navigation — WCAG 2.1.1

Full tab order mapped. Every interactive element reachable by keyboard. Escape closes modals. Focus traps removed. Tested with NVDA + JAWS screen readers.

Focus indicators — WCAG 2.4.7

Custom focus rings on all interactive elements. 3px offset ring in brand blue. Removed default browser outlines only where replaced with visible custom states.

Focus indicators — WCAG 2.4.7

Custom focus rings on all interactive elements. 3px offset ring in brand blue. Removed default browser outlines only where replaced with visible custom states.

Error + status messaging — WCAG 3.3.1

All error states include inline text, not just colour change. "Approval Pending" shown as text + icon. Meets AODA's requirement for non-visual status communication.

Error + status messaging — WCAG 3.3.1

All error states include inline text, not just colour change. "Approval Pending" shown as text + icon. Meets AODA's requirement for non-visual status communication.

07

Stakeholder Alignment

Stakeholders required visibility into multiple financial metrics, while users needed clarity and simplicity. To balance this, high-priority insights were surfaced first, with secondary data progressively disclosed. This ensured usability without compromising business and compliance requirements.

08

Result and Impact

Reduced time to identify reconciliation issues

  • Improved accuracy by making system status and data relationships clearer

  • Reduced cognitive load through structured workflows and prioritization

  • Increased efficiency for teams handling high-volume financial data

Key outcomes post-launch:

  • 62% reduction in time-to-reconcile per invoice

  • Zero approval-related close delays, down from 3–4 per cycle

  • 100% WCAG 2.1 AA pass rate.

09

Future Considerations

The current flow solves for a single user. The data model was built to support a team-level manager view, all in-flight reconciliations, and approval bottlenecks surfaced at a glance — but it was scoped out of v1 to keep the release focused.

Highest-priority next features:

  • Advanced filtering and search for large datasets

  • Role-based dashboards for different financial user groups

  • Audit trail visibility for compliance and tracking

  • Analytics to monitor workflow efficiency and drop-offs

10

What I learnt

Watching users interact with auto-match taught me that transparency is the feature, not a nice-to-have. A 95% confidence score meant nothing without showing what it was based on. 4 participants dismissed it as noise until the rationale was visible.

Compliance requirements are design inputs, not constraints. Reframing the audit trail requirement as the brief, rather than designing around it, made every subsequent decision clearer and faster.

Thank you for reading!