The Preflight Storyboard: Turn One Landing Page Narrative into 5 Store Screenshots + a 30s Preview Video

Before you create a single image, extract the landing page’s basic story: (1) Hero hook — the single promise you want to make in the first screenshot; (2) Transferable proof — the one example or metric that makes the promise believable; (3) Core flow — the 3–5 steps a user takes to get value; (4) Close / CTA — the reason to tap or download now. Keep the story to one short sentence for each element.

If you can’t summarize the landing hook in one 10–12 word sentence, simplify the product promise. When the screenshot sequence and the page headline use the same concise language, visitors experience continuity and trust. This alignment is the primary job of the Preflight Storyboard.

bullets:[

Use a fixed mapping so every creative partner knows what each panel must do. We recommend this sequence: (1) Hero hook (value promise + one UI frame or hero art); (2) Benefit explained (feature framed as outcome); (3) The flow (1–2 UI frames stitched into one readable step); (4) Social/proof or unique differentiator; (5) Close with CTA and visual of the app in context. Each panel must be able to stand alone (users swipe quickly) but also form a coherent story when seen as a set.

For each panel write three deliverables: exact on-image caption (10–14 words), a one-line visual note (framing, device orientation, background), and the export preset (device pixel size, file type). This removes guesswork for contractors and drastically reduces revision rounds.

bullets:[

Don’t hand a designer vague instructions like “make the text pop.” Provide the exact caption string, bracketed micro-variations for A/B tests, and the tone (e.g., bold imperative vs. friendly declarative). Example: Caption: “Get organized in 60 seconds — Lists, Reminders, Smart Tags.” Micro-variants: replace “60 seconds” with “minutes” for A/B. Visual note: “iPhone 6.7" portrait; app UI fills center 60% width; left third dark overlay for white headline.”

Also include localization guidance and character limits per language. Designers often create assets that look great in English but break when German or Japanese text expands. If you expect localizations, provide the longest expected string to the contractor so layouts are safe by default.

bullets:[

A 30‑second preview should be a visual, trimmed version of the screenshot story: 0–5s hook, 6–15s core flow demo, 16–23s proof/differentiator, 24–30s close + CTA. Keep narration or captions short and always readable at mobile preview sizes. Apple allows 15–30s previews and is strict on technical specs — exact resolution targets, frame rate, and audio track requirements — so include platform-specific export presets for Apple and Google.

Create a four-column asset sheet for the contractor: shot start/end time, visual description, on-screen caption text, export preset. Example export presets: Apple App Preview (iPhone 6.7" target) — H.264 baseline/Main, 30 fps, stereo AAC 256 kbps, exactly 1920×860 (poster frame guidance from App Store Preview docs); Google Play promo video — MP4 H.264, 30 fps, 1280×720 recommended. Verify current exact Apple/Google pixel and codec specs in platform docs before final export (platforms change accepted containers and sizes).

bullets:[

Standardize filenames and layers so contractors deliver predictable files. File names should include app slug, locale, device class, panel number, and version (example: myapp_en_US_iPhone6p_panel1_v2.png). Ask for layered source files (Figma or PSD) and flattened exports. Provide a QA checklist with these checks: legibility at thumbnail size, correct text strings (including micro-variants), no real user PII visible, correct color profile (sRGB), and exact file dimensions and codecs.

Before upload, run a quick preview: view the screenshot set and video on an actual phone at thumbnail scale and in the App Store / Play Console previewer (or use Apple’s App Preview test), and run the video through the exact encoding pipeline you’ll use for submission. This catches platform rejections early—video rejections often stem from incorrect frame rate, missing audio track, or unsupported codec parameters.

bullets:[