Landing Page
When to use: Building any page with a conversion goal. Auditing an existing page that isn't converting. Starting a new campaign.
The test: Show 5 people the page for 5 seconds. Can all 5 correctly say what it is, who it's for, and what to do next?
Goal and Audience
Before writing a single line of copy or code:
| Decision | Requirement | Validation |
|---|---|---|
| Campaign goal | One specific action: download, demo, waitlist, or purchase | Can you state it in 4 words? |
| Primary CTA | One button/link that achieves the goal | Only one primary-colored action above fold |
| Target persona | Specific person with known pain, desired outcome, main objection | Can you name them? |
| Message match | Ad/email promise matches landing page headline word-for-word | Compare source and page side by side |
Page Structure
Every landing page follows this narrative arc:
Hero --> Problem --> Solution --> Proof --> Details/FAQ --> Final CTA
| Check | Threshold | How to Measure |
|---|---|---|
| Five-second test | 5/5 people identify what, who, action | Test with 5 real people |
| Attention ratio | 1:1 (one link per viewport that matters) | Count clickable elements per viewport |
| Reading pattern | F-pattern (text-heavy) or Z-pattern (visual) respected | Eye-tracking or gaze plot tool |
| Scroll depth to CTA | Primary CTA visible without scrolling | Load page, check above fold |
Hero Section
Above the fold must answer three questions instantly:
- What is it? Headline states the benefit in concrete terms
- Who is it for? Audience obvious from copy or imagery
- What do I do? One CTA visible and distinct
Hero Checklist
| Check | Threshold | How to Measure |
|---|---|---|
| Value proposition visible | Within 3 seconds of page load | Stopwatch test with new viewer |
| Headline word count | 6-12 words | Count words |
| Subhead explains the "how" | 15-25 words | Count words |
| One primary CTA | Exactly 1 primary-colored button | Visual count |
| Supporting visual | Removing it loses information about the offer | Remove image, re-run five-second test -- does comprehension drop? |
| Navigation doesn't compete | CTA button larger (px) and higher contrast than any nav link | DevTools: compare CTA dimensions and contrast to nav links |
CTA Design
Copy Rules
| Rule | Good | Bad |
|---|---|---|
| Action verb + benefit | "Get the framework" | "Submit" |
| Specific over generic | "Start free trial" | "Get started" |
| First person optional | "Get my report" | "Click here" |
| Never use | -- | "Submit", "Click here", "Learn more" |
Visual Rules
| Check | Threshold | How to Measure |
|---|---|---|
| CTA color | Unique on page (appears on zero non-clickable elements) | Search page for the CTA color |
| Button height | 44px minimum | DevTools: element dimensions |
| Horizontal padding | 16px minimum | DevTools: computed padding |
| Hover state | Visible change within 100ms | Mouse over button |
| Contrast against background | 3:1 minimum | Contrast checker |
Placement
- Primary CTA above the fold
- CTA repeated after each major section
- Final CTA at page bottom
- CTA follows reading pattern (bottom-right for Z, left-aligned for F)
Social Proof
Proof Types
| Type | Requirement |
|---|---|
| Testimonials | Real names, roles, photos. Specific outcomes, not vague praise |
| Customer logos | 6-8 maximum. Recognizable to your audience |
| Statistics | Specific numbers ("10,847 users" not "thousands") |
| Press mentions | Publication logos or quotes with attribution |
Placement
- Proof near hero CTA
- Proof near pricing/signup
- Proof after feature sections
- Proof before final CTA
Friction Reduction
Form Optimization
| Check | Threshold | How to Measure |
|---|---|---|
| Field count | Minimum needed for first value delivery (aim for 1-3) | Count fields |
| Labels visible | Always visible, never placeholder-only | Inspect label elements |
| Validation | Inline, real-time, clear error messages | Submit empty/invalid form |
| Smart defaults | Pre-filled where possible | Check for prefilled values |
| Tab order | Logical field-to-field flow | Tab through form |
Anxiety Reducers
- Privacy statement or link
- Security badges if collecting payment
- "No credit card required" if true
- What happens after submit (explicit)
- Expected response time
Objection Handling
Address these before the visitor has to ask:
| Objection | How to Address | Where |
|---|---|---|
| "Is this for me?" | Clear audience targeting in hero copy | Hero section |
| "Does it work?" | Testimonials with specific outcomes | Below hero, near CTA |
| "How long does it take?" | Time investment stated explicitly | Feature section or FAQ |
| "What if it doesn't work?" | Guarantee, trial, or refund policy | Near CTA and FAQ |
| "Why should I trust you?" | Credentials, logos, press mentions | Throughout page |
FAQ Section
- Top 3-5 objections answered
- Honest, specific answers (not marketing fluff)
- Links to deeper content where relevant
- Contact option for unlisted questions
Content Quality
| Check | Threshold | How to Measure |
|---|---|---|
| Value proposition word count | Under 25 words | Count words in hero headline + subhead |
| Subheadings self-explanatory | Reader understands section from heading alone | Cover body text, read only headings |
| Voice consistency | Same tone throughout (no formal-then-casual shifts) | Read aloud start to finish |
| Features as benefits | Every feature rewritten as user outcome | Check each feature bullet |
| No jargon | Zero undefined technical terms (define or link each) | Have 1 non-expert highlight words they don't understand |
Measurement
Tracking Checklist
- Primary conversion event tracked in analytics
- Micro-conversions tracked: scroll depth, button clicks, form starts
- Session recordings enabled (Hotjar, Clarity, etc.)
- UTM parameters configured for traffic sources
- A/B test infrastructure ready
A/B Test Priority
Test in this order (highest impact first):
- Value proposition (headline + subhead)
- CTA copy
- CTA placement
- Social proof type and placement
- Form field count
- Section order
- Visual design details
A/B Test Rules
- Statistical significance threshold set (95% minimum)
- Minimum sample size calculated before starting
- Test duration planned (2-4 weeks minimum)
- Single variable per test (not multiple changes at once)
- Primary metric defined before test begins
- Losing variant killed promptly, winning variant promoted
Conversion Benchmarks
| Page Type | Good | Great |
|---|---|---|
| Landing page | 2-5% | 5-10% |
| Signup form | 20-30% | 30-50% |
| Pricing page | 5-10% | 10-20% |
| Blog to email | 1-3% | 3-5% |
Post-Conversion
After the visitor converts, the experience continues:
- Thank-you page with clear next steps (not a dead end)
- Confirmation email sent immediately
- Expectations set (what happens next, when)
- Upsell or referral opportunity presented (not before they've received value)
- Conversion event tracked and verified in analytics
Pre-Launch Checklist
- Five-second test passed with 5 real people
- Mobile tested on real device (not just DevTools)
- All links verified working
- Forms submit correctly and trigger thank-you page
- Analytics tracking verified (check real-time dashboard)
- LCP under 2.5s (Lighthouse audit)
- Accessibility audit passed (axe DevTools, zero critical violations)
- Content proofread by someone who didn't write it
- Message match verified (ad copy matches page headline)
- CTA color appears nowhere on non-clickable elements
Quick Diagnosis
| Symptom | Likely Cause | Fix |
|---|---|---|
| High bounce rate | Value prop unclear in first 3 seconds | Rewrite headline, run five-second test |
| Low CTA clicks | CTA doesn't stand out visually | Unique color, larger size, more contrast |
| Form abandonment | Too many fields or unclear labels | Remove optional fields, add visible labels |
| Low trust | No social proof visible | Add testimonials with specific outcomes |
| Wrong audience arriving | Message mismatch between source and page | Align ad/email copy with landing page headline |
| Mobile conversion low | CTA below fold or hard to tap | Move CTA up, increase to 44px minimum |
| High scroll depth but low conversion | CTA not repeated or too small | Add CTA after each major section |
Context
- Visual Design -- Typography and hierarchy for landing pages
- Conversion benchmarks and CTA patterns -- Accessible CTA design
- Responsive + Performance -- Mobile and speed requirements
- Design Review -- Review process before launch