Invoicing System

  • B2B SaaS
  • Fintech
  • Web
Invoicing System

We replaced a patchwork of manual bank reconciliation and a third-party debt tracker with one invoicing system that works the same way in Switzerland and the UK. I designed this end-to-end, from discovery interviews before a single screen existed, through company settings, invoice creation, and credit notes, to testing every iteration with the back-office team who runs it every day.

Client
Coople
Role
Senior Product Designer
Duration
4 months
Year
2025
Team
4 members: product manager, backend engineer, frontend engineer and me

Overview

Coople issues invoices to companies across Switzerland and the UK, and the two markets had grown two different ways of doing it. In Switzerland, back-office staff matched bank statements to invoices by hand. In the UK, a third-party provider chased outstanding debt and reported partial payments back in Excel, which fed a second Excel, which was uploaded to the finance system every night. Nobody had a live, trustworthy view of who owed what.

I led design on the new invoicing system: company settings (VAT, markup, and payment terms per customer), invoice creation and editing, credit notes, and the payment and debt-tracking views the back office depends on. We started by talking to the teams in Switzerland and the UK to map out how they actually worked today. From there I built a working prototype and tested it directly with the people who'd use it, refining the flow across several rounds. Also, I sat with engineering while they mapped the whole domain as commands, events, and read models, so the interface would speak the same language as the system underneath it.

The result is one invoicing engine that behaves consistently in both markets, with statuses and settings that adapt to how each one actually works rather than forcing a single template onto both.

Reconciliation time saved
~5 hrs / week

per back-office user

Invoices processed
1,000+ / month

across both markets

Billing disputes
−30%

tied to clearer VAT breakdown and per-line editing from testing

Target audience

Invoicing isn't used by one team, or one country. Back-office staff in Switzerland and the UK create, edit, and send invoices every week, each working within their own market's rules. Credit control relies on it to see what's outstanding and chase payment. Finance uses it to get VAT and markup right per company and per country. And it feeds the customer account, where Coople's own clients, in both markets, see and pay their invoices.

Discovery

Four parallel libraries, no shared primitives, and a quarterly drift problem. Each white-label brand was patching components in isolation, with accessibility regressions appearing weeks after merge.

A two-week audit of the four libraries cataloged 87 unique button variants and 14 different definitions of "primary color." The cost wasn't aesthetic — it was the engineering hours rebuilding equivalent components across teams.

Concepts and testing

Three tiers — primitives (raw values), semantic aliases (intent), and component tokens (binding). Each tier is owned by a different group, which reduced cross-team negotiation from days to hours.

The architecture was prototyped on two components (Button, Input) and sanity-checked with two pilot teams before rolling out the full library.

Mockups

Token tiers, ownership boundaries, and theming surface.

Final testing

Pre-GA, two pilot teams ran the new library against their existing screens for a full sprint. Friction logs from that sprint drove the final naming pass — semantic aliases were renamed from intent verbs to noun pairs after engineers consistently misread the verb forms.

Challenges and Learnings

The hardest part was governance, not architecture. Each tier needed a clear owner and a clear contribution path; without that, contributions stalled in review and teams quietly forked components again. The RFC template and a weekly office-hours slot did more for adoption than any single technical decision.

Next steps

Token tooling is moving from Figma variables to a Style Dictionary pipeline next quarter so brands can be theme-swapped at build time. The component contribution path is being formalized with a reviewer rotation across the 12 product teams.