Landing Page Checklist
When to use: Starting any new landing page. Auditing existing pages.
The test: Five-second test - can 5 people correctly say what it is, who it's for, and what to do?
A Landing Page IS A Control System
Every landing page is a P&ID (Process & Instrumentation Diagram) for conversion:
▼ HOPPER ▷ PUMP ● GAUGE ? QUESTION
Traffic sources Page content Conversion "Ready to scale,
(ads, SEO, social) (narrative flow) metrics or iterate?"
│ │ │ │
└────────────────┴─────────────────┴──────────────────┘
FEEDBACK LOOP
| P&ID Element | Landing Page Equivalent | Measurement |
|---|---|---|
| Hopper | Traffic sources (wide top catches all) | Impressions, visits |
| Pump | Content flow (creates movement) | Scroll depth, time on page |
| Gauge | Conversion tracking (measures state change) | CTR, form fills, signups |
| Controller | A/B testing ("Is this working?") | Statistical significance |
Without measurement, you cannot close the loop. See Thought Audit for the philosophy.
Workflow
- Define Goal and Audience
- Page Structure and Flow
- Core Message and Language
- Hero and CTAs
- Visual Hierarchy
- Friction, Anxiety, and Forms
- Social Proof and Trust
- Mobile, Performance, Accessibility
- Measurement and Iteration
Define Goal and Audience
Before writing anything:
- One specific campaign goal - download, demo, waitlist, or purchase
- One primary CTA for that goal
- Single target persona - what they know, desired outcome, main objection
- Message match - ad/email promise matches landing page headline
Page Structure and Flow
Basic narrative flow:
Hero → Problem/Agitation → Solution/Offer → Proof → Details/FAQ → Final CTA
- F- or Z-shaped reading pattern (important elements on expected eye paths)
- Five-second test: Can a new visitor say what it is, for whom, and what to click?
- Attention ratio close to 1:1 - one main thing to click per viewport
Core Message and Language
Value proposition formula:
"For [who], [product] helps you [achieve X outcome] by [how], unlike [alternative]."
- Headline: States benefit in concrete terms (not clever taglines)
- Subhead: Explains what it actually is
- Features → Outcomes: Every feature rewritten as user benefit
- No jargon: Each sentence moves toward CTA or handles objection
Hero and CTAs
Above the fold must have:
- Value proposition visible
- One primary CTA visible
- Supporting visual (not competing elements)
- No heavy navigation competing with page CTA
CTA copy rules:
- Strong verb + benefit framing ("Get the framework", "Start free trial")
- Never "Submit" or "Click here"
- CTA color never used on non-clickable elements
Visual Hierarchy
Typography
- Large bold H1; smaller H2 for sections; H3 for details
- Body text 16-18px minimum
- Clear size progression: H1 > H2 > H3 > body
- Max 70-80 characters per line
Spacing
- Consistent scale (8/16/24/32px)
- Generous whitespace - no giant text blocks
- Related items grouped; unrelated items separated
Color
- Strong contrast on CTAs vs background
- CTA color reserved for clickable actions only
- Max 3 colors + neutrals
- WCAG AA contrast (4.5:1 body, 3:1 large)
Friction, Anxiety, and Forms
Forms
- Only fields strictly needed for first value delivery
- Labels always visible (not placeholder-only)
- Fields grouped logically
- Error messages in-context
Anxiety Reducers (near forms)
- Privacy note
- Security badges (if applicable)
- Clear statement of what happens after submit
- No surprise requirements after click
Social Proof and Trust
Placement
- Proof near hero CTA
- Proof near pricing/form
- Proof at key decision points
Types (include at least one)
- Testimonials with real names/roles/photos
- Specific outcomes and use cases (not vague praise)
- Customer/partner logos (6-8 max)
- Usage statistics
FAQ Section
- "Is this for me?"
- "How long does it take?"
- "What if it doesn't work?"
- Top 2-3 objections addressed
Mobile, Performance, Accessibility
Mobile First
- Hero answers what/for whom/next step on small screens
- CTA visible early (thumb-reachable)
- Touch targets 44px minimum
- No horizontal scroll
Performance
- Largest Contentful Paint < 2.5s
- No heavy above-fold scripts
- Compressed images
- Fast server/CDN
Accessibility
- Sufficient contrast
- Focus states visible
- Keyboard navigation works
- Alt text for key images/icons
Measurement and Iteration
Tracking
- Primary conversion event tracked
- Micro-conversions: scroll depth, button clicks, form starts
- Session recordings enabled (Hotjar, etc.)
A/B Test Priority Order
- Value prop + hero
- CTA copy/placement
- Layout/sections
- Fine design tweaks
Qualitative Inputs
- Session recordings reviewed
- User surveys/tests conducted
- "Why" behind the numbers understood
Component Architecture
<Layout>
<Hero
title="..."
subtitle="..."
cta={{ text: "...", to: "..." }}
/>
<Problem ... />
<Solution ... />
<SocialProof items={[...]} />
<Features items={[...]} />
<FAQ items={[...]} />
<FinalCTA ... />
<PageFooter tagline="..." />
</Layout>
Component Rules
- Accept data as props - No hardcoded content
- Use design system primitives -
Heading,Text,Button,Section,Container - Mobile-first - Scales up, not down
- Independently testable - Works in isolation
File Structure
src/components/landing/
├── index.js # Exports
├── Hero.jsx # Above-fold
├── Problem.jsx # Agitation
├── Solution.jsx # Offer
├── SocialProof.jsx # Logos, testimonials
├── Features.jsx # Benefits grid
├── FAQ.jsx # Objection handling
├── FinalCTA.jsx # Bottom conversion
└── PageFooter.jsx # Footer
Pre-Launch Checklist
- Five-second test passed (5 real people)
- Mobile tested on real device
- All links work
- Forms submit correctly
- Analytics tracking verified
- Page speed tested (under 2.5s LCP)
- Accessibility audit passed
- Content proofread
- Message match verified (ad → page)
AI-Assisted Landing Page Development
The VVFL (Virtuous Validated Feedback Loop) accelerates landing page iteration:
┌─────────────────────────────────────────────────────────────────┐
│ LANDING PAGE VVFL │
├─────────────────────────────────────────────────────────────────┤
│ │
│ HYPOTHESIS (Human) EXECUTION (AI) VALIDATION │
│ ├── Define ICP ├── Generate copy ├── Deploy │
│ ├── Core value prop ├── Create variants ├── Measure │
│ └── Success criteria └── Build components └── Learn │
│ │ │ │ │
│ └───────────────────────────┴────────────────────┘ │
│ ITERATE FASTER │
│ │
└─────────────────────────────────────────────────────────────────┘
Human/AI Split
| Stage | Human Responsibility | AI Responsibility | AI % |
|---|---|---|---|
| Strategy | Define ICP, positioning, success metrics | Research competitors, generate insights | 30% |
| Copy | Final voice approval, brand alignment | Generate variants, A/B options | 70% |
| Design | Visual direction, brand consistency | Component generation, responsive layouts | 60% |
| Testing | Hypothesis formation, decision-making | Traffic analysis, statistical calculations | 50% |
| Iteration | Strategic pivots, kill decisions | Pattern detection, recommendations | 40% |
Human edge: Strategic judgment, brand voice, kill decisions AI edge: Variant generation, speed, pattern detection
Crypto Incentive Integration
For Web3 landing pages, consider tokenized conversion:
- Early access tokens - reward early signups with governance or utility tokens
- Referral rewards - on-chain attribution for viral growth
- Proof of attention - verifiable engagement metrics
- Community ownership - contributors earn stake in outcome
See Crypto Economics for incentive design patterns.
Related Docs
- Hybrid Landing Pages - Combining content + sales
- Landing Page Tools - Tech stack options
- Marketing Landing Pages - Conversion optimization
- Thought Audit - The P&ID philosophy applied
References
- Design system:
.claude/skills/design-system/SKILL.md - Typography:
src/components/design-system/Typography.jsx - Buttons:
src/components/design-system/Button.jsx - Layout:
src/components/design-system/Layout.jsx
External sources: