QuickBooks Invoicing

Why weren't invoices getting paid?

For
Intuit QuickBooks
Role
Senior Visual Designer
Team
Content Designers
Product Designers
Product Managers
Developers

Overview

I was the visual designer on QuickBooks invoicing for almost five years. These are three projects from 2018 and 2019.

An invoice from a design studio called Ox & Bee, with a purple script logo, purple headings and a lavender band for the customer details.

Problem

QuickBooks invoices were built for recording money, not getting paid.

Why it mattered

Small businesses run on cash flow. Every late payment hurts.

Goal

Help small businesses get paid faster.

Outcome

Invoicing grew 9x in two years, and the payment tracker earned two design patents.

The problem

QuickBooks invoicing was built from an accountant's point of view, not the business owner's.

Owners couldn't see where their money was. Most invoices couldn't take a payment, so owners got paid through other services and used QuickBooks just to keep records. And the invoice was one-size-fits-all, no matter whose business sent it.

What we found

Talking with customers showed what was behind each problem.

A status wasn't enough. "Viewed" or "Deposit failed" didn't say when the money would arrive or what to do next.

Payments were hard to find. Invoices paid online got paid 3x faster, but only 7% of invoices sent could take a payment. Payments was a separate add-on, and customers who wanted it couldn't find it.

Looks mattered. Professional-looking invoices were more likely to be paid. Owners wanted their invoices to look like their business, without designing one from scratch.

What we did

Payment tracker

Leadership wanted to keep the old horizontal tracker. I had a feeling it wouldn't fix what customers told us. Then our product manager suggested testing it in German and Portuguese, and the longer words got cut off.

The horizontal tracker in Portuguese and German. “Depositado” loses its last letter, and “Gesendet” and “Anzahlung in Wartestellung” run past the card’s edges.
Screenshots from the product at the time.

So I turned it 90 degrees. Each step got its own line, with room for longer words and details like dates, late fees and partial payments.

The vertical tracker: Created, Sent, Viewed, Paid and Deposited, each on its own line, with a date and help text under Created.

Payments setup

Payments moved to the start: when owners set up their first invoice, they also chose how they wanted to get paid.

Our design system's patterns added up to a lot of noise. Everything sat in a card, next to illustrations nobody needed and a step indicator never designed for mobile. So I cut what distracted from the task, and the content designer did the same for the words and the flow.

Before and after of the step where owners choose how to get paid. Before: a step counter, cards, badges and illustrated icons. After: one question and a plain list of payment options.

Invoice customization

A template gave owners a starting point. From there they could pick colors and add their logo, and the invoice worked online, on mobile, and in print.

The invoice editor’s customization panel: the uploaded Ox & Bee logo, color swatches with a custom purple (#6100C2) selected, and the font set to Avenir Next, beside the invoice in that purple.

Results

9x growth

in customers using invoices in just two years

July 2022

175,000

customers a month using invoices

July 2024

1,600,000

customers a month using invoices

The team credited customization for the jump.

Payments setup shipped in May 2019. The payment tracker took longer: another team built it after I left, and it earned me two design patents (D915420 and D986257).

Happy ending, right? Not quite

For customization, the design system didn't have what we needed. Our developers proposed reusing existing components in new ways, and I adjusted my designs to fit their idea. We were overruled: build new pieces now, and let the design system adopt them later. That never happened, and what shipped looks very little like what I handed off.

The shipped invoice in an email on a laptop, with the invoice preview overlapping the email text behind it.
The invoice on a laptop. Yikes.
The shipped invoice email on a phone: the business logo, the balance due and a View invoice button in a generic layout.
On a phone. Double yikes.

Reflections

On the tracker, my hunch wasn't enough. Our PM's language test was: a screenshot of cut-off German text changed leadership's mind. Now I look for proof before I push back.

Customization taught me the bigger lesson. When the design system doesn't fit the product, fix the system. Don't build around it.

I wasn't a systems designer yet. This project is why I moved to what became the design systems team.