B2B SaaS · Invoicing

Integrated invoicing for a construction-materials testing platform — turning handwritten field notes into one-click billing.

Invoicing module for Metafield, a B2B SaaS used by construction materials testing firms.

1
Role

UX Designer

2
Team

1 Designer · 1 PM · 1 QA · 3 Fullstack Engineers

3
Tools

Figma · Adobe Illustrator · Maze

4
Timeline

4 months · 2024

Overview

Metafield is a B2B SaaS used by companies like Agile Frameworks to test construction materials — concrete, soil, asphalt, aggregates — against regulatory standards. The legacy invoicing process was manual, error-prone, and opaque. I led UX end-to-end to design an integrated invoicing module that streamlines creation, approval, and tracking while giving project managers real-time financial transparency.

From handwritten field notes and 3-week approval cycles to a streamlined dashboard → create → preview → send flow.

User Research

Mixed-methods research over two weeks combining in-app surveys and remote interviews to understand how field workers, admins, and project managers actually handled invoicing across multiple sites.

56
Users

Survey

An in-app survey reached 56 active users across admin, field, and project-manager roles. It captured how invoices were currently created, where time was lost, and which steps caused the most disputes with clients.

10
Questions

Interviews

7 remote, moderated interviews over 2 weeks using a 10-question open-ended script. Sessions paired walk-throughs of the existing flow with retrospective questions about the worst billing month they could remember.

1
Manual entry was the single biggest failure point.

Field data arrived as handwritten notes from multiple sites. One mistyped figure rejected the whole invoice and restarted the loop.

2
Approvals stalled because no one knew where invoices were.

Without status visibility, invoices sat for weeks. PMs only chased what they could remember.

3
Disputes traced back to opacity, not amounts.

Clients pushed back when line items lacked context. Transparent, itemized previews reduced friction dramatically in concept tests.

Challenges

  • Field workers used handwritten notes across multiple sites, causing data-entry errors and delayed invoices.
  • The lag between service delivery and invoice compilation created recurring cash-flow problems.
  • No real-time invoice status led to frequent disputes and strained client relationships.
  • Approval cycles could take weeks, with invoices sitting unseen in inboxes.

User Persona

SM

Sophie Mathews

Age: 45

Role: Project Manager

Location: Bengaluru, India

Runs multiple concurrent construction testing projects. Comfortable with software but starved for time — every minute spent on invoicing is a minute not spent on the job site.

Pain Points

  • Lacks a simple, fast way to approve invoices without delays.
  • Manual invoicing is time-consuming and causes bottlenecks.
  • Invoices frequently contain errors, triggering back-and-forth between contractors and finance.

Goals

  • Manage budgets and track invoices efficiently across multiple projects.
  • Ensure accurate and timely invoice approval to avoid payment bottlenecks.
  • Monitor approved invoices and costs against project budget.

Needs

  • A glanceable dashboard of WIP, drafts, and approved invoices.
  • A way to pull billing transactions directly into an invoice — no retyping.
  • A clean preview to verify everything before sending.

Defining the User Flow

PM Dashboard
Create Invoice
Add Billing Transactions
Group into Tables
Invoice Preview
Send to Client
Track Status

Simplified flow — full FigJam map available on request.

The Solution

An integrated module built around four key screens — a PM dashboard, an invoice builder, a searchable transaction picker, and a clean preview — designed to remove manual entry wherever possible.

Project Manager Dashboard

Glanceable overview of total project budget, Work in Progress (WIP), draft invoice count, and billing contact. Quick search across transactions and invoices.

Create Invoice screen

Form fields for billing contact and invoice details, plus a flexible table for adding billing transactions. Multiple named tables can be grouped before sending.

Add Billing Transactions

Searchable list of unbilled work items. Users select single or multiple items to add directly to the invoice — eliminating retyping.

Invoice Preview

Clean, finalized view with all tables, totals, and dates. Last-minute edits land in the same screen — no round-trip required.

Product Walkthrough

A short video tour of the final experience — flows, micro-interactions, and the rationale behind key decisions.

Testing Details

  • Unmoderated remote testing with 20 users via Maze.
  • Three core tasks: create an invoice, add a billing transaction, preview and send.
  • Task completion rate: 85% (17/20 users).
  • Average task time: 3 min 42 sec · Error rate: 20% (4/20 tasks) · CSAT: 4.3 / 5.

Most observed errors clustered around adding multiple work items to a single table — a clear target for the next iteration.

85%
Task completion rate (17/20 users)
3:42
Avg. task time (min:sec)
20%
Error rate across test tasks
4.3/5
User satisfaction score

The research phase reframed the work entirely — from 'make an invoice form' to 'solve multi-site data collection and approval delays.' Future iterations will target the 20% error rate (mostly in multi-table item entry) and explore automated reminders for stalled approvals.

Next case study
Mobile App · Urban Mobility
Parkon — Car Parking App9/10 booked in <90s · 100% preference vs. current tools
© 2026 Surya DashDesigned & built in LisbonAvailable Q3 2026