conversion-ux

Conversion UX Patterns

Apply these patterns to every funnel page. These are not suggestions — they are requirements for high-converting funnels.

Above the Fold (First Viewport)

Every page must have these 3 elements visible without scrolling:

1. Headline — Clear, benefit-driven, addresses the #1 pain point
2. Sub-headline — Expands on the headline, introduces the solution
3. Primary CTA — Visible, high-contrast button with action-oriented text

<!-- Pattern: Hero Section -->
<section class="hero">
  <h1>Headline: Desired Outcome</h1>
  <p class="subtitle">Sub-headline: How you'll get there</p>
  <a href="#action" class="cta-primary">Action-Oriented CTA Text →</a>
</section>

CTA Button Rules

Rule	Good ✅	Bad ❌
Action-oriented	"Get My Free Guide"	"Submit"
First-person	"Start My Trial"	"Start Your Trial"
Benefit-focused	"Unlock 50% More Sales"	"Click Here"
Urgency	"Claim My Spot (Only 12 Left)"	"Register"
Specificity	"Download the 7-Step Checklist"	"Download"

CTA Placement

• Always above the fold
• Repeat after every major value block (every 2–3 scroll lengths)
• Sticky CTA bar on mobile (bottom of viewport)
• Final CTA with full benefit stack at page bottom

Social Proof Patterns

Testimonial Card

<div class="testimonial">
  <img src="avatar.jpg" alt="Customer Name" class="testimonial-avatar">
  <blockquote>
    <p>"Specific result they achieved with your product."</p>
    <cite>
      <strong>Full Name</strong>
      <span>Title, Company</span>
    </cite>
  </blockquote>
</div>

Trust Bar

<div class="trust-bar">
  <span>As featured in:</span>
  <img src="logo1.svg" alt="Publication 1">
  <img src="logo2.svg" alt="Publication 2">
  <img src="logo3.svg" alt="Publication 3">
</div>

Stats Row

<div class="stats-row">
  <div class="stat"><strong>10,000+</strong><span>Customers Served</span></div>
  <div class="stat"><strong>4.9/5</strong><span>Average Rating</span></div>
  <div class="stat"><strong>30-Day</strong><span>Money-Back Guarantee</span></div>
</div>