Dashboard Design and Layout

The Dashboard Nobody Uses

In the previous lesson, we explored storytelling with data. Now let’s build on that foundation. Every organization has one: a dashboard built with great intentions, loaded with charts, connecting to live data—and nobody looks at it.

Usually the problem is the same: the dashboard was designed around the data instead of around the decisions. It shows everything available, organized by data source, with no consideration for what someone actually needs to know.

A great dashboard isn’t an encyclopedia. It’s a control panel. A pilot’s cockpit doesn’t show every sensor on the airplane—it shows the handful of instruments needed to make the next decision. Your dashboard should work the same way.

The Dashboard Design Process

Step 1: Define the Audience and Their Questions

Before choosing a single chart, answer these:

Help me design a dashboard for our SaaS business.

Primary audience: VP of Sales (checks daily)
Secondary audience: CEO (checks weekly)

Questions the VP needs answered daily:
1. Are we on track to hit quarterly quota?
2. Which deals are at risk?
3. How is each sales rep performing?
4. What's the pipeline health (new leads, stages, velocity)?

Questions the CEO needs answered weekly:
1. Is revenue growing on target?
2. How are key metrics trending (ARR, churn, NPS)?
3. Are there any red flags?

Data available:
- CRM data (deals, stages, close dates, amounts)
- Revenue actuals vs. forecast
- Customer health scores
- Rep activity metrics

Design the dashboard layout with specific charts and
their placement. Explain why each element is positioned
where it is.

Step 2: Establish the Information Hierarchy

The dashboard follows a visual hierarchy:

┌──────────────────────────────────────────────┐
│  LEVEL 1: KPI Banner (top)                    │
│  ┌──────┐ ┌──────┐ ┌──────┐ ┌──────┐        │
│  │ $1.2M│ │  78% │ │  42  │ │ 3.5% │        │
│  │ ARR  │ │Quota │ │Deals │ │Churn │        │
│  │ ↑12% │ │Track │ │Open  │ │ ↓0.3 │        │
│  └──────┘ └──────┘ └──────┘ └──────┘        │
├──────────────────────────────────────────────┤
│  LEVEL 2: Trends and Comparisons (middle)     │
│  ┌──────────────────┐ ┌──────────────────┐   │
│  │ Revenue vs Target│ │ Pipeline by Stage │   │
│  │    (line chart)  │ │   (funnel chart)  │   │
│  └──────────────────┘ └──────────────────┘   │
├──────────────────────────────────────────────┤
│  LEVEL 3: Detail Tables (bottom)              │
│  ┌──────────────────────────────────────┐    │
│  │ Deals at Risk (table with health)    │    │
│  │ Rep Performance (ranked table)       │    │
│  └──────────────────────────────────────┘    │
└──────────────────────────────────────────────┘

Level 1 (KPI Banner): The most important numbers at the very top. Big font. Color-coded (green = good, red = attention needed). These answer “is everything OK?” in five seconds.

Level 2 (Trends): Charts that show context—how things are changing over time, how pipeline is distributed, where the patterns are.

Level 3 (Detail): Tables and lists for deep-dive analysis. Which specific deals are at risk? How are individual reps performing?

Step 3: Choose Charts for Each Section

Each dashboard element should be the right visualization for its purpose:

Quick Check: Dashboard Hierarchy

You’re designing a dashboard for a customer success team. Which metric goes in the Level 1 KPI banner?

A) Number of support tickets created this week B) Customer health score distribution (chart) C) Customers at risk of churning (count with trend) D) Detailed list of recent support interactions

The answer is C. “Customers at risk of churning” directly answers the team’s most important question. It belongs as a big number with a trend indicator at the top. The health distribution (B) is Level 2 context. The support ticket count (A) is a supporting metric. The interaction list (D) is Level 3 detail.

The Grid System

Dashboards work best on a grid. This creates visual order and makes them responsive on different screens.

The 12-column grid: Divide your dashboard width into 12 equal columns. Each element occupies a set number of columns:

• KPI cards: 3 columns each (4 per row)
• Medium charts: 6 columns (2 per row)
• Large charts: 12 columns (full width)
• Small detail cards: 4 columns (3 per row)

Ask AI to help with layout:

Design a 12-column grid layout for a marketing dashboard.

Elements to include:
1. 4 KPI cards (traffic, leads, conversion rate, cost per lead)
2. Traffic over time (line chart)
3. Leads by source (horizontal bar)
4. Conversion funnel (4 stages)
5. Top performing content (table, 10 rows)
6. Campaign performance comparison (grouped bar)

Constraints:
- Must work on 1920x1080 without scrolling for Level 1 and 2
- Level 3 can scroll
- KPIs must be visible at all times

AI produces a grid layout specification with column spans and row positions for each element.

Designing for Action

The best dashboards don’t just show data—they prompt action.

Conditional formatting: Red/amber/green indicators that immediately show what needs attention.

Threshold alerts: When a KPI crosses a threshold, the visual treatment changes. Revenue below target? The card turns red.

Drill-down paths: Click a KPI to see the underlying detail. Click a bar in a chart to filter other charts to that segment.

Context annotations: Brief notes that explain anomalies. “Spike on March 15 due to Product Hunt launch” prevents every viewer from asking the same question.

For our sales dashboard, define the alert thresholds
and conditional formatting rules:

KPIs:
- Quota attainment: green if >80%, amber if 60-80%, red if <60%
- Churn: green if <3%, amber if 3-5%, red if >5%
- Pipeline coverage: green if >3x, amber if 2-3x, red if <2x
- Average deal cycle: green if <30 days, amber if 30-45, red if >45

What other alert conditions should we monitor?

AI might add: “Alert when any single deal representing >10% of quarterly quota changes stage backward” or “Flag when any rep has zero new pipeline added in the past 7 days.”

Dashboard Anti-Patterns

Patterns to avoid:

The data museum: 30+ charts crammed onto one screen. Nobody can process this much information simultaneously. If you need 30 charts, you need multiple dashboards.

The vanity dashboard: Large, impressive visualizations that look cool in meetings but don’t drive decisions. If nobody’s decision changes based on a chart, remove it.

The stale dashboard: Data that hasn’t been updated in weeks or months. Stale data is worse than no data—people make decisions on outdated information. Automate data refresh or display the last-updated timestamp prominently.

The one-size-fits-all: A single dashboard for the CEO, VP of Sales, and individual sales reps. These audiences have different questions and need different views.

The pixel-perfect trap: Spending weeks making the dashboard beautiful instead of useful. Ship a useful ugly dashboard, then iterate on design.

Building with AI

Use AI to go from concept to specification:

Generate a complete dashboard specification for our
executive weekly review.

Include for each element:
1. Element type (KPI card, chart, table)
2. Data source and calculations
3. Chart type and configuration
4. Grid position (column span and row)
5. Conditional formatting rules
6. Update frequency
7. Drill-down behavior (if any)

The dashboard should answer: "Is the business healthy
this week, and what needs attention?"

Metrics available:
[list your available metrics]

AI produces a specification document that a developer or dashboard tool can implement directly.

Practical Exercise

Design a dashboard for your work:

1. Define the audience and their top 3 questions
2. Select 6-8 elements that answer those questions
3. Arrange them in a three-level hierarchy (KPIs → Trends → Detail)
4. Define conditional formatting rules for each element
5. Use AI to review the design: “What’s missing? What could be removed?”

Sketch it on paper first. The best dashboards are designed away from the computer, focused on the user’s needs rather than the tool’s capabilities.

Key Takeaways

• Design dashboards for specific audiences and their specific decisions, not for data
• Use three-level hierarchy: KPIs at top, trends in middle, detail at bottom
• The five-second test: a new viewer should know if things are OK or not within five seconds
• Use a grid system for visual order and responsiveness
• Conditional formatting and alerts prompt action instead of passive viewing
• Avoid the data museum—fewer, better elements beat more, cluttered ones

Next up: color, accessibility, and annotation. The finishing touches that make your visualizations inclusive, professional, and truly polished.

Up next: In the next lesson, we’ll dive into Color, Accessibility, and Annotation.