/kpi-dashboard-design

name: kpi-dashboard-design
description: Designs effective KPI dashboards with proper metric selection, visual hierarchy, and data visualization best practices. Use when building executive dashboards, creating analytics views, or presenting business metrics.
license: MIT

KPI Dashboard Design

Design effective dashboards that communicate key metrics clearly.

KPI Selection Framework

**Good KPIs are:**

• Relevant to business goals
• Measurable and quantifiable
• Influenced by the team
• Updated frequently
• Simple to understand

Common Business KPIs

| Goal | KPIs | |------|------| | Revenue | MRR, ARR, Revenue Growth | | Acquisition | CAC, New Users, Conversion Rate | | Retention | Churn Rate, NPS, DAU/MAU | | Efficiency | LTV:CAC, Burn Rate | | Quality | Error Rate, Response Time |

Dashboard Layout

┌─────────────────────────────────────────────────┐
│              Executive Summary                  │
│  [Revenue ▲12%]  [Users ▲8%]  [Churn ▼2%]      │
├─────────────────────┬───────────────────────────┤
│                     │                           │
│   Revenue Trend     │    User Acquisition      │
│   (Line Chart)      │    (Bar Chart)           │
│                     │                           │
├─────────────────────┼───────────────────────────┤
│                     │                           │
│   Retention Funnel  │    Top Products          │
│   (Funnel Chart)    │    (Table)               │
│                     │                           │
└─────────────────────┴───────────────────────────┘

Visual Design Principles

/* Traffic light colors for status */
.metric-good { color: #22c55e; }    /* Green */
.metric-warning { color: #f59e0b; } /* Amber */
.metric-bad { color: #ef4444; }     /* Red */

/* Visual hierarchy */
.metric-primary {
  font-size: 2.5rem;
  font-weight: 700;
}

.metric-secondary {
  font-size: 1.5rem;
  font-weight: 500;
}

Chart Selection

| Data Type | Chart | |-----------|-------| | Trend over time | Line chart | | Comparison | Bar chart | | Composition | Pie/Donut | | Distribution | Histogram | | Correlation | Scatter plot | | Funnel stages | Funnel chart |

Interactivity Features

• Drill-down to detailed views
• Date range selection
• Filtering by segment
• Export to CSV/PDF
• Scheduled email reports

Best Practices

• Limit to 5-7 KPIs per dashboard
• Show trends, not just snapshots
• Use consistent color coding
• Include comparison periods (vs last month)
• Update data in real-time or hourly
• Review dashboard relevance quarterly

Common Mistakes

• Too many metrics (information overload)
• No clear visual hierarchy
• Missing context (no comparisons)
• Outdated or stale data
• Metrics without ownership