Designing the page everyone visits and nobody enjoys.
Each screen here is a negotiation between competing claims on the same space — balance, activity, explanation, settings, offers — while the customer is usually looking for exactly one thing.
Everything competing for the same page
This is the full page as it stood before the reframe — and the density is the point. Balance, bill changes, last bill, per-line activity, Highlights, a quick-action row, Manage settings, Helpful links, a Customer Service Summary prompt, and three offer tiles all compete for one customer's attention.
The hierarchy decision: balance and bill activity own the left column, because they're the reasons people came. Settings and discovery live right. Offers and rewards sits below the fold — present, but never competing with the task.
Several details earn their place. The balance reads $00.00 with “AutoPay charged your VISA ending in 1234” directly beneath, so the most common visit ends in reassurance before any scrolling. “Changes on your last bill” — Your bill went up by $20.00 this month with a See why button — answers the page's dominant question proactively rather than waiting to be asked.
The bill block does real work too: Last bill, Nov 26–Dec 25, $145.96, an estimated savings total of $132.00 with a link to view discounts, then each line itemized by name with its own $10 discount badge. Someone auditing a bill can see both the total and the arithmetic behind it without leaving the page.
The module that didn't survive: the “I want to:” row — three fixed buttons for View all activity, Manage profile, and Manage payments. It shows everyone the same three things regardless of what's happening on their account. The next screen replaces it with actions that respond to account status, and that comparison is the clearest before-and-after in this case study.
Helpful links leads with Find out why your bill changed, because after two years of session research that remains the single most common intent on this page.
Leading with the bill, not the balance
Compare this against screen 01 and one module is simply gone. The old page opened with Current balance; the redesign opens with Last bill — Nov 26–Dec 25 — $145.96.
That inversion came from a finding that sounds almost too simple to be real: customers didn't understand this page was their current bill. They arrived wanting to see what they owe, met a balance figure, and read the page as an account-status summary rather than the bill itself. Anyone who wanted the actual charges went looking elsewhere — or called.
Leading with the billing period and total makes the page's identity unmistakable in the first line of content. The balance hasn't been deleted; it's been relocated to where it belongs in the story, after the thing the customer came to read.
“Bill highlights and resources” replaces “Highlights.” The original label promised nothing in particular. The new one names both halves of what the module actually does — tell you what happened on this bill, and give you somewhere to go about it.
And the fixed “I want to” row is gone. In its place sits an account-status layer — “We applied a $10.00 credit to your account”, a conditional notification that only renders when something warrants it — followed by six actions that surface dynamically by status: Check data, call, and text activity, See billing history, View payment history, Make a payment arrangement, Manage plans and add-ons, and Update profile. A customer at risk of suspension needs an arrangement; one questioning a charge needs usage. Showing everyone the same three buttons served neither.
Smaller decisions that carried weight
Manage settings became a status board. Each row now states where the customer stands rather than just offering a link — Paperless billing carries a Signed up pill and shows the delivery email inline, Billing language shows English, and Split the bill carries its own Signed up state. That's the SplitPay lifecycle pattern reaching this page: sell before, confirm after.
Inline tooltips instead of a help article. “Split the bill among all the devices within your account” explains an unfamiliar feature at the moment of curiosity — a real fix, because SplitPay's whole problem was that nobody knew what it was.
A “Paid” badge on the savings module. One pill resolves the ambiguity of whether an amount is owed or settled.
Honest link labels. “Changes on your last bill” became “Recent bill changes”, and “See all support articles” became “See billing support” — scoped to this page instead of dumping people into the full support library.
Letting the bill answer for itself
When a customer's bill moves more than ±$5, a component appears in Billing Center pointing here. The page opens by restating the question in the customer's own terms — “Your bill changes”, then “Find out why your bill went up by $20.00 this month” — so there's no doubt they landed in the right place.
Two views used to live separately. A GenAI-written explanation sat in one place and a compare-bill tool in another, which forced customers to assemble the answer themselves. Merging them was the entire point of this work.
Understand your changes carries the generated summary; Compare bill details carries the arithmetic, line by line. Narrative first, evidence second — because someone who accepts the explanation never needs to scroll further, and someone who doesn't gets the receipts immediately below it.
Details worth noting
The AI disclosure is present and quiet. “This content is generated by AI… there may be errors or inaccuracies” sits directly beneath the summary in small type. Legal needed it stated; the customer needed it not to be alarming. Placing it under the content it qualifies — rather than as a banner above — satisfied both.
Dispute is designed in, not hidden. The instruction is explicit: select the line, then Don't recognize this fee, then Dispute this fee. Most billing pages bury this. Naming the path up front is what makes the explanation feel like it's on the customer's side.
Per-line rows show direction, not just delta. Each line carries Difference from last month with a red arrow and the amount, expandable for detail. The arrow does the work at a glance; the expansion serves the minority who want to audit it.
Understanding routes to action. View or download bill and Make a payment sit together at the close — the moment a customer accepts the explanation is the moment they're most likely to pay it.
“Was this info helpful?” A thumbs up/down on a generated explanation is a feedback loop on the model itself, and the only honest way to know whether an AI answer actually answered anything.
The bill that always looks wrong
A first bill is the most disputed bill a customer will ever receive, for entirely legitimate reasons: advance billing produces partial-month charges, and one-time setup fees land all at once. The business case targeted tens of thousands of fewer service calls annually.
Rather than a static help article, First Bill Explanation is a guided, animated walkthrough — sixteen screens that build the bill up one layer at a time. Get familiar with your first bill opens it, then the story moves through the monthly basics, one-time fees, before your first bill cycle, and partial charges explained, before resolving into a total view and a final let's review.
The sequencing is the explanation. A customer disputing a first bill isn't confused by the total — they're confused by how it got there. Revealing each component against a running total lets the number assemble itself in front of them, so the answer arrives as an unfolding rather than a wall of line items.
This artifact is the build spec, not a mockup. Every transition carries its trigger, animation type, curve, and duration — and the two global rules at the top define how Back returns to the previous step while Start over returns to the first screen. Motion this dependent on timing can't survive a handoff described in prose.
Screens use placeholder (FPO) content and fictional account data.