amine.dev
Back to projects

CIS Health — Customer Health Dashboard

A quarterly KPI scoring and health analytics platform for Cisilion's CS team. CSMs score customers across 8 categories and 30+ indicators each quarter. The platform surfaces colour-coded health ratings, trend charts, and a CI engine that flags at-risk accounts before renewals are on the line.

Next.js 15TypeScriptTailwind CSS 4Firebase FirestoreFirebase AuthPlotly.jsVercel
Analytics dashboard showing performance graphs on a laptop screen

Most CS teams think they know which accounts are at risk. They don't. They have a spreadsheet, a gut feeling, and a renewal conversation that happens two months too late.

That's what I kept seeing at Cisilion. Dozens of enterprise accounts, each with its own service contract, its own relationship quirks, its own signals, and no single place to see any of it clearly. I built CIS Health to fix that.

The Quarterly Scoring Workflow

Every quarter, CSMs score each customer across 8 KPI categories: Customer Advocacy, Customer Engagement, Service Quality, Customer Health, Financial Metrics, Operational Efficiency, Customer Feedback, and Client Success. Each category breaks down into more than 30 granular indicators, scored on a 1 to 5 scale, with an N/A option for anything that doesn't apply to a given account.

One detail worth calling out: the fiscal year runs June to May, not January to December. Q1 is June through August, Q2 is September through November, and so on. The system auto-selects the current quarter, which eliminates a whole class of human error: wrong period scored, backdated entries, inconsistent labels across accounts. The scoring form uses collapsible accordions per category. With 30+ KPIs on screen, you need that structure or it becomes unusable fast.

Person reviewing data dashboard on laptop at desk

The Dashboard and Analytics

Once scores are in, the portfolio view shows every customer ranked by overall health score, colour-coded: green for healthy (3.67 to 5.0), yellow for moderate (2.34 to 3.66), red for at risk (1.0 to 2.33). Summary stat cards at the top show total accounts, average health score, how many are healthy, and how many are flagged. A CS director can open this on their phone and know in 30 seconds where to focus.

The analytics layer goes deeper. A radar chart shows which KPI categories are strong or weak across the portfolio. Trend charts built with Plotly.js track health scores over the last four quarters, both per customer and as a portfolio average. Filters let you slice by industry, support tier, account owner, or health status. Plotly was dynamically imported to keep SSR clean since it touches the DOM directly.

Team collaborating on strategy whiteboard with notes

The Continuous Improvement Engine

The part I'm most satisfied with is the CI engine. It doesn't just surface scores. It analyses patterns across quarters and generates prioritised improvement initiatives: specific KPIs, specific customers, specific gaps. So instead of 'Customer X is at risk', you get 'Customer X's Time-to-Resolve SLA % has dropped three quarters running. Here's what to look at.' That's where the real value is.

Proactive retention requires pattern recognition, not just dashboards. The CI engine turns scoring data into a prioritised action list that CSMs and operations teams can actually work from. That's what moves the needle.

Professional deep in thought working on laptop

Tech Decisions

The stack is Next.js 15 with the App Router and Turbopack, TypeScript throughout, and Tailwind CSS 4. Firebase handles both auth and the database. Firestore security rules enforce role-based data access at the storage level, not just the application layer. Even if someone bypasses the UI, they can't read another CSM's account data.

Role-based access has three tiers: Admin (full control), Manager (add customers, enter scores, view analytics), and read-only User. The first person to register is auto-promoted to Admin, so there's no need for a pre-configured superuser to get started. Deployed on Vercel.

Design

Apple-inspired aesthetic throughout: glassmorphism cards, smooth gradients, Inter typeface, dark hero headers on every page. The colour-coded health system is what you look at first. Once you've seen the red/yellow/green badges, you instinctively scan for them. Collapsible KPI accordions keep the scoring form scannable with 30+ fields. Mobile-responsive throughout, because CS directors check this kind of thing on their phones.

What It Enables

This isn't a reporting tool. It's a retention tool. When you can see which customers are trending downward before they tell you they're cancelling, you can act: proactive QBRs, targeted improvement initiatives, earlier escalation. All of it becomes possible when the data is structured, standardised, and visible in one place.

Built solo, end-to-end: data modelling, Firestore security rules, the scoring workflow, the analytics engine, the CI initiative logic, the full UI. It's an internal tool with no public link, but it's in active use at Cisilion.