B2B SaaS Expense Auditing Dashboard Web

  • How might we design a comprehensive web dashboard that leverages automated policy checks and data visualization to allow finance auditors to review, verify, and process 10x the volume of expense reports with zero-tolerance for compliance errors?

  • The Discovery phase focused on understanding the daily grind of the finance power user (the Auditor) and the strategic needs of leadership (the Finance Manager).

    A. Stakeholder & User Interviews

    We conducted interviews with compliance officers, finance operations leads, and target end-users (Auditors).

    • Auditor Insights: Their primary pain point was "The Click Tax"—the number of clicks required to complete a single review. They needed a single, consolidated view for verification.

    • Finance Manager Insights: Their goal was reducing "leakage" (non-compliant spending) and gaining actionable insights into why violations occur (by team, by category).

    B. Workflow Mapping & Data Prioritization

    We mapped the "Manual Review" workflow and identified key decision points. This led to the design principle of "Exception Handling First."

    • Audit Queue Prioritization: Reports were prioritized not by submission date, but by the number and severity of system-flagged violations, directing the Auditor's attention to high-risk items immediately.

    • Essential Data Density: Defined the mandatory data points needed on the main dashboard to triage (e.g., Status, Employee, Violation Count, Total Amount), eliminating unnecessary columns.

    C. Competitive Analysis

    Benchmarking against existing ERP solutions revealed a gap in designing for the human workflow. Competitors offered data but lacked the interactive tooling necessary for fast judgment calls.

  • The development phase focused on creating a high-fidelity, high-utility interface optimized for speed and complex data input.

    A. The "Single-Pane-of-Glass" Audit View

    To combat the "Click Tax," we designed the Single Expense Report Detail View as an adaptive, multi-pane environment:

    • Split-Screen Design: The receipt/evidence pane is permanently visible alongside the transaction data pane, removing the need to switch tabs or download documents.

    • Contextual Policy Display: When a transaction is flagged, the exact policy rule triggered (e.g., "Max Dinner $50") appears adjacent to the violation, enabling rapid policy enforcement.

    • Decision Acceleration: Approval/Rejection buttons are large and clearly differentiated, reducing cognitive friction during high-volume review sessions.

    B. Automated Violation Indicator System

    We designed a consistent, color-coded visual language to communicate compliance status at a glance:

    • Violation Chips: Small, scannable chips in the report table instantly indicate compliance status (e.g., Missing Receipt (Red), Over Budget (Yellow)).

    • Reason-Driven Rejection: The rejection modal was redesigned to require an auditor to select a defined policy reason, ensuring standardized, professional feedback to the employee, and providing clean, categorical data for future analytics.

    C. Intuitive Policy Governance UI

    The Policy Management Screen was designed with a visual, wizard-like structure to empower non-technical Finance Managers to manage governance rules without developer support. This included designing a simple IF/THEN logic builder and a Policy Test playground.

  • High-Fidelity Web Prototypes

    Fully functional prototypes for the Auditor Home Dashboard and the Single Expense Report Detail View.

    Demonstrates interaction design for complex data tables and high-density layouts.

    B2B Design System

    A component library featuring data grids, advanced filtering mechanisms, and the custom Violation Indicator set.

    Showcases ability to design scalable, reusable enterprise components.

    Annotated Wireframes

    Detailed wireframes of the Policy Management Rule Builder, emphasizing the logic and governance workflow.

    Proves expertise in designing configuration and administrative tools.

    User Flow Diagrams (Lanes)

    Visualized flow showing the handoff between Employee (Submit), Manager (Approve), and Auditor (Final Check).

    Highlights understanding of multi-user enterprise workflows and roles.

    Analytics Dashboard Mockups

    Data visualization concepts for Finance Managers, including charts for spending leakage by department and policy failure rates.

    Demonstrates skill in converting raw operational data into strategic insight.