datadesign
Dashboard Design
Design effective data dashboards — choosing the right chart types, establishing visual hierarchy, defining KPI layouts, and creating interactive filters that help users answer questions without analyst support.
dashboardsdata-visualizationchartsKPIsanalytics
Works well with agents
Works well with skills
dashboard-design/
sales-dashboard.md
Markdown| 1 | # Dashboard Design: Sales Team Dashboard |
| 2 | |
| 3 | ## Key Questions This Dashboard Answers |
| 4 | |
| 5 | 1. Are we on track to hit this quarter's revenue target? |
| 6 | 2. Which reps are ahead or behind their individual quotas? |
| 7 | 3. Where are deals stalling in the pipeline? |
| 8 | 4. How has win rate trended over the past 6 months? |
| 9 | 5. Which lead sources produce the highest-value closed deals? |
| 10 | |
| 11 | ## 1. KPI Bar (Top Row) |
| 12 | |
| 13 | ``` |
| 14 | [ Closed Revenue ] [ Pipeline Value ] [ Win Rate ] [ Avg Deal Cycle ] [ Quota Attainment ] |
| 15 | [ $2.4M ] [ $8.1M ] [ 34% ] [ 42 days ] [ 78% ] |
| 16 | [ +18% vs last Q ] [ -5% vs last month ] [ +3pts vs last Q ] [ -4 days vs last Q ] [ Target: 100% ] |
| 17 | [ [sparkline up] ] [ [sparkline flat] ] [ [sparkline up] ] [ [sparkline down] ] [ [progress bar] ] |
| 18 | ``` |
| 19 | |
| 20 | - Ordered left-to-right by importance: revenue first, attainment last (it is derived from revenue vs target). |
| 21 | - Each card shows: metric name, current value, comparison, and a sparkline or progress bar. |
| 22 | - "Pipeline Value" turning red when it drops below 3x the remaining quota gap. |
| 23 | |
| 24 | ## 2. Chart Selection |
| 25 | |
| 26 | | Question | Chart Type | Title (phrased as question) | |
| 27 | |----------|-----------|----------------------------| |
| 28 | | Are we on track this quarter? | Area chart with target line overlay | "How is closed revenue tracking against our quarterly target?" | |
| 29 | | Which reps are ahead or behind? | Horizontal bar chart, sorted by attainment % | "Where does each rep stand against their quota?" | |
| 30 | | Where are deals stalling? | Funnel chart with stage-to-stage conversion rates | "Where are deals dropping out of the pipeline?" | |
| 31 | | How has win rate changed? | Line chart, 6-month trend, monthly granularity | "How has our win rate trended over the past 6 months?" | |
| 32 | | Which sources produce the best deals? | Horizontal bar chart, sorted by avg deal size | "Which lead sources generate the highest-value closed deals?" | |
| 33 | |
| 34 | ## 3. Visual Hierarchy |
| 35 | |
| 36 | **Top row**: KPI bar (5 cards). Answers "are we on track?" in 5 seconds. |
| 37 | |
| 38 | **Middle section (2 columns)**: |
| 39 | - Left (60% width): Revenue vs target area chart (primary question) |
| 40 | - Right (40% width): Rep attainment horizontal bar chart |
| 41 | |
| 42 | **Bottom section (2 columns)**: |
| 43 | - Left (50% width): Pipeline funnel with conversion rates between stages |
| 44 | - Right (50% width): Win rate trend line chart |
| 45 | |
| 46 | **Detail panel (expandable)**: Lead source performance table with sortable columns (source, deal count, avg deal size, win rate, total revenue). Accessible via "View details" link below the funnel chart. |
| 47 | |
| 48 | ## 4. Filters and Interactivity |
| 49 | |
| 50 | **Global filters (top bar, affects all charts)**: |
| 51 | - Date range: Preset options (This quarter, Last quarter, Last 6 months, Custom). Default: current quarter. |
| 52 | - Team: All teams, or filter to a specific sales team. Default: all. |
| 53 | - Region: North America, EMEA, APAC, All. Default: all. |
| 54 | |
| 55 | **Cross-filtering**: |
| 56 | - Clicking a rep's bar in the attainment chart filters all other charts to that rep's deals. |
| 57 | - Clicking a funnel stage shows a deal list panel with deal name, value, days in stage, and next action. |
| 58 | |
| 59 | **Drill-down paths**: |
| 60 | - KPI card click: Opens a detail modal with the metric's weekly breakdown for the period. |
| 61 | - Rep bar click: Navigates to that rep's individual pipeline view. |
| 62 | - Funnel stage click: Shows filterable deal table for that stage. |
| 63 | |
| 64 | **Filter rules**: |
| 65 | - Active filters display as removable chips below the filter bar. |
| 66 | - When filters reduce a chart to zero data, display "No deals match these filters" with a "Clear filters" link. |
| 67 | |
| 68 | ## 5. Data Formatting Standards |
| 69 | |
| 70 | | Metric | Format | Null Handling | |
| 71 | |--------|--------|---------------| |
| 72 | | Revenue / deal value | `$X.XM` above $1M, `$XXX.XK` above $1K, exact below | "No data" (not $0) | |
| 73 | | Percentages (win rate, attainment) | Whole number + `%` (e.g., 34%) | "N/A" | |
| 74 | | Deal cycle days | Whole number + "days" (e.g., 42 days) | "--" | |
| 75 | | Dates | "MMM d, yyyy" (e.g., Mar 19, 2026) | -- | |
| 76 | |
| 77 | **Color rules**: |
| 78 | - Green: at or above target. Red: below target. Applied only to KPI comparison indicators and the target line. |
| 79 | - Pipeline funnel uses sequential blue shades (darkest at top), not traffic-light colors. |
| 80 | - All color-coded information also has a text label or icon — never color alone. |
| 81 | - Palette is colorblind-safe (tested with deuteranopia and protanopia simulators). |
| 82 | |
| 83 | **Data refresh**: Pipeline data updates every 15 minutes from the CRM sync. KPIs recalculate on each page load. Last-refreshed timestamp shown in the dashboard footer. |
| 84 |