Bringing Usage Visibility to a SaaS Admin Panel

I designed a Usage Stats area inside the Admin Panel, giving company admins a clear view of how many tasks, AI credits and integrations their teams consume, so they’re no longer surprised by charges at the end of the month.

Role

Role

Senior Product Designer

Tools

Tools

Miro, Claude Code, Gong, Figma, NotebookLM, Figma Make, Lovable

Miro, Claude Code, Gong,
Figma, NotebookLM, Figma
Make, Lovable

Year

Year

2026

Challenge

Customers had zero visibility into their consumption. They only found out they’d exceeded their plan when the charges arrived, and they’d been asking for a fix for months.

The long-term answer was a centralized Integration Hub, but its architecture was still being decided. Waiting for it meant leaving customers frustrated for months.

Process

Instead of waiting for the full hub, I identified a high-signal pain point we could solve right away inside the existing Admin Panel. It was a targeted, deliverable improvement that didn’t depend on the hub’s architecture, and it built trust with customers who’d been waiting.

I designed a Usage Stats page organized by consumption type: Pipes, AI credits, Automations, Integrations, API calls and Users. Each view shows tasks consumed against the plan’s limit, a breakdown over time, and which flows consume the most. Filters let admins switch between the current month, last month and the past three months.

The details carried the most weight. Usage bars change colour as admins approach their limit: blue below 80%, yellow from 80% to 99%, red at 100% and above. At 80%, admins also get an email warning, so they hear about it even when they’re not in the Admin Panel. Past periods use a neutral grey, so history never reads as a live warning. Short explanatory popovers answer questions right where they come up, and clear empty states cover new accounts with no data yet.

Results

Usage Stats shipped and is live in the Admin Panel. For the first time, company admins can see how many tasks, AI credits and integrations their teams consume, track it against their plan, and act before reaching their limit, not after the bill arrives.

Clients noticed right away. One enterprise client told us they were relieved to finally stop getting surprise bills, because now they could track their integration usage against their limit themselves.

It also proved the value of shipping in slices: we gave clients what they’d been asking for months before the full Integration Hub would have been ready.

What I'd carry forward

First, you don’t have to wait for the perfect architecture to deliver value. Carving a targeted fix out of a larger initiative helped customers sooner and reduced risk for the bigger project.

Second, warnings should be gradual, and the component behind them deserves more work. Moving from blue to yellow to red gives admins time to act before they’re charged, instead of alarming them only when it’s too late. I built the bars with the design system’s existing progress component, which wasn’t fully finished. Next time, I’d redesign it to make better use of its space and add more useful information, such as a comparison with last month’s usage. I’d then roll it out wherever bars appear across the Admin Panel, so every usage view is consistent and more informative.

Third, explanation is part of the interface. A well-placed popover removed the need for extra controls, like sorting the table, and answered questions before they became support tickets.