I redesigned business billing for a national wireless carrier so owners can see exactly what they owe, and every design passed accessibility testing before launch.
I designed the billing, payments, reporting, and account management screens that business customers use to understand a bill, pay the bill, and track every financed device. I gave each of the three amounts on a business bill its own name, and I partnered with the carrier's accessibility team so every design passed accessibility testing before launch.
Client
A national wireless carrier
I changed names and details to respect my nondisclosure agreements.
My role
Principal product designer
Focus
Billing, payments, and equipment for business accounts
Result
Every design passed accessibility testing before launch
One business bill was asking a single number to mean three different things.
Business customers manage many accounts and many lines at once, from a small studio with a handful of phones to a company with crews in the field. The billing summary they opened every month looked and worked differently from the consumer app that the same people used for their own phones.
The bigger issue sat in the numbers. A business account can carry a total balance in the tens of thousands of dollars, an amount due this billing period, and an amount due right away when a bill is past due. The old summary did not tell those three amounts apart, so a billing admin could not be sure which number to pay.
I kept the billing rules as they were and rebuilt everything a customer sees.
The first release had one clear goal: modernize the business billing summary and line it up with the consumer experience, without changing the billing logic underneath. Click or tap a card to turn it over.
A billing admin can tell at a glance what is due now, what is due next, and what is still ahead.
The summary opens with the one amount that needs attention first. When a bill is past due, the summary leads with the past due amount and the words Due now. When nothing is past due, the summary leads with the amount due this billing period and its due date.
Underneath, three panels show every amount side by side with its own name. The total account balance includes device installments that are not due yet, so the balance never gets mistaken for the bill.
- The account list shows every account's due date, amount due, and status, with a Make a payment link on every account that owes money.
- Billed lines show how many lines were added and canceled this month, and the canceled lines open into a list.
- The account breakdown shows cost by department, so a business can see which team is driving the bill.
- The Equipment tab shows each financed device, its monthly payment, and the amount left to pay.
- Settings put AutoPay, paperless billing, and the billing address on one page.
Pay a past due bill the way a billing admin would.
I rebuilt the billing experience as a working prototype from my design files, with AI writing the code from my designs. The business, accounts, devices, and amounts are all invented sample data.
Things to try
- Open Main office and compare the three amounts at the top of the summary.
- Choose Make a payment, press Submit with the form empty, and use the error links to fix each field.
- Open the Equipment tab and expand a device to make an extra device payment.
- Turn on paperless billing in Settings and save the email address.
- Search the account list for crews, or filter the list to show only past due accounts.
One bold accent for action and calm neutrals for the numbers keep a dense bill readable.
I pulled this style guide from the prototype above. I rebuilt the screens in a current business carrier style under the Haven Wireless name, with a black rail, one bold accent color, square controls, and text colors that all pass current contrast standards.
Color
- Haven magenta
#E20074Primary buttons, the selected tab, the current rail item, and the current bill in the chart - Deep magenta
#B8005ELinks, text buttons, and the hover state of primary buttons - Ink
#141414The top bar, the side rail, headings, and earlier bills in the chart - Slate gray
#595959Labels, due dates, and supporting text - Field gray
#767676Input, select, and search borders, so every control meets 3 to 1 contrast - Canvas
#F4F4F4The page behind the white cards - Past due red
#C4122FDue now amounts, the Past due status, and error messages, always with words - Paid green
#18794EThe Paid status and AutoPay on, always with words
Type
Headings
Main office
DM Sans
Amounts
$2,140.00
DM Sans
Body and labels
Includes device installments that are not due yet.
DM Sans
Components
Three amounts panel
Due now, due this billing period, and the total account balance sit side by side, each with its own name and a short line that says what the amount includes.
Account list row
Each row shows the account, due date, amount due, status, and a Make a payment link, and on a narrow screen the row stacks with a label beside every value.
Status pill
A soft tinted pill pairs a dot with a word, such as Past due, Due, Paid, or Payment scheduled, so a status never depends on color alone.
Payment method tiles
Bank account, credit card, and debit card sit as three equal tiles, and choosing one shows only the fields that method needs.
Error summary
When a payment cannot go through, a red summary at the top counts the problems and links to each field, and each field repeats its own fix in words.
Installment row
Each financed device opens into its price, down payment, plan start date, and payments left, with one button for an extra device payment.
Principles
- Every amount gets its own name, and no name means two things.
- A status always carries a word as well as a color.
- Business screens look and work like the consumer screens wherever the billing rules allow.
- Every error message names the field and the fix.
Business billing got clearer, and every design passed accessibility testing before launch.
The redesign gave business customers a modern billing experience without changing the billing logic underneath. Click or tap a card to turn it over.
I mapped what business billing needs next.
The first release reused consumer payment patterns on purpose, with the understanding that business accounts carry more complexity, such as many accounts, departments, and payment arrangements. I documented that complexity for a future release. The same habit shapes my AI-native product research and design today: ship the clear version first, and write down what the next version has to solve.
There is plenty more where this came from.
Names, brands, and data in my case studies are changed to protect my clients.
Tell me about your project.
Tell me a little about it on my contact form, and a real person will get back to you soon.