← Work

Impact story: Visual storytelling for GAR 2025

861 words Filed in: content design, interactive storytelling, web performance, data visualization

GAR 2025 landing page with outcomes‑first headline and interactive elements.
Screenshot of the GAR 2025 page.

Transformed abstract disaster economics into compelling narrative with interactive timelines, global maps, and choice-based futures — without sacrificing performance.

tl;dr

  • 40% engagement lift during campaign period compared to prior GAR launch baseline
  • Maintained Core Web Vitals green despite heavy interactive content (animated timelines, embedded maps, Datawrapper charts)
  • Delivered interactive storytelling for "Three Spirals of Unsustainable Development" with global maps, GDP projections, choice-based futures
  • Cross-functional delivery (editorial, design, engineering) translating narrative ambitions into performant implementation for flagship report serving policymakers, donors, and journalists globally

Context The United Nations Office for Disaster Risk Reduction (UNDRR) is the UN's focal point for disaster risk reduction, coordinating global policy and supporting Member States to reduce disaster risk and losses.

The Global Assessment Report on Disaster Risk Reduction (GAR) is UNDRR's flagship report on disaster risk — widely referenced by policymakers, donors, and practitioners making billion-dollar decisions. GAR 2025's thesis: disaster costs now exceed $2.3 trillion annually when cascading impacts are included, but this destructive cycle isn't inevitable.

The challenge: how do you make macroeconomic arguments about fiscal crises, insurance markets, and climate scenarios compelling to both UN delegates and general public? The page needed to communicate urgent stakes while giving multiple audience segments clear pathways into complex evidence.

I led content structure, UX decisions, and platform implementation — translating editorial priorities into component patterns, setting performance budgets, and ensuring the page stayed fast worldwide despite interactive maps, animated data visualizations, and rich media throughout.

Problem#

Flagship report launches often default to long pages with heavy media and abstract framing — burying the key message and slowing global access. We needed a landing that made the stakes clear in seconds, gave multiple audience segments onward paths, and stayed fast despite rich interactive content.

Content strategy: outcomes first, evidence accessible#

Opening hook: "$2.3 trillion annually"

We led with the staggering total cost figure, then immediately connected macro to personal: "But the real cost is far higher." This framing made economic abstractions tangible.

The Three Spirals framework

Structured the core narrative around three interconnected downward spirals:

  1. Spiral One: Increasing Debt, Decreasing Income - How disasters shrink GDP and trigger fiscal crises
  2. Spiral Two: Unsustainable Risk Transfer - Insurance market breakdown and "un-insurability"
  3. Spiral Three: Respond-Repeat - The humanitarian aid trap

Each spiral included its own expandable section with:

  • Problem framing
  • Real-world examples (Micronesia's 46% GDP impact, US insurance withdrawal)
  • Links to interactive map evidence
  • Concrete "Breaking the Spiral" solutions

Choice-based narrative: Generation Jolt vs Generation Regeneration

Presented two stark 2050 scenarios — high-regret vs. resilience-invested futures — making abstract policy choices visceral and personal.

Interactive elements: making data explorable#

Animated GDP projection timeline

The page opens with an animated visualization showing expected hazard impacts on GDP from 2030-2100 across seven climate scenarios (Net Zero 2050, Current Policies, Delayed Transition, etc.). Users can pause, explore, and see their choices play out over decades.

Embedded interactive maps (linked to full exploration tool):

  • Fiscal gap return periods (when countries can't meet debt obligations)
  • Earthquake loss projections by region
  • Nature-related fiscal risk
  • Droughts and land degradation
  • Water scarcity and child malnutrition
  • Internally displaced persons

Datawrapper scatterplot

Compared direct disaster losses vs. % of GDP across regions — showing North America's $69.6B (0.23% GDP) vs Micronesia's $4.3B (46.1% GDP). Made relative impact vs absolute losses immediately visual.

Data counters and dynamic figures

Animated the "$2.3 trillion annually" figure on scroll to emphasize scale.

Technical execution: performance with richness#

The challenge: Page includes animated timelines, embedded maps, multiple third-party visualizations (Datawrapper), high-res imagery, and interactive tabs. This could easily tank Core Web Vitals.

Solutions implemented:

  • Lazy loading for all interactive embeds and below-fold images
  • Intersection Observer API to trigger animations only when visible
  • Deterministic image pipelines with responsive sizing (already in place from platform work)
  • Budget checks during development: every new element justified against performance impact
  • Fallback content for users with JS disabled or slow connections
  • CDN tuning to serve heavy assets efficiently worldwide

Accessibility maintained throughout:

  • All interactive maps keyboard-navigable
  • Alt text and ARIA (Accessible Rich Internet Applications) labels on data visualizations
  • Color-blind safe palettes on charts
  • Text alternatives for animated content

Outcomes#

  • Engagement lift: 40% increase during campaign period compared to GAR 2022 launch baseline (measured via time on page, scroll depth, and interactive element engagement)
  • Performance maintained: Core Web Vitals stayed green despite heavy interactive content load
  • Global accessibility: Fast experience worldwide, including bandwidth-constrained regions
  • Multi-audience success: Clear pathways served policymakers (exploring detailed maps), journalists (scannable claims), and general public (choice-based scenarios)
  • Campaign amplification: Interactive maps and data visualizations widely shared on social media, extending report reach beyond traditional policy audiences

What made this work#

Cross-functional coordination was essential. Editorial team brought the Three Spirals narrative framework and evidence hierarchy. Design team created the data visualizations and interactive components. I translated between these priorities and platform constraints — ensuring editorial ambitions remained technically feasible while performance budgets stayed realistic.

The result: a landing page that honored the report's complexity while making it accessible, maintained technical performance while enabling rich interactivity, and served multiple audiences without fragmenting the core message.