Analytics Dashboard Layout and Visual Hierarchy
Turns a pile of metrics into a ranked dashboard layout spec: KPI tiles, hero chart, breakdowns, tables, filters, and states.
Before & after
Same prompt, same agent — the only difference is the skill.
Analytics dashboards should present data in an organized way. Include key metrics your business cares about. Use charts to show trends over time. Add filters so users can drill down into specific segments or time periods. Think about what story your data tells and arrange elements to highlight that. Make sure the dashboard is easy to scan and understand. Include context like comparisons to last period or targets. Test with actual users to see if the information helps them make decisions.
ANALYTICS DASHBOARD DESIGN
OBJECTIVE
Dashboard tells a business story: Company health at a glance, with drill-down capability
LAYOUT HIERARCHY (Visual prioritization)
TOP ROW: PRIMARY METRICS (Hero section, largest)
• Total Revenue MTD: 1.24M (↑12% vs last month)
• Customer Acquisition Cost: $85 (↓5%, optimizing)
• Churn Rate: 3.2% (↓0.4%, trend improving)
• NPS Score: 72 (stable, benchmark: 68)
→ Executive summary in 8 seconds
SECOND ROW: TRENDS & MOMENTUM
• Revenue Trend (line chart, 12-month view)
- Green line, gray target line overlay
- Shows growth trajectory
• Churn by Cohort (stacked bar chart)
- Shows newest cohorts have lower churn
- Diagnose: Is churn a product issue or cohort aging?
THIRD ROW: CONVERSION FUNNEL (Sequential story)
• Sign-ups → Trial → Paid Conversion
• Waterfall chart showing drop-off at each step
• Labels: Sign-ups 1200 → Trial 480 (40% conversion)
• Color warmth decreases down funnel
• Identifies biggest leak
FOURTH ROW: SEGMENTATION & DRILL-DOWN
• Revenue by channel (pie chart)
- Direct 45%, Affiliate 30%, Partner 25%
- Click to drill into channel details
• Customer LTV by segment (bar chart, ranked high to low)
- Enterprise $15K, Mid-market $3.2K, Small biz $600
- Shows which segment matters most
FIFTH ROW: COMPARISON & CONTEXT
• Performance vs Target (gauge chart)
- Revenue target $1.2M, Actual $1.24M (exceeded 3%)
- Churn target <3.5%, Actual 3.2% (on track)
- CAC target <$100, Actual $85 (better)
• YoY comparison (small line chart, 12 months overlaid)
- Current year vs prior year
- Shows seasonal patterns
FILTERS & CONTROLS (Top of dashboard)
• Date range: Calendar (default: MTD, shortcuts: Last 30 days, YTD)
• Segment: Dropdown (All, Enterprise, Mid-market, Small biz)
• Channel: Checkbox (All, Direct, Affiliate, Partner)
• Cohort: Filter by acquisition month
→ All filters update charts in real-time
COLOR STRATEGY
• Revenue: Green (positive momentum)
• Churn: Amber (watch this)
• NPS: Teal (North Star KPI)
• Benchmarks: Gray
• Reserve red for emergencies only
DESIGN REASONING
1. Hero metrics first → Answer "Is business healthy?" in 8 seconds
2. Funnel visualization → Shows where revenue is lost
3. Cohort churn → Reveals if product improving
4. Filters not multiple dashboards → One view, many perspectives
5. Comparison section → Context without clutter
INTERACTIVE FEATURES
• Hover on chart: Show exact value + % change
• Click funnel stage: Drill to users at that stage
• Click segment: Filter dashboard to that segment only
• Export: Download as PDF or CSV
REFRESH CADENCE
• Hero metrics: Every 1 hour
• Trend charts: Every 6 hours
• Funnel: Daily
• Filters: Real-time
SUCCESS CRITERIA
• Decision time: Exec makes call in <2 min (vs 15 min in spreadsheet)
• Drill-down path clear: User knows where to click to explore
• Color-coding consistent: Green/amber/teal mean same across charts
• No table charts: All data visual (charts only)
• Mobile-friendly: Works on tablet (stacked layout)
COMMON PITFALLS AVOIDED
• Not 30+ metrics on one screen (pick 5-7 hero metrics)
• Avoid chart types that don't tell story (no 3D pie charts)
• Font size legible from 3 feet away
• Always compare to target or prior period
• No static filters (allow drill-down from chart)About this skill
Your dashboard has 14 equally sized cards, three pie charts, and nobody can tell in five seconds whether things are good or bad. This skill makes Claude design dashboards the way an analytics product team does. It starts from the one question the screen must answer, ranks every metric against it, and cuts what does not earn a spot.
What it does
- Names the dashboard's primary question and audience (operational, analytical, or executive), then ranks metrics into KPI tiles, a hero chart, breakdowns, and a detail table
- Specifies KPI tile anatomy: value, comparison baseline, and a delta colored by good or bad rather than by up or down
- Picks the right chart for each metric and flags pies, gauges, dual axes, and truncated bar axes
- Lays out a 12-column grid with sizes, global filters, drill-down paths, and empty, loading, error, and stale-data states
- Reviews pasted dashboards or screenshots and returns fixes ranked by impact
- Catches broken premises such as averaged ratios, mixed time grains, and "real-time" requests on daily data
What you get
A buildable layout spec with an ASCII grid map, a per-component table (metric, chart, comparison, size), and interaction and state notes. For reviews, you get a severity-ranked critique with concrete replacements.
Best for
Founders, product engineers, and designers building SaaS analytics pages, internal admin and ops tools, or executive reporting views. It also fits anyone who has a dashboard that people open and then ignore.
SKILL.md preview
---
name: analytics-dashboard-layout
description: Plans and critiques analytics dashboard layouts. It anchors on the screen's primary question, ranks metrics into KPI tiles, a hero chart, breakdowns, and detail tables, picks chart types, and specifies grid, filters, drill-downs, and states a developer can build with any charting library. Use when the user says "lay out this dashboard", "what should go on our admin dashboard", "my dashboard looks like a wall of random boxes", "review this dashboard screenshot", "which chart should I use for churn", "our execs never open the dashboard", "we have 20 KPIs, how do I prioritize".
---
# Analytics Dashboard Layout and Visual Hierarchy
… (sign up to view the full skill)More design skills
View all Design skills →Rhinestone Clipart Studio
Use when the request is for rhinestone, gemstone, crystal, or jeweled-brooch style character clipart — generating a new faceted-gem characte
Design Critique with Prioritized Fix List
Critiques a UI, landing page, or layout against its goal and returns ranked fixes with exact sizes, spacing, and contrast ratios.
Native iOS and Android Screen Design and Review
Screen specs and mockup reviews for iOS and Android apps that use correct navigation, touch targets, type scales, safe areas and states.
Interactive Concept Explainer (Single HTML File)
A one-file HTML explainer with sliders, steps, and a baseline that teaches one concept, with its math stated and checked by hand.