Landing Page Optimizer

---
name: landing-page-optimizer
description: "Optimize landing pages for maximum conversions using proven frameworks from Unbounce and Oli Gardner—apply the \"one goal, one message, one action\" principle with data-driven design, copy, and CTA best practices. Use when: **Create a new landing page** for a campaign; **Optimize an existing landing page** that isn't converting; **Review landing page design** before launch; **Improve form conversion rates** on lead gen pages; **A/B test landing page elements** systematically"
license: MIT
metadata:
  author: ClawFu
  version: 1.0.0
  mcp-server: "@clawfu/mcp-skills"
---

# Landing Page Optimizer

> Optimize landing pages for maximum conversions using proven frameworks from Unbounce and Oli Gardner—apply the "one goal, one message, one action" principle with data-driven design, copy, and CTA best practices.

## When to Use This Skill

Use this skill when you need to:

- **Create a new landing page** for a campaign
- **Optimize an existing landing page** that isn't converting
- **Review landing page design** before launch
- **Improve form conversion rates** on lead gen pages
- **A/B test landing page elements** systematically
- **Audit landing pages** against best practices
- **Write landing page copy** that converts
- **Design CTAs** that drive action

This skill is particularly valuable for:
- PPC marketers running paid campaigns
- Growth marketers optimizing conversion funnels
- Demand gen teams building lead capture pages
- E-commerce marketers creating product landing pages
- Agencies building client landing pages
- Founders launching new products or offers

---

## Methodology Foundation

**Sources:**
- Unbounce - "101 Landing Page Optimization Tips" by Oli Gardner
- Unbounce Landing Page Best Practices
- Unbounce Conversion Benchmark Report (57+ million conversions)

**Core Principle:** One goal, one message, one action. Every element on your landing page should support a single conversion objective with zero distractions.

> "Landing page optimization is the process of systematically improving individual elements to increase conversions. It involves making data-driven changes to design, copy, forms, and calls-to-action that guide more visitors toward taking your desired action."

---


## What Claude Does vs What You Decide

| Claude Does | You Decide |
|-------------|------------|
| Structures production workflow | Final creative direction |
| Suggests technical approaches | Equipment and tool choices |
| Creates templates and checklists | Quality standards |
| Identifies best practices | Brand/voice decisions |
| Generates script outlines | Final script approval |

## What This Skill Does

When invoked, I will guide you through comprehensive landing page optimization:

1. **Define your conversion goal** - Clarify the single action you want
2. **Audit current page** - Identify conversion blockers
3. **Optimize above-the-fold** - Headline, value prop, CTA placement
4. **Improve copy and messaging** - Clear, benefit-focused language
5. **Design for conversion** - Visual hierarchy and directional cues
6. **Optimize forms** - Reduce friction, improve completion
7. **Build trust elements** - Social proof, credibility indicators
8. **Plan A/B tests** - Systematic improvement approach

---

## How to Use

Provide information about your landing page or campaign:

**Example prompts:**

- "Review this landing page and suggest optimizations: [URL/description]"
- "Create a landing page structure for [campaign/offer]"
- "Optimize my lead gen form for better conversions"
- "Write landing page copy for [product/service]"
- "Help me A/B test my landing page CTA"
- "Audit this page against best practices"

**Information that helps:**

- The offer or campaign goal
- Target audience
- Traffic source (PPC, email, social, etc.)
- Current conversion rate (if known)
- Existing copy/design (screenshot or description)
- Form fields required
- Industry/vertical

---

## Instructions

### The Foundation: One Goal, One Message, One Action

Before optimizing anything, clarify:

| Question | Purpose |
|----------|---------|
| What is the ONE action you want? | Define primary conversion goal |
| What is the ONE message? | Core value proposition |
| Who is the ONE audience? | Specific visitor segment |

Everything on the page must support this singular focus.

---

### Phase 1: Message Match

#### The Principle

Visitors arrive with expectations set by your ad or email. Your landing page must immediately confirm they're in the right place.

**Message match checklist:**

| Element | Ad/Email | Landing Page |
|---------|----------|--------------|
| Headline | Same or similar | Matches promise |
| Imagery | Consistent style | Same visual tone |
| Offer | Specific promise | Exact same offer |
| CTA | Action implied | Action delivered |

#### Common Message Match Failures

```
BAD: Ad says "50% off running shoes"
     → Landing page shows general shoe catalog

GOOD: Ad says "50% off running shoes"
      → Landing page shows running shoes with 50% off prominently displayed
```

**For multiple ads:** Use Dynamic Text Replacement to match ad copy to landing page headlines automatically.

---

### Phase 2: Above-the-Fold Optimization

#### What Must Appear Above the Fold

1. **Headline** - Clear value proposition
2. **Subheadline** - Supporting benefit or clarification
3. **Hero image/video** - Product in action or relevant visual
4. **Primary CTA** - Obvious, clickable button
5. **Trust indicator** - One proof point (optional but helpful)

#### Above-the-Fold Layout Template

```
┌─────────────────────────────────────────┐
│  [Logo]                    [Trust badge]│
├─────────────────────────────────────────┤
│                                         │
│  [HEADLINE - Main Value Proposition]    │
│                                         │
│  [Subheadline - Supporting benefit]     │
│                                         │
│  ┌─────────────────┐   ┌─────────────┐  │
│  │                 │   │ [Hero Image │  │
│  │   [CTA BUTTON]  │   │ or Video]   │  │
│  │                 │   │             │  │
│  └─────────────────┘   └─────────────┘  │
│                                         │
│  [Brief trust statement or social proof]│
└─────────────────────────────────────────┘
```

#### The Five-Second Test

Show your page to someone for 5 seconds, then hide it. Ask:
- What was the page about?
- What was the main offer?
- What were you supposed to do?

If they can't answer clearly, your above-the-fold needs work.

---

### Phase 3: Copy Optimization

#### Headline Formulas

**Benefit-focused:**
```
[Get/Achieve] [Desired Outcome] [Without Common Pain Point]

Example: "Get More Qualified Leads Without Cold Calling"
```

**Problem-agitate:**
```
[Tired of/Struggling with] [Pain Point]? [Solution]

Example: "Tired of Landing Pages That Don't Convert? We Can Help"
```

**Specificity:**
```
[Specific Number] [People/Companies] [Achieved Specific Result]

Example: "12,847 Marketers Increased Conversions by 34%"
```

#### Body Copy Best Practices

| Do | Don't |
|----|-------|
| Short paragraphs (2-3 sentences) | Walls of text |
| Bullet points for benefits | Long, dense lists |
| "You" focused language | "We" focused language |
| Specific numbers and results | Vague claims |
| Action verbs | Passive voice |

#### The Krug Rule

> "Cut your copy in half, then throw away half of what's left."

If you can say it in fewer words, do it.

---

### Phase 4: CTA Optimization

#### CTA Copy Best Practices

**Be specific about what happens:**

| Weak CTA | Strong CTA |
|----------|------------|
| Submit | Get My Free Ebook |
| Click Here | Start My Free Trial |
| Learn More | See Pricing Plans |
| Download | Download the Checklist |
| Sign Up | Create My Account |

**Use first-person when possible:**
- "Start my free trial" vs. "Start your free trial"
- "Get my copy" vs. "Get your copy"

#### CTA Design Checklist

- [ ] **Contrasting color** - Stands out from page
- [ ] **Adequate size** - Easy to click/tap
- [ ] **Whitespace** - Breathing room around button
- [ ] **Above the fold** - Visible without scrolling
- [ ] **Repeated on long pages** - Every screen length
- [ ] **Looks clickable** - Button shape, depth, hover state

#### Button Color

Contrast matters more than specific color. The button should be the most visually prominent element on the page.

Test colors, but prioritize:
- High contrast with background
- Different from other page elements
- Consistent with (but stands out from) brand

---

### Phase 5: Form Optimization

#### The Friction Formula

More fields = More friction = Fewer conversions

#### Field Reduction Strategy

| Keep | Question | Remove |
|------|----------|--------|
| Name | Do you need first AND last? | Title, suffix |
| Email | Required for follow-up | Secondary email |
| Phone | Will you actually call? | Fax |
| Company | Essential for B2B qualification | Company size |
| Role | Helps with segmentation | Years experience |

**Rule of thumb:** For every field you add, ask "Will this information meaningfully improve our ability to serve this lead?"

#### Multi-Step Forms

For 5+ required fields, split into steps:

```
Step 1 (Easy):
- Name
- Email

Step 2 (Medium):
- Company
- Role

Step 3 (Sensitive):
- Budget
- Timeline
```

Start easy, progress to sensitive.

#### Form Design Best Practices

- Large, readable labels
- Single column layout (easier to scan)
- Clear error messages
- Progress indicators for multi-step
- Inline validation
- Mobile-friendly tap targets

---

### Phase 6: Trust Building

#### Trust Elements to Include

| Element | Use Case | Placement |
|---------|----------|-----------|
| **Testimonials** | B2B, services, courses | Near CTA or mid-page |
| **Customer logos** | B2B, enterprise | Above fold or footer |
| **Reviews/ratings** | E-commerce, SaaS | Near pricing/CTA |
| **Case study snippets** | B2B, high-ticket | Supporting content |
| **Security badges** | E-commerce, forms | Near form/checkout |
| **Guarantees** | E-commerce, courses | Near CTA |
| **Media mentions** | Brand building | Footer or trust bar |

#### Testimonial Best Practices

**Weak testimonial:**
> "Great product!" — J.S.

**Strong testimonial:**
> "We increased our conversion rate by 47% in the first month. The ROI paid for the annual subscription in two weeks." — Jane Smith, Marketing Director at Acme Corp [with photo]

Include:
- Full name and title
- Company name
- Specific results
- Photo (video even better)

#### Trust Killers to Avoid

- Generic stock photos (especially handshakes)
- Fake urgency ("Only 3 left!" when there are unlimited)
- Unverifiable claims
- Aggressive popups
- Spelling and grammar errors
- Broken links or images

---

### Phase 7: Visual Hierarchy and Design

#### Directional Cues

Guide the eye toward your CTA using:
- **Arrows** - Literal pointers
- **Eye gaze** - People in photos looking toward CTA
- **Lines and shapes** - Leading toward action area
- **Color contrast** - Making CTA pop
- **White space** - Framing important elements

#### Design Principles

| Principle | Application |
|-----------|-------------|
| **F-pattern reading** | Put key info along top and left |
| **Z-pattern for images** | Eye moves diagonally across |
| **Contrast** | Make important elements pop |
| **Proximity** | Group related elements |
| **Alignment** | Create visual order |
| **Repetition** | Consistent styling throughout |

#### Mobile Optimization

83% of landing page visits are on mobile devices.

**Mobile checklist:**
- [ ] Single column layout
- [ ] Large, tappable buttons (44px minimum)
- [ ] Readable text without zooming
- [ ] Fast load time (<3 seconds)
- [ ] Simplified navigation
- [ ] Click-to-call phone numbers

---

### Phase 8: A/B Testing

#### Testing Hierarchy (Highest Impact First)

1. **Offer** - What you're selling
2. **Headline** - Main value proposition
3. **CTA** - Copy and design
4. **Hero image** - Visual impact
5. **Form length** - Number of fields
6. **Social proof** - Type and placement
7. **Page length** - Short vs. long form

#### Testing Best Practices

- Test one variable at a time
- Wait for statistical significance
- Document every test and result
- Have a hypothesis before testing
- Let winners inform future tests

#### What to Test

| Element | Variations to Try |
|---------|-------------------|
| Headline | Benefit vs. problem, short vs. long |
| CTA copy | Action words, first vs. second person |
| CTA color | High contrast options |
| Form | Fields, steps, layout |
| Images | Product shots, people, illustrations |
| Social proof | Testimonials, logos, reviews |
| Page length | Short vs. long form |

---

## Examples

### Example 1: SaaS Free Trial Landing Page

**Context:** Project management software offering 14-day free trial

**Current Issues:**
- Headline talks about features, not outcomes
- CTA says "Submit"
- 8-field form with phone number required
- No social proof above fold

**Optimized Structure:**

```
ABOVE THE FOLD
━━━━━━━━━━━━━━━
Headline: "Finish Projects 40% Faster—Without the Chaos"
Subhead: "Join 12,000+ teams who've simplified project management"

[Hero: Screenshot of clean dashboard with happy metrics]

CTA: "Start My Free Trial" (no credit card required)

Trust bar: [Logo] [Logo] [Logo] "Trusted by teams at..."

BELOW THE FOLD
━━━━━━━━━━━━━━━
Section: 3 key benefits with icons
- "See every project at a glance"
- "Automate status updates"
- "Collaborate without meetings"

Section: Social proof
- Video testimonial from recognizable company
- Specific results ("Saved 10 hours/week per team member")

Section: Quick product tour (3-step animation)

Section: FAQ (3 most common objections)

STICKY CTA (on scroll):
"Start My Free Trial"
```

**Form optimization:**
- Reduced from 8 fields to 3 (name, email, company)
- Single step
- "No credit card required" near button

---

### Example 2: Lead Gen Ebook Landing Page

**Context:** B2B consulting firm offering industry report download

**Current Issues:**
- Long copy before form
- Generic "Download" CTA
- No preview of content
- Missing author credentials

**Optimized Structure:**

```
ABOVE THE FOLD
━━━━━━━━━━━━━━━
Headline: "The 2024 State of [Industry] Report"
Subhead: "Data from 500+ companies reveals what's working (and what's not)"

[Hero: 3D mockup of report cover]

FORM (3 fields):
- Name
- Work Email
- Company

CTA: "Get My Free Report"

Trust: "Downloaded by 5,000+ executives"

BELOW THE FOLD
━━━━━━━━━━━━━━━
Section: What's inside (table of contents preview)
- "Chapter 1: The Metrics That Matter"
- "Chapter 2: Benchmarks by Company Size"
- "Chapter 3: Predictions for 2025"

Section: Author credentials
- Photo, title, notable clients
- "Based on 15 years of consulting experience"

Section: Sample data visualization from report

Section: Testimonials from previous readers
- "This report changed how we budget" — CMO, Fortune 500

BOTTOM CTA:
"Get Your Free Copy Now"
```

**Key changes:**
- Form visible above fold
- Content preview creates desire
- Author credentials build trust
- Specific, valuable CTA copy

---

## Checklists & Templates

### Pre-Launch Landing Page Checklist

```
MESSAGE & CONTENT
□ Single, clear conversion goal defined
□ Headline matches ad/email promise
□ Value proposition clear in 5 seconds
□ Copy is concise and benefit-focused
□ No navigation or exit links
□ All content supports conversion goal

CTA OPTIMIZATION
□ CTA visible above the fold
□ Button text is specific and action-oriented
□ High contrast button design
□ CTA repeated on long pages
□ Secondary CTA for not-ready visitors (optional)

FORM (if applicable)
□ Minimum necessary fields only
□ Privacy policy link included
□ Thank you page configured
□ Form submission tested
□ Error states are helpful

TRUST ELEMENTS
□ Social proof included (testimonials, logos, reviews)
□ Credentials/certifications displayed
□ Contact information available
□ No broken links or images
□ Spelling and grammar checked

TECHNICAL
□ Mobile responsive verified
□ Page loads in <3 seconds
□ Analytics tracking installed
□ A/B test variant created (if testing)
□ Cross-browser tested
```

### Landing Page Brief Template

```
LANDING PAGE BRIEF

Campaign: ____________________
Traffic Source: ____________________
Target Audience: ____________________

CONVERSION GOAL
Primary action: ____________________
Success metric: ____________________

MESSAGING
Headline: ____________________
Subheadline: ____________________
Key benefits (3):
1. ____________________
2. ____________________
3. ____________________

OFFER
What they get: ____________________
Why it's valuable: ____________________
Urgency/scarcity: ____________________

TRUST ELEMENTS
Testimonials available: □ Yes □ No
Customer logos: □ Yes □ No
Statistics/results: ____________________

FORM FIELDS (if applicable)
Required:
□ ____________________
□ ____________________
Optional:
□ ____________________

DESIGN NOTES
Hero image: ____________________
Brand colors: ____________________
Mobile considerations: ____________________
```

### A/B Test Planning Template

```
A/B TEST PLAN

Test Name: ____________________
Start Date: ____________________
Traffic Required: ____________________

HYPOTHESIS
"If we change [element] from [A] to [B],
then [metric] will [increase/decrease]
because [reason]."

VARIANTS
Control (A): ____________________
Variation (B): ____________________

SUCCESS METRIC
Primary: ____________________
Secondary: ____________________

MINIMUM SAMPLE SIZE: ____________________
EXPECTED DURATION: ____________________

RESULTS
Winner: ____________________
Lift: ____________________
Confidence: ____________________

LEARNINGS
____________________
____________________

NEXT TEST
____________________
```

---

## Skill Boundaries

### What This Skill Does Well
- Structuring audio production workflows
- Providing technical guidance
- Creating quality checklists
- Suggesting creative approaches

### What This Skill Cannot Do
- Replace audio engineering expertise
- Make subjective creative decisions
- Access or edit audio files directly
- Guarantee commercial success

## References

**Primary Sources:**
- Unbounce. "101 Landing Page Optimization Tips." By Oli Gardner & Garrett Hughes.
- Unbounce. "Landing Page Best Practices."
- Unbounce Conversion Benchmark Report

**Additional Resources:**
- Krug, Steve. "Don't Make Me Think."
- Godin, Seth. "Permission Marketing."
- CXL Institute landing page courses

---

## Related Skills

- **copy-frameworks** - AIDA, PAS, and other persuasion structures
- **cta-writing** - Crafting effective calls-to-action
- **headline-formulas** - Proven headline templates
- **persuasion-cialdini** - Psychology of influence
- **conversion-copywriting** - Copy that converts
- **grand-slam-offers** - Creating irresistible offers
- **sales-letter-writer** - Long-form persuasive copy