---
name: conversion-architecture
description: Enforces conversion-first page structure, CTA placement strategy, trust signals, and psychological persuasion patterns that turn visitors into leads/customers.
---

# Conversion Architecture Skill

This skill ensures every page is engineered to convert — not just look good. A $10K website must justify its price through measurable business results. Every layout decision, every section order, every CTA placement is intentional.

## Core Rules for Conversion

### 1. Hero Section (Above the Fold)
- **3-second rule:** A visitor must understand WHAT you do, WHO it's for, and WHY they should care within 3 seconds of landing.
- **Required elements:**
  - **Headline:** Benefit-driven, not feature-driven. "Grow your revenue 3x" beats "AI-powered marketing platform."
  - **Subheadline:** 1-2 sentences that clarify the mechanism or add specificity.
  - **Primary CTA:** High-contrast button with action verb ("Get Started Free", "Book a Demo", "See Pricing"). NEVER "Learn More" as the primary CTA.
  - **Social proof micro-signal:** Logo bar, star rating, or "Trusted by X+ companies" directly below or beside the CTA.
- **Visual:** Hero must have a visual element (product screenshot, video, illustration). Text-only heroes feel unfinished.

### 2. Page Section Flow (Conversion Funnel Order)
Structure every landing page in this proven psychological order:
1. **Hero** — Promise + CTA
2. **Logo Bar / Social Proof** — Establish credibility immediately
3. **Problem Statement** — Agitate the pain the visitor has
4. **Solution Overview** — How the product/service solves it (feature highlights)
5. **How It Works** — 3-step process or visual walkthrough (reduces perceived complexity)
6. **Results / Case Studies** — Proof it works (metrics, testimonials, before/after)
7. **Pricing or Offer** — Make the decision easy
8. **FAQ** — Handle objections
9. **Final CTA** — Repeat the primary call-to-action with urgency

### 3. CTA Strategy
- **Frequency:** A CTA must appear at least every 2-3 scroll sections. Never make the user scroll back up to convert.
- **Visual weight:** Primary CTAs must be the highest-contrast element on the page. If the page is dark, the CTA button should glow.
- **Hierarchy:** Every page has ONE primary action and at most one secondary action. Never present 3+ equal-weight choices.
- **Above the fold:** The primary CTA MUST be visible without scrolling on both desktop and mobile.
- **Sticky CTA:** On long-form pages, implement a sticky header or floating CTA button that appears after the user scrolls past the hero.

### 4. Trust & Credibility Signals
- **Logo bar:** Client/partner logos in grayscale, horizontally scrolling if many. Place within the first 2 sections.
- **Testimonials:** Use real names, real photos (or initials with company), and specific results ("Increased conversions by 47%"). Generic praise ("Great product!") is worthless.
- **Numbers:** Display key metrics prominently (users served, uptime, years in business). Animate them counting up on scroll.
- **Badges:** Security badges, certifications, "Featured in" press logos near checkout/pricing.

### 5. Urgency & Scarcity (Use Ethically)
- **Deadline-driven offers:** If there's a real deadline, show a countdown timer.
- **Social proof nudges:** "12 people are viewing this right now" or "Last purchased 3 minutes ago" — only if backed by real data.
- **Limited availability:** "Only 5 spots remaining this month" — only if true.
- **NEVER fabricate urgency.** Fake timers and false scarcity destroy trust permanently.

### 6. Mobile Conversion
- CTAs must be thumb-reachable (bottom 60% of mobile viewport).
- Forms must be minimal — 3 fields maximum on mobile (Name, Email, one qualifier).
- Phone numbers must be `tel:` linked. Emails must be `mailto:` linked.
- Sticky mobile CTA bar (fixed bottom) on key conversion pages.

### 7. Form & Lead Capture
- **Progressive disclosure:** Don't ask for 10 fields upfront. Start with email only, then expand.
- **Inline validation:** Show success/error states as the user types, not after submission.
- **Microcopy:** Add helper text below fields ("We'll never share your email") to reduce friction.
- **Success state:** After submission, show a clear confirmation with next steps — never just refresh the page.