I tested a national telecom provider's new billing and help designs with customers, and my findings gave the team a clear list of fixes before a single page was built.
In one day of remote sessions, I watched eight customers sign in, read a bill, pay, set up automatic payments, dispute a charge, and look for help. I turned what they did into specific design changes, including plain names for every amount, confirmations that answer every question, and a help flow that prepares people for a call instead of steering them away from the phone.
Client
A national telecom provider
I changed names and details to respect my nondisclosure agreements.
My role
Product researcher
Focus
Online billing, payments, and help for home phone, internet, and TV
Result
All but one customer preferred the friendlier help flow
Customers paid their phone and internet bills online, but they did not trust the bills.
In late 2013, a national telecom provider was redesigning the online account where residential customers manage home phone, internet, and TV. The provider wanted customers to feel welcomed, valued, and supported, to use the website more, and to call the service center less. The design team had wireframes for the account summary, the bill, payments, automatic payments, disputes, the profile, and troubleshooting.
I was brought in as the researcher to find out whether customers could use those designs with confidence before anything was built. Every person I tested with paid bills online, and every one of them was frustrated with telecom websites. Many felt that telecom companies nickel and dime their customers, so a bill that looked a little higher than usual could turn into an angry phone call.
I planned, scripted, and moderated the whole study around the questions the team needed answered.
The study covered six areas in one fixed order: sign in, the account summary and navigation, the bill, paying, managing payments, and help. Click or tap a card to turn it over.
People care about time, money, and a real person when something goes wrong.
The wireframes were well thought out, and customers understood the purpose of the site right away. They liked seeing the amount due, the due date, a big Pay bill button, and the phone number the moment they signed in.
The trouble showed up in the details that decide whether someone trusts a bill. These are the patterns I saw across the sessions.
- Customers paid a bill without a second look when the amount matched last month, and they studied the bill and then called when the amount went up.
- People stopped to work out the difference between the current balance, recent payments and credits, and the amount due.
- Blue meant action, and when people got stuck, they went back to the blue links and buttons on the page.
- A visible phone number built trust, and people disliked having to dig for the number.
- When people needed help, they called first, tried again second, searched the site third, and used chat only when a real person answered.
- People wanted every confirmation to say what was received, when the payment would come out, which account paid, the confirmation number, and where the email went.
- Many people used automatic payments for steady bills and avoided automatic payments for bills that change from month to month.
Six changes would let customers finish every task with confidence.
I wrote each recommendation so the design team could act on the recommendation in the next round of wireframes. Click or tap a card to turn it over.
Pay a bill that went up, and see the finding behind every design choice.
This prototype is a concept that applies my recommendations, rebuilt in a current style under the sample name Haven Telecom, with AI writing the code from my findings. The wireframes I tested belonged to the client's design team, so nothing here copies their screens. Jordan Rivera, the account, and every amount are sample data.
Things to try
- Turn on Research notes in the top bar, then open any yellow number to read the finding behind that part of the design.
- Choose See what changed to find out why this bill is $23.00 higher than last month.
- Pay the bill with a new bank account, press Pay with the fields empty, and use the error links to fix each field.
- Set up AutoPay with a limit from the payment confirmation, and then turn AutoPay off again.
- Open Help, choose Internet, and work through the checks until you get a code for your call.
A dark bar, one action blue, and plenty of white space keep a bill calm and easy to act on.
I pulled this style guide from the prototype above. Haven Telecom keeps the brand red to a single dot and the current page marker, because the study showed that customers read blue as the color of action. Every text color passes current contrast standards.
Color
- Action blue
#1D4ED8Every button and link, and nothing else - Deep blue
#1638A8Hover states for buttons and links - Night
#16161AThe top bar, headings, amounts, and the help banner - Slate
#5B5B66Labels, dates, and supporting text - Haven red
#E4002BThe brand dot, the current page marker, and message counts - Linen
#F6F5F3The page behind the white cards - Change amber
#8A4B00A bill that went up and charges tagged New, always with words - Done green
#157A45Confirmations, services that work, and AutoPay when on
Type
Wordmark
haven telecom
Figtree
Amount due
$119.42
Figtree
Headings
We received your payment
Figtree
Body
This bill is $23.00 higher than last month.
Figtree
Components
Amount due with its math
The amount due leads with its date, and underneath, the last bill, the payment received, and the new charges add up like a receipt.
Bill change alert
A short amber note says how much the bill went up and why, and a link opens the bill at the exact line.
Expandable bill lines
Each line opens into every charge inside the line, with a New tag on fresh charges and a dispute link beside each one.
Five-fact confirmation
Every confirmation names what was received in the title and lists the same facts in the same order.
Call preparation
One check at a time, the phone number always in view, and a code at the end that tells the agent what the customer already tried.
Research note marker
A yellow numbered dot opens the study finding behind a design choice, so a reviewer can trace every decision to evidence.
Principles
- Make every action blue and keep blue for actions only.
- Give every amount a plain name and a date.
- Confirm what happened, every time, with the same facts.
- Keep the phone number in view and help people prepare for a call.
The team left the study with an answer to every question and a fix list for the next round.
This study was qualitative, so the results are decisions rather than percentages. Click or tap a card to turn it over.
I bring the same research to any team that sends people a bill.
As a principal designer offering AI-native product research and design, I help teams find the exact moments where a bill, a payment, or a help page loses a customer's trust, and I turn those moments into changes a design team can make right away. If your customers call every time their bill changes, I would be glad to test that flow with them.
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.