Conversion optimization and UX strategy for premium websites. Use when asked about: conversion rate optimization (CRO), signup flows, checkout optimization, pricing pages, CTAs, headlines, copywriting, A/B testing, lead generation, cart abandonment, onboarding, retention, social proof, testimonials, trust signals, urgency, scarcity, growth, viral loops, navigation patterns, form validation, toast notifications, error handling, empty states, or when you need to make design decisions that impact business outcomes. This skill provides the "why" behind design choices. References elite-design-core for visual hierarchy. Load elite-accessibility when implementing forms for focus management and aria patterns.
Install with Codex or Claude Copy this prompt, paste it into Codex, Claude, or another assistant, and let it review the skill page and install it for you.
A direct command skips the review prompt. Inspect the source before running it.
Conversion optimization and UX strategy for premium websites. Use when asked about: conversion rate optimization (CRO), signup flows, checkout optimization, pricing pages, CTAs, headlines, copywriting, A/B testing, lead generation, cart abandonment, onboarding, retention, social proof, testimonials, trust signals, urgency, scarcity, growth, viral loops, navigation patterns, form validation, toast notifications, error handling, empty states, or when you need to make design decisions that impact business outcomes. This skill provides the "why" behind design choices. References elite-design-core for visual hierarchy. Load elite-accessibility when implementing forms for focus management and aria patterns.
Elite UX Strategy
Beautiful design means nothing if it doesn't convert. This skill bridges psychology, design, and business strategy.
1. CLARITY โ Can users understand what you offer in 5 seconds?
2. RELEVANCE โ Does it match what brought them here?
3. VALUE โ Is the benefit clear and compelling?
4. FRICTION โ What's stopping them from acting?
5. URGENCY โ Why should they act now?
When Aesthetics vs Conversion Conflict
Situation
Decision
Beautiful animation delays CTA visibility
Reduce/remove animation
Minimal design hides trust signals
Add trust signals strategically
Creative layout confuses scanning
Use proven patterns
Bold design choice feels risky
A/B test it
"Cleaner" means fewer conversion elements
Test removal vs keeping
Default rule: When in doubt, optimize for clarity over creativity.
The Conversion Funnel (AIDA+RR)
โโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโ
โ AWARENESS โ First impression, hero, headline โ
โ โ Goal: Stop the scroll, communicate value โ
โโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโค
โ INTEREST โ Features, benefits, how it works โ
โ โ Goal: Build curiosity, answer "what?" โ
โโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโค
โ DESIRE โ Social proof, case studies, emotional appeal โ
โ โ Goal: Create want, answer "why me?" โ
โโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโค
โ ACTION โ CTA, pricing, signup form โ
โ โ Goal: Remove friction, make it easy โ
โโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโค
โ RETENTION โ Onboarding, engagement, value delivery โ
โ โ Goal: Create habit, deliver promised value โ
โโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโค
โ REFERRAL โ Share mechanics, referral program โ
โ โ Goal: Turn users into advocates โ
โโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโ
Warning: Over-animation delays CTAs and frustrates users. Use purposefully.
elite-layouts (Structure)
Pattern
Conversion Impact
Bento grids
Scannable features โ faster comprehension
Horizontal scroll
Immersive storytelling โ emotional connection
Sticky sections
Persistent CTAs โ higher click-through
Container queries
Consistent experience โ mobile conversion
elite-performance (Speed)
Every second counts:
1s delay = 7% conversion loss
3s load time = 53% mobile bounce
LCP > 2.5s = significant ranking penalty
Speed IS a conversion factor.
elite-accessibility
Practice
Conversion Impact
WCAG compliance
Larger addressable audience
Clear focus states
Keyboard users can convert
Accessible forms
Fewer errors, more completions
Trust signal
Signals professionalism
Quick Decision Framework
Should I add this element?
1. Does it reduce friction? โ Add it
2. Does it build trust? โ Add it (strategically placed)
3. Does it distract from the CTA? โ Remove or de-emphasize
4. Does it answer an objection? โ Add it near the decision point
5. Does it look good but serve no purpose? โ Remove it
Should I test this change?
HIGH IMPACT (test first):
- Headlines and value props
- CTA copy and placement
- Pricing presentation
- Form fields (removing any)
- Social proof placement
LOW IMPACT (implement without test):
- Minor copy tweaks
- Color variations (usually)
- Icon changes
- Spacing adjustments
Common Conversion Killers
Above the Fold
Unclear value proposition
No visible CTA
Slow loading hero image/video
Generic stock photography
Jargon-heavy headline
Throughout the Page
Missing social proof
No trust signals (especially near payment)
Too many choices (paradox of choice)
Friction in forms (unnecessary fields)
No urgency or reason to act now
Mobile experience significantly worse
Psychological
Not addressing objections
Benefits buried under features
No risk reversal (guarantees, free trials)
Asking for too much too soon
Ignoring user's awareness level
Project Type Quick-Starts
SaaS Landing Page
Priority order:
1. Clear value prop in headline
2. Social proof (logos, testimonials)
3. Feature/benefit section
4. Pricing with recommended tier
5. FAQ addressing objections
6. Final CTA with guarantee
E-commerce Product Page
Priority order:
1. High-quality product images
2. Clear price and availability
3. Reviews and ratings
4. Add to cart (prominent, sticky on mobile)
5. Trust signals (shipping, returns, security)
6. Cross-sells/upsells (post add-to-cart)
7. Scarcity badges for real inventory status
โ See mobile-conversion.md: Sticky Add-to-Cart
โ See social-proof-trust.md: Scarcity Badges
Lead Generation
Priority order:
1. Compelling offer (what they get)
2. Minimal form (name + email minimum)
3. Social proof (number of subscribers, testimonials)
4. Clear privacy assurance
5. Expectation setting (what happens next)
Advanced: Quiz-based lead gen (40-60% completion rates)
โ See forms-ctas.md: Quiz-Based Lead Generation
Service Business (Legal, Medical, Trades)
Priority order:
1. Trust signals (credentials, trust strips)
2. Clear service descriptions
3. Mobile bottom bar CTA (call + book)
4. Social proof (testimonials, reviews)
5. FAQ addressing common concerns
โ See mobile-conversion.md: Mobile Bottom Bar CTA
โ See social-proof-trust.md: Trust Strips and Credential Logos
