§ masterplan.md

Interactive Refugee Stories

A storytelling site that follows one family's journey on an animated map, with audio testimonies and decision points.

Storytelling

App overview and objectives

A scroll-driven documentary where each refugee's journey unfolds as the reader moves: a map that traces the route, audio in the person's own voice, and photographs that arrive at the right moment.

The problem worth solving

Statistics about displacement do not move anyone. One person's route, told in their own voice with their own words, does — and the web can carry that better than print or broadcast.

Target audience

Primary — General readers and students encountering displacement as an abstraction.
Secondary — Journalists, educators and advocacy organisations seeking material.

Roles and permissions

Visitor — read-only public pages, can sign up.
Member — owns their own records, cannot see other users' data.

Core features

Scroll-linked map animating each journey stage by stage
Audio narration in the original language with synchronised subtitles
Chapter structure with a persistent progress indicator
Context panels with sourced background on each country and policy
Ways-to-help section with vetted organisations
Low-bandwidth text-only version of every story

Deliberately later

Additional language editions
Classroom pack with lesson plans
Physical exhibition version

Technical stack

React with an intersection-observer scroll engine, a map library with animated paths, media on a CDN, content authored as structured JSON.

Why: Scroll storytelling is fragile if hand-built per story; a data-driven engine lets editors publish new journeys without new code.

Alternatives: Video documentary (higher production value, no interactivity or accessibility control) or a long-form article (simple, far less affecting).

Conceptual data model

Story — subject pseudonym, origin, chapters, published_at, consent record

Chapter — story, narrative, media, map stage, order

MapStage — coordinates path, date range, mode of travel, annotation

MediaAsset — file, type, caption, credit, consent scope

ContextNote — topic, body, sources

Integrations

Map tiles and geodata
Audio and image CDN
Translation and subtitling workflow

UI design principles

Scroll is the narrative device: each section reveals one beat of the story.
Full-bleed imagery alternating with quiet text-only moments to let the reader breathe.
Always offer a skip-to-summary path for readers who want the facts fast.

Security considerations

Subject safety is paramount: pseudonyms by default, faces obscured on request, precise locations blurred where identification is dangerous.
Written informed consent stored per story, with a documented withdrawal process that unpublishes within a day.
No analytics that could correlate a reader with a specific subject's page in a hostile jurisdiction.

Development phases

Phase 1 — Prove the core

— Scroll-linked map animating each journey stage by stage
— Audio narration in the original language with synchronised subtitles
— Chapter structure with a persistent progress indicator
— Static content and design system in place
— Basic analytics

Phase 2 — Make it real

— Context panels with sourced background on each country and policy
— Ways-to-help section with vetted organisations
— Low-bandwidth text-only version of every story
— Accounts, sign-in and password reset
— Empty, loading and error states everywhere

Phase 3 — Polish and launch

— Performance, accessibility and SEO pass
— Legal pages, contact route and 404 handling
— Wire up: Map tiles and geodata
— Wire up: Audio and image CDN

Phase 4 — Grow

— Additional language editions
— Classroom pack with lesson plans
— Physical exhibition version

Challenges and solutions

Risk — Retraumatising subjects during production

Solution — Trauma-informed interview protocol, subject review before publication, and the right to withdraw at any point.

Risk — Heavy media excludes the audiences that matter

Solution — Aggressive compression, lazy loading and a genuine text-only route.

Risk — Scroll interactions break accessibility

Solution — Full keyboard and screen-reader path through the same content, and a reduced-motion static version.

Future expansion

Community-submitted stories with editorial support
Museum installation
Curriculum partnerships

Page list (13 pages)

01 PUBLIC Stories — Index of journeys.
02 PUBLIC Journey — The scroll-driven story itself.
03 PUBLIC Map — All routes on one canvas.
04 PUBLIC Context — Policy and background, sourced.
05 PUBLIC Take Action — Vetted organisations and next steps.
06 AUTH Sign up — Create an account with email or a social provider.
07 AUTH Log in — Return to the account, with error and lockout states.
08 AUTH Reset password — Request a reset link and set a new password.
09 APP (signed in) Account settings — Profile, email, password, language and delete account.
10 PUBLIC Contact — Contact form plus real address, phone and email.
11 LEGAL & SYSTEM Privacy policy — What data is collected, why, and how to remove it.
12 LEGAL & SYSTEM Terms of service — Rules of use, liability and account termination.
13 LEGAL & SYSTEM 404 not found — Friendly dead end with search and links back.

Page map

PUBLIC          AUTH               APP (signed in)      LEGAL & SYSTEM
──────────────  ─────────────────  ───────────────────  ───────────────────
├─ Stories      ├─ Sign up         └─ Account settings  ├─ Privacy policy
├─ Journey      ├─ Log in                               ├─ Terms of service
├─ Map          └─ Reset password                       └─ 404 not found
├─ Context
├─ Take Action
└─ Contact

key flows:
  Stories ──▶ Journey
  Journey ──▶ Context
  Map ──▶ Journey
  Journey ──▶ Take Action