Back to Skills

Kpi Dashboard Design

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.

Skill Content

# 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

```css
/* 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

How to use

  1. Copy the skill content above
  2. Create a .claude/skills directory in your project
  3. Save as .claude/skills/claude-skills-kpi-dashboard-design.md
  4. Use /claude-skills-kpi-dashboard-design in Claude Code to invoke this skill
View source on GitHub