📅 July 3, 2025⏱ 10 min read🏷 SaaS · Metrics · Dashboard UI
Most SaaS dashboards suffer from the same problem: they show data without driving decisions. They display 40 metrics, use the wrong chart types, and apply color inconsistently — so users stop reading them. This guide gives you the 12 KPIs every SaaS dashboard needs, the exact chart type for each metric, a layout hierarchy that makes data scannable in 10 seconds, and a color system that signals health vs danger at a glance.
A dashboard has exactly one job: surface the information that triggers the right action. Not "show all the data." Not "prove we're tracking things." Show the number that tells you whether to celebrate, investigate, or panic — and make that number impossible to miss.
The question to ask about every element on your dashboard: "When this number changes, does the person viewing this know what to do?" If the answer is no, the element doesn't belong on the main dashboard. Put it on a drill-down page.
💡 The 10-Second Rule
A well-designed SaaS dashboard should communicate the overall health of the business in under 10 seconds. If someone needs to study the dashboard for 2+ minutes to understand what's happening, the hierarchy is broken. Design for the quick scan first, deep analysis second.
2. KPI Card Design: What to Show and How
KPI cards are the most-viewed elements on any SaaS dashboard. Here's what a well-designed KPI card contains — and a live example:
MRR
$24.8K
↑ 12.4% vs last month
Monthly Recurring Revenue
Churn Rate
2.1%
↑ 0.3% vs last month
Monthly customer churn
Active Users
1,847
↑ 8.2% vs last month
DAU — last 30 days
NPS Score
42
→ +0 vs last quarter
Net Promoter Score
Every KPI card must contain exactly four elements:
Metric name (abbreviated, uppercase, small) — tells the viewer what this number measures
Current value (large, bold, immediately scannable) — the number itself, formatted appropriately ($24.8K not $24,812)
Trend indicator (arrow + percentage + comparison period) — tells the viewer if this is better or worse than before
Trend color — green for good, red for bad, grey for neutral. Note: for churn, an upward arrow is red (bad); for MRR, an upward arrow is green (good). The color must reflect the business meaning, not just the direction.
3. The 12 SaaS Metrics Every Dashboard Should Track
Metric
Formula
Healthy
Danger Zone
MRRMonthly Recurring Revenue
Σ(active subscriptions × monthly price)
Growing ≥5%/mo
Flat or declining
ARRAnnual Recurring Revenue
MRR × 12
Scales with MRR
Diverges from MRR
Churn RateMonthly customer churn
Lost customers ÷ start-of-month customers
<2% (SMB), <0.5% (Enterprise)
>5% for SMB
LTVCustomer Lifetime Value
ARPU ÷ Monthly Churn Rate
≥3× CAC
<1× CAC
CACCustomer Acquisition Cost
Sales + Marketing spend ÷ New customers
LTV:CAC > 3:1
LTV:CAC < 1:1
CAC PaybackMonths to recover CAC
CAC ÷ (ARPU × Gross Margin)
<12 months
>24 months
DAU / MAUDaily / Monthly Active Users
Unique users performing key action per day/month
DAU/MAU >20% (sticky)
DAU/MAU <5%
Trial ConversionFree-to-paid conversion rate
Paid conversions ÷ Trial starts
>15% (B2B), >2% (B2C)
<5% (B2B)
ARPUAverage Revenue Per User
MRR ÷ Total active customers
Trending upward
Declining (downgrade pressure)
Net Revenue RetentionNRR / Net Dollar Retention
(Start MRR + Expansion − Churn) ÷ Start MRR
>100% (revenue grows without new customers)
<80%
NPSNet Promoter Score
% Promoters − % Detractors
>40 (excellent SaaS)
<0
Support Ticket VolumePer 100 active users
Tickets opened ÷ (Active users ÷ 100)
Declining month-over-month
Spike >20% in a week
4. Chart Type Guide: Which Visualization for Which Metric
📈
Line Chart
Use for: Trends over time — MRR growth, DAU over 30 days, churn rate trend, NRR trajectory. Best when the trend direction matters more than individual data points.
Examples: MRR over 12 months · DAU last 90 days · Churn rate trend · Trial-to-paid conversion over time
📊
Bar Chart
Use for: Comparing values across categories — revenue by plan tier, signups by channel, tickets by category, MRR by cohort month. Best when comparing discrete groups, not continuous time.
Examples: Revenue by plan · New users by acquisition channel · Tickets by category · Feature usage by segment
🍩
Donut / Pie
Use for: Part-to-whole relationships with 3–5 segments only. Revenue split by plan (Free / Pro / Enterprise). Customer distribution by country. Keep to 5 segments maximum — more than that, use a bar chart.
Examples: Revenue by plan tier · Customers by region · Support tickets by type
❌ Avoid for: Time-series data, more than 5 segments, or when precise comparison matters
🔺
Funnel Chart
Use for: Conversion funnel visualisation — from trial start to activation to paid conversion. Shows where drop-off happens and by how much. Essential for product-led growth dashboards.
Examples: Signup → Activation → First use → Conversion → Retention funnel
🟦
Cohort / Heatmap
Use for: Retention analysis. Shows what percentage of users who signed up in Month X are still active in Month X+N. The single most powerful chart for understanding whether your product creates habit.
Examples: Monthly retention cohort · Feature adoption by signup month · Revenue retention by cohort
💫
Sparkline
Use for: Inline trend indication inside KPI cards — a tiny line chart showing the last 7 or 30 days of movement without taking up much space. Pairs with the KPI card current value to add trend context.
Examples: Embedded in MRR card · DAU card · Churn rate card · Revenue card
SaaS dashboard templates with pre-built chart integrations
KPI cards, line charts, bar charts, funnel views — all pre-wired in the bundle. $35 one-time.
The layout of a SaaS dashboard should match the user's natural scan pattern: high-level health first, then trend context, then detail. The F-pattern of reading (top, then left, then down) is the dominant scan pattern for data-dense pages.
SaaS Dashboard Layout — Zone HierarchyTop to bottom · Most important first
1
Zone 1 — KPI Strip (above the fold)
4–6 KPI cards in a horizontal row. The most critical metrics the viewer needs to assess health in one glance. Every executive looking at this dashboard should be able to answer "Is the business healthy?" in 5 seconds from this row.
Components: KPI cards with trend · MRR · Churn · DAU · Trial CVR · NRR
2
Zone 2 — Primary Trend Charts
1–2 large charts showing the most important trends. MRR growth line chart (12 months) on the left, new signups bar chart (30 days) on the right. These contextualise the KPI numbers above — a rising MRR looks different if new signups are flat.
Components: Large line chart (MRR) · Bar chart (new users by channel)
3
Zone 3 — Secondary Metrics
Smaller charts for secondary metrics — churn trend, feature adoption, support volume. These tell the "why" behind the KPI numbers above. A viewer investigates these after the KPI strip raises a question.
A table showing recent signups, recent churned accounts, or recent support tickets. Gives concrete examples behind the aggregate numbers. "Churn rate went up 0.3%" becomes real when the table shows which accounts churned.
If any metric has crossed a threshold (churn spike, payment failure surge, NPS drop), surface it as an alert card at the bottom of the dashboard. These are the "requires attention" signals — not part of the regular scan but critical when present.
Color is the fastest communication channel in a data dashboard. Apply it consistently and deliberately — random color use trains users to ignore it.
🟢 Green — Healthy / Positive
Use when a metric is within target range and trending in the right direction. Upward trend for MRR, DAU, NRR. Downward trend for churn, CAC, support tickets. Green means "no action required."
🟡 Yellow — Caution / Watch
Use when a metric is approaching a threshold but not yet critical. Churn trending up over 2 months. CAC payback extending past 18 months. DAU growth flattening. Yellow means "monitor this."
🔴 Red — At-Risk / Requires Action
Use when a metric has crossed a defined danger threshold. Churn above 5%. NRR below 80%. Trial conversion below 5%. MRR declining month-over-month. Red means "investigate immediately."
🔵 Blue — Informational / Neutral
Use for metrics that are contextual rather than directional — feature usage distribution, user segment breakdown, geographic data. Blue means "this is context, not a signal to act on."
⚠️ The Color Trap
Never use red and green purely based on direction (up = green, down = red). For churn rate, an increase is red — even though the arrow points up. For support ticket volume, a decrease is green. Map colors to business meaning, not mathematical direction. Inconsistent color logic teaches users to ignore your dashboard.
7. Six SaaS Dashboard Design Mistakes
Mistake 1: Too Many KPI Cards
Showing 12 KPI cards in the top strip means nothing stands out. Limit to 4–6 primary KPIs. Move everything else to a "Metrics" detail page. The goal is instant health assessment, not comprehensive reporting.
Mistake 2: Missing Comparison Context
"MRR: $24,800" tells you almost nothing. "MRR: $24,800 ↑ 12.4% vs last month" tells you the business is growing. Every metric needs a comparison period and a direction. Without it, numbers are meaningless.
Mistake 3: Wrong Chart Type
Using a pie chart for time-series data, or a line chart for category comparisons, makes data harder to read, not easier. Match the chart type to the data relationship — not to visual preference. See Section 4.
Mistake 4: No Date Range Selector
A dashboard frozen at the default date range gets ignored. Add a date range picker at the top: "Last 7 days / 30 days / 90 days / 12 months / Custom." Users have different questions — investors want annual trends, ops teams want yesterday's numbers.
Mistake 5: Vanity Metrics Front and Centre
Total signups since launch, all-time page views, cumulative revenue — these always go up and never tell you whether things are going well or badly. Vanity metrics create the illusion of progress. Replace them with rate-based metrics (growth rate, conversion rate, churn rate).
Mistake 6: No Drill-Down Path
When a metric looks alarming, the viewer needs to investigate. If clicking on "Churn Rate: 4.2% ↑" doesn't take them to a list of churned accounts — they're stuck. Every dashboard metric should link to a detail view that explains what's behind the number.
8. Build It Once, Read It Every Day
A well-designed SaaS dashboard pays for itself in decision speed. When your team can assess business health in 10 seconds every morning, you catch problems early, celebrate wins with evidence, and align everyone on what matters.
The design work is mostly structural: get the KPI strip right, choose the correct chart types, apply color consistently, and build the drill-down paths. With a professional HTML admin dashboard template as the foundation, the structural work is done before you write a single line of custom code.
📈 SaaS Dashboard Templates — Ready to Ship
Professional SaaS Dashboard UI in the Bundle
KPI cards, line/bar/funnel charts, cohort tables, metric drill-down pages — all pre-built in clean HTML/CSS/JS. Full commercial license. $35 one-time, instant download.