Visual Storytelling Design

Table of Contents

• Read This First
• Story Design Workflow
• Path Selection Menu
  • Path 1: Build Narrative Structure
  • Path 2: Master Annotation
  • Path 3: Design Scrollytelling
  • Path 4: Apply Framing & Metaphors
• Quick Reference
• Guardrails

Read This First

What This Skill Does

This skill helps you transform data into compelling visual narratives — data journalism, presentations, infographics, and interactive stories that communicate insights through narrative structure.

Core principle: People naturally seek stories with cause-effect and chronology. Structuring data as narrative aids comprehension and retention.

Why It Matters

Challenges of data storytelling:

• Raw data is a heap of facts — hard to process
• Visualizations can be misinterpreted without guidance
• Readers skim, don’t read thoroughly
• Need emotional engagement AND factual accuracy

How cognitive principles help:

• Narrative structure chunks information meaningfully (Context → Problem → Evidence → Insight)
• Annotations guide attention to key insights (prevent misinterpretation)
• Progressive disclosure reveals complexity gradually (scrollytelling)
• Framing provides context for accurate interpretation

When to Use This Skill

Use this skill when:

• ✓ Creating data-driven articles, reports, or presentations
• ✓ Designing infographics or data visualizations with narrative
• ✓ Building scrollytelling or interactive data experiences
• ✓ Annotating charts to guide interpretation
• ✓ Framing data with honest context and comparisons

Do NOT use for:

• ✗ Learning cognitive principles (use cognitive-design)
• ✗ Implementing D3.js visualizations (use d3-visualization)
• ✗ Evaluating designs (use design-evaluation-audit)
• ✗ Checking for misleading patterns (use cognitive-fallacies-guard)

Story Design Workflow

Time: 1-2 hours

Copy this checklist and track your progress:

Story Design Progress:
- [ ] Step 1: Define Narrative
- [ ] Step 2: Choose Structure
- [ ] Step 3: Apply Cognitive Techniques
- [ ] Step 4: Review for Clarity & Integrity

Step 1: Define Narrative

Determine the story arc: What’s the context? What’s the question/problem? What data answers it? What’s the insight? Choose an opening strategy: lead with human impact, surprising finding, or visual.

Resource: Narrative Techniques — Narrative Structure section

Step 2: Choose Structure

Select a template and pattern that fits your story type, audience, and medium. Options include step-by-step article, magazine style, annotated chart, interactive exploration, or presentation deck.

Resource: Storytelling Patterns — Templates and Decision Matrix

Step 3: Apply Cognitive Techniques

Add annotations (callouts, arrows, shaded regions, direct labels). Apply framing with baselines, comparisons, and denominator clarity. Use scrollytelling for progressive revelation if web-based. Consider visual metaphors.

Resource: Narrative Techniques — Annotations, Scrollytelling, Framing sections

Step 4: Review for Clarity & Integrity

Verify the story is honest (no cherry-picking, balanced framing), clear (insight obvious in 5 seconds), and complete (sources cited, limitations noted). Use design-evaluation-audit for systematic evaluation and cognitive-fallacies-guard for integrity verification.

Path Selection Menu

Path 1: Build Narrative Structure

Choose this when: Starting a data story and need to define the narrative arc and opening strategy.

→ Go to Narrative Techniques — Sections 1-2

Path 2: Master Annotation

Choose this when: Adding annotations to guide interpretation of existing charts and visualizations.

→ Go to Narrative Techniques — Section 3

Path 3: Design Scrollytelling

Choose this when: Building web-based progressive revelation experiences.

→ Go to Narrative Techniques — Section 4

Path 4: Apply Framing & Metaphors

Choose this when: Providing context, baselines, comparisons, and visual metaphors.

→ Go to Narrative Techniques — Sections 5-6

Quick Reference

5 Storytelling Principles

1. Lead with insight, not topic — Title: “Remote workers report 23% higher satisfaction” not “Remote work survey results”
2. Annotate the insight — Don’t make readers discover it; point it out with callouts
3. Provide context — Baselines, historical comparisons, denominators for every percentage
4. One change at a time — Scrollytelling: highlight OR annotate, not both simultaneously
5. Be honest — Show full data, acknowledge limitations, avoid cherry-picking

Guardrails

This skill does NOT: Implement code, evaluate general usability, teach cognitive theory, or check for misleading patterns.

This skill DOES: Provide narrative structure, annotation techniques, scrollytelling patterns, framing guidance, story templates, and quality checklists for data storytelling.