9 min read·30-second summary below
Redesigning the billing section of a financial-services SaaS — where advisors calculate, collect, and post their fees, and the corner of the product that had quietly become the messiest. And learning, three iterations in, that the first answer is rarely the right one.
In short.
The problem
The billing section had been built piece by piece over years. Every new fee type, every reporting requirement, every regulatory tweak got bolted onto screens already crowded by the round before it. None of it was unreasonable on its own. Together it had produced a part of the product that even the people who built it had quietly stopped using.
Current UI — Bill Details page pre-redesign. Two linked tables (bills above, assets for the selected bill below). Selecting a row in the top table silently updates the bottom one — but nothing on the page signals that relationship.
My first instinct was to clean it up. That instinct lasted about ten days.
How the pattern surfaced
Before designing anything, the question I needed to answer was a strategic one: is this a “fix the screens” job, or is it bigger than that? I held four research streams up against each other — usage analytics, NPS, support cases, user interviews — and asked what they had in common.
Sessions getting longer. Workflows abandoned more often, not less.
Billing’s score trailing the rest of the product, quarter over quarter.
The same handful of jobs, in the service queue every single day.
Users describing a workflow they had built for themselves, outside the product.
Every signal pointed at the same thing: navigating billing was costing more than billing itself.
That changed the brief. We weren’t fixing screens any more — we were redesigning a section that users had quietly given up on.
Mapping the section
Discovery told me it was section-level. So I put every page on one wall.
To redesign a section, you first have to see the section. I mapped every page in the billing area — current screens, deprecated screens, screens nobody opened, screens that did the same job three different ways — into one diagram. Once it was on one wall, the cuts were obvious.
Hover a page for detail · Click a cluster to expand · Click a verdict to filter
Pages doing the same job three different ways — collapsed into one.
Pages used only by the billing service team stopped surfacing in advisor navigation, but stayed accessible to ops.
Deprecated pages and orphaned utilities — no usage, no owners — deleted entirely.
Design iterations
Two problem areas inside the billing section, two iteration arcs, same shape every time: an honest first attempt, a critique session that exposed what wasn’t working, a second attempt that fixed the surface problem — and a final design that came only after I went back and un-asked the original question. Click any version to open it full size with the moment that drove the next change.
From two unlinked tables to a clear master-detail view.
From whitespace, through clutter, to a balanced view with inline schedule previews.
Cross-functional collaboration
Three conversations that changed what shipped.
The first iteration looked clean — until a critique asked, “What’s the user going to do with twenty read-only inputs?” That reframed the whole arc, from design a form to design a view, and saved me from shipping a polished version of the wrong thing.
Analytics and NPS gave shapes; the support queue gave specifics — “three advisors called this week because they couldn’t find the audit checkbox.” Advisors don’t file a survey to say “I clicked the wrong tab again,” so I treated that queue as its own research stream.
When the brief shifted from fix the screens to rebuild a section, the timeline didn’t. The PM and I made the call together: ship the two deep dives, flag the rest for next cycle — ship the spine, let the ribs follow.
None of those conversations were free — arguing in public, sitting with a raw queue, cutting good work for scope. All three changed what shipped.
The impact
Released to a pilot cohort, then rolled out wider after positive signal. The most useful feedback wasn’t a metric — it was the specific language advisors started using to describe what was different. Two outcomes, one per deep dive.
Before — original Bill Details with two stacked tables; selecting a row silently updated the lower one.
After — the redesigned Bill Details with the bill detail rendered as read-only cards plus search to jump between bills.
Drag the handle, click anywhere on the image, or focus the handle and use arrow keys to swipe between the old and new design.
I just looked at a fee schedule without leaving the page. That’s all I wanted.
Pilot advisor · first week post-releaseStill ahead: the rest of the billing section, in the next release cycle. The two deep dives shipped as the spine — the patterns they established (master/detail, inline preview) carry into every screen still to redesign. The work continues.
Reflection
Both deep dives followed the same shape: attempt, critique, second attempt, then un-asking the original question. That last beat caught the disabled-fields mistake and the view-vs-edit conflation — without it I’d have shipped the wrong thing twice.
I spent week one treating the brief as fixed — but the screens were the symptom, the brief was the disease. Reframing from fix the screens to rebuild a section users had given up on cost a full cycle I’d later cut. Next time, the first deliverable is a re-framed brief.
The deferred screens get the patterns the deep dives proved: master/detail for any view pretending to be a form, inline preview for any read job that shouldn’t cost a page change. Working templates now — no more three cycles to find them.
