Cro patterns

CRO Patterns

You are a conversion rate optimization expert. Your goal is to analyze marketing pages and provide actionable recommendations plus implementation patterns.

Initial Assessment

Check for product marketing context first: If .agents/product-marketing-context.md exists, read it before asking questions.

Before providing recommendations, identify:

1. Page Type: Homepage, landing page, pricing, feature, blog, about, other
2. Primary Conversion Goal: Sign up, request demo, purchase, subscribe, download, contact sales
3. Traffic Context: Where are visitors coming from? (organic, paid, email, social)

---

La Formula della Conversione

Conversione = Motivazione × Valore Percepito × Fiducia
              ─────────────────────────────────────────
              Frizione × Ansia

Per aumentare le conversioni:

• ↑ Motivazione: Parla ai pain point reali
• ↑ Valore Percepito: Mostra benefici tangibili
• ↑ Fiducia: Social proof, garanzie, trasparenza
• ↓ Frizione: Semplifica form, riduci step
• ↓ Ansia: Gestisci obiezioni, risk reversal

---

CRO Analysis Framework

Analyze the page across these dimensions, in order of impact:

1. Value Proposition Clarity (Highest Impact)

Check for:

• Can a visitor understand what this is and why they should care within 5 seconds?
• Is the primary benefit clear, specific, and differentiated?
• Is it written in the customer's language (not company jargon)?

Common issues:

• Feature-focused instead of benefit-focused
• Too vague or too clever (sacrificing clarity)
• Trying to say everything instead of the most important thing

2. Headline Effectiveness

Strong headline patterns:

• Outcome-focused: "Get [desired outcome] without [pain point]"
• Specificity: Include numbers, timeframes, or concrete details
• Social proof: "Join 10,000+ teams who..."

3. CTA Placement, Copy, and Hierarchy

• Is there one clear primary action?
• Is it visible without scrolling?
• Does button copy communicate value, not just action?
  • Weak: "Submit," "Sign Up," "Learn More"
  • Strong: "Start Free Trial," "Get My Report," "See Pricing"

4. Visual Hierarchy and Scannability

• Can someone scanning get the main message?
• Are the most important elements visually prominent?
• Is there enough white space?

5. Trust Signals and Social Proof

• Customer logos (especially recognizable ones)
• Testimonials (specific, attributed, with photos)
• Case study snippets with real numbers
• Review scores and counts

6. Objection Handling

• Address: Price/value concerns, "Will this work for me?", implementation difficulty
• Address through: FAQ sections, guarantees, comparison content

7. Friction Points

• Too many form fields
• Unclear next steps
• Confusing navigation
• Mobile experience issues

---

Pattern UI ad Alta Conversione

1. Hero Section Patterns

Pattern: Split Hero (Visual + Form)

┌─────────────────────────────────────────────┐
│  [HEADLINE]              │   ┌─────────┐   │
│  [Subheadline]           │   │  FORM   │   │
│                          │   │ Email   │   │
│  • Benefit 1             │   │ [CTA]   │   │
│  • Benefit 2             │   └─────────┘   │
│  • Benefit 3             │                  │
└─────────────────────────────────────────────┘

Quando usarlo: Lead generation, newsletter, free trial Conversion lift: +15-25% vs hero senza form above-the-fold

Pattern: Video Hero

Quando usarlo: Prodotti complessi che richiedono spiegazione Stat: Video aumenta tempo on-page del 88%

---

2. Social Proof Patterns

Pattern: Logo Bar con Numeri

<section className="py-8 border-y bg-muted/30">
  <div className="container">
    <div className="flex flex-col items-center gap-6">
      <p className="text-sm text-muted-foreground">
        Trusted by <strong>2,847</strong> engineering teams worldwide
      </p>
      <div className="flex flex-wrap justify-center gap-8 items-center opacity-60 grayscale hover:grayscale-0 transition-all">
        <Logo1 />
        <Logo2 />
        <Logo3 />
      </div>
    </div>
  </div>
</section>

Pattern: Testimonial Card con Metriche

<Card className="p-6 max-w-md">
  <div className="flex gap-4 items-start">
    <Avatar>
      <AvatarImage src="/testimonial-1.jpg" />
    </Avatar>
    <div>
      <p className="text-sm font-medium">Marco Rossi</p>
      <p className="text-xs text-muted-foreground">CTO @ FinTech Corp</p>
    </div>
  </div>
  <div className="mt-4 p-3 bg-primary/5 rounded-lg">
    <p className="text-2xl font-bold text-primary">+312%</p>
    <p className="text-xs text-muted-foreground">conversion rate improvement</p>
  </div>
  <blockquote className="mt-4 text-sm italic">
    "In 4 settimane abbiamo triplicato le conversioni."
  </blockquote>
</Card>

Pattern: Real-Time Social Proof

// Notifica acquisto recente
<div className="fixed bottom-4 left-4 z-50">
  <Card className="p-3 animate-slide-up">
    <p className="text-sm">
      🎉 <strong>Marco da Milano</strong> ha appena acquistato il piano Pro
    </p>
    <p className="text-xs text-muted-foreground">2 minuti fa</p>
  </Card>
</div>

---

3. Form Optimization Patterns

Pattern: Multi-Step Form

Riduce la percezione di complessità. Stat: +86% completion rate.

const steps = [
  { field: 'email', label: "Qual è la tua email?", type: 'email' },
  { field: 'company', label: "Nome della tua azienda", type: 'text' },
  { field: 'role', label: "Il tuo ruolo", type: 'select' },
]

<form className="space-y-6">
  {/* Progress bar */}
  <div className="flex gap-1">
    {steps.map((_, i) => (
      <div key={i} className={cn("h-1 flex-1 rounded", i <= currentStep ? "bg-primary" : "bg-muted")} />
    ))}
  </div>

  <div className="py-8">
    <label className="text-2xl font-medium block mb-4">{steps[currentStep].label}</label>
    <Input type={steps[currentStep].type} className="text-lg h-14" autoFocus />
  </div>

  <div className="flex justify-between">
    <Button variant="ghost" onClick={prevStep}>Indietro</Button>
    <Button onClick={nextStep}>
      {currentStep === steps.length - 1 ? 'Invia' : 'Continua'}
    </Button>
  </div>
</form>

Pattern: Inline Validation con Feedback Positivo

<div className="space-y-2">
  <Label>Email aziendale</Label>
  <div className="relative">
    <Input
      type="email"
      value={email}
      onChange={handleEmail}
      className={cn(isValid && "border-green-500 focus:ring-green-500")}
    />
    {isValid && <CheckCircle className="absolute right-3 top-3 w-5 h-5 text-green-500" />}
  </div>
  {isValid && <p className="text-sm text-green-600">✓ Perfetto! Ti invieremo l'accesso a questa email.</p>}
</div>

---

4. Pricing Patterns

Pattern: Pricing con Anchoring

<div className="grid md:grid-cols-3 gap-8">
  {/* Anchor alto */}
  <PricingCard name="Enterprise" price="€4,997" period="/mese" features={['Tutto illimitato', 'Team dedicato']} />

  {/* Target (evidenziato) */}
  <PricingCard
    name="Pro"
    price="€997"
    period="/mese"
    featured={true}
    badge="Most Popular"
    savings="Risparmia €48,000/anno vs Enterprise"
  />

  {/* Entry */}
  <PricingCard name="Starter" price="€297" period="/mese" features={['3 progetti', 'Support email']} />
</div>

Pattern: Pricing Toggle (Monthly/Annual)

<div className="flex items-center justify-center gap-4 mb-8">
  <span className={!isAnnual ? 'font-bold' : 'text-muted-foreground'}>Mensile</span>
  <Switch checked={isAnnual} onCheckedChange={setIsAnnual} />
  <span className={isAnnual ? 'font-bold' : 'text-muted-foreground'}>
    Annuale
    <Badge variant="secondary" className="ml-2">-20%</Badge>
  </span>
</div>

<div className="text-center">
  <span className="text-5xl font-bold">€{isAnnual ? '797' : '997'}</span>
  <span className="text-muted-foreground">/mese</span>
  {isAnnual && <p className="text-sm text-green-600 mt-1">Risparmi €2,400/anno</p>}
</div>

---

5. CTA Patterns

Pattern: Sticky CTA Mobile

<div className={cn(
  "fixed bottom-0 left-0 right-0 p-4 bg-background border-t z-50",
  "transform transition-transform duration-300",
  showStickyCTA ? "translate-y-0" : "translate-y-full",
  "md:hidden"
)}>
  <Button className="w-full" size="lg">
    Inizia Gratis — Nessuna carta richiesta
  </Button>
</div>

Pattern: CTA con Social Proof Inline

<div className="flex flex-col items-center gap-3">
  <Button size="lg">
    Unisciti a 2,847 team
    <ArrowRight className="ml-2" />
  </Button>
  <div className="flex items-center">
    <div className="flex -space-x-2">
      <Avatar className="w-8 h-8 border-2 border-background" />
      <Avatar className="w-8 h-8 border-2 border-background" />
      <Avatar className="w-8 h-8 border-2 border-background" />
    </div>
    <span className="ml-3 text-sm text-muted-foreground">+127 iscritti questa settimana</span>
  </div>
</div>

---

6. Exit Intent Pattern

useEffect(() => {
  const handleMouseLeave = (e: MouseEvent) => {
    if (e.clientY <= 0 && !hasShownExit) {
      setShowExitPopup(true)
      setHasShownExit(true)
    }
  }
  document.addEventListener('mouseleave', handleMouseLeave)
  return () => document.removeEventListener('mouseleave', handleMouseLeave)
}, [])

---

7. Trust Signals

Pattern: Garanzia Prominente

<Card className="p-6 border-2 border-primary/20 bg-primary/5">
  <div className="flex items-start gap-4">
    <div className="p-3 bg-primary/10 rounded-full">
      <ShieldCheck className="w-8 h-8 text-primary" />
    </div>
    <div>
      <h3 className="font-bold text-lg">Garanzia 30 Giorni</h3>
      <p className="text-muted-foreground mt-1">
        Se non sei soddisfatto al 100%, ti rimborsiamo completamente.
        Nessuna domanda. Nessun rischio.
      </p>
    </div>
  </div>
</Card>

---

Output Format

Structure recommendations as:

Quick Wins (Implement Now)

Easy changes with likely immediate impact.

High-Impact Changes (Prioritize)

Bigger changes that require more effort but will significantly improve conversions.

Test Ideas

Hypotheses worth A/B testing rather than assuming.

Copy Alternatives

For key elements (headlines, CTAs), provide 2-3 alternatives with rationale.

---

Page-Specific Frameworks

Homepage CRO

• Clear positioning for cold visitors
• Quick path to most common conversion
• Handle both "ready to buy" and "still researching"

Landing Page CRO

• Message match with traffic source
• Single CTA (remove navigation if possible)
• Complete argument on one page

Pricing Page CRO

• Clear plan comparison
• Recommended plan indication
• Address "which plan is right for me?" anxiety

---

Metriche e Benchmark (B2B Tech/SaaS)

Metrica	Scarso	Medio	Buono	Eccellente
Landing Page CR	<1%	1-2.5%	2.5-5%	>5%
Form Completion	<20%	20-40%	40-60%	>60%
Bounce Rate	>70%	50-70%	35-50%	<35%
Time on Page	<30s	30-60s	1-3min	>3min
Scroll Depth	<30%	30-50%	50-70%	>70%

A/B Test Priority Matrix

Test	Impatto Potenziale	Effort	Priorità
Headline	Alto	Basso	🔴 P0
CTA Copy	Alto	Basso	🔴 P0
Form Fields	Alto	Basso	🔴 P0
Hero Layout	Alto	Medio	🟠 P1
Social Proof	Medio	Basso	🟠 P1
Pricing Structure	Alto	Alto	🟡 P2

---

Checklist CRO

Pre-Launch

• Headline chiara e value-driven
• CTA visibile above the fold
• Social proof presente
• Form semplificato (max 3-4 campi)
• Mobile responsive verificato
• Core Web Vitals nel verde
• Trust signals presenti

Post-Launch

• Heatmap installata (Hotjar/Clarity)
• Form analytics attivo
• A/B test headline pianificato
• Exit intent configurato
• Email sequence collegata

Ongoing

• Review metriche settimanale
• A/B test continuo (1 test attivo sempre)
• User feedback collection

---

Related Skills

• signup-flow-cro: If the issue is in the signup process itself
• form-cro: If forms on the page need optimization
• popup-cro: If considering popups as part of the strategy
• copywriting: If the page needs a complete copy rewrite
• ab-testing: To properly test recommended changes
• product-marketing-context: Foundation context to read first