Smart Invoice A utility bill people can actually read

Utility bills were built around the billing system, not the people paying them. What customers needed most, how much they owed and by when, sat among rate tables, meter codes and fine print. The online bill didn’t even offer a PDF download.

So customers called customer service just to understand their bill and double-check the numbers. Screen reader users had no reliable way through it at all.

How much do I owe? When is it due? Why is it this amount? Most people only need the first two. Some need the third, in full detail.

So the bill answers the first two at a glance and keeps the third one tap away. Nobody asked for this redesign. I designed it, built it and pitched it as a product.

The top of the bill is a summary bar: amount due, due date with a countdown, and usage compared with last year. Next to it sit the three things people actually do with a bill: pay it, take the tour, or have it read to them.

The printed and PDF bill follows the same order: three answer cards on page one, the payment stub at the bottom, and every charge itemised on page two.

Three questions organise the rest of the bill. Each section opens to the full detail, so nothing is removed from the bill. It’s just no longer in the way.

• What am I paying for? One bar splits the total into supply, delivery, regulatory charges and tax, each with its share of the bill.
• How much did I use? A 13-month chart compares this bill with last year, the 12-month average or any month, and states the change in plain words.
• When do I use it? The time-of-use split shows how much power was used off-peak and when each rate applies.

Accessibility was part of the structure, not a final pass. VoiceOver users move through the bill as easily as anyone else.

• Real headings. One H1 and an H2 per section, so screen reader users can jump straight to what they need.
• Full labels. Every control says what it does, for example “Pay $142.86, due November 24”.
• Announced states. Expandable sections announce whether they’re open or closed.
• Charts in words. Every chart has a plain-language summary and an accessible data table.
• Not colour alone. Changes pair colour with arrows and words, and text meets 4.5:1 contrast.

A five-step guided tour spotlights each part of the bill: the account, what you owe, when it’s due, how your usage compares, and how to have the bill read to you.

Read my bill goes further. It highlights the four key facts one at a time and reads each one aloud in plain language, with pause, skip and speed controls. It answers the questions that used to become phone calls.

The Smart Invoice started as my own concept. I designed it and built its front end, working with a team of developers who connected it to the existing billing system.

I was in the room for the first client demo, with a major US utility. They loved it and asked to launch it as soon as possible. KUBRA adopted it as a product, and within weeks the developers were asking me for versions for other clients.

Calls to customer service about the bill dropped by at least 15%, and at least three utilities had launched it by the time I moved to another team.

This recreation is built on a design system with variables: one set of components drives the print bill, the desktop bill and the mobile bill.

Next, I’d add a plain-language “Explain my bill” assistant that answers only from the customer’s own billing data, and run automated accessibility checks on every release instead of once at the end.