Elite UX Strategy
Beautiful design means nothing if it doesn't convert. This skill bridges psychology, design, and business strategy.
Quick Reference
| Topic |
Reference File |
| Psychology & Persuasion |
psychology-foundations.md |
| Funnel Strategy |
funnel-strategy.md |
| Copywriting |
copywriting.md |
| Social Proof & Trust |
social-proof-trust.md |
| Pricing Pages |
references/pricing-pages.md |
| Forms & CTAs |
forms-ctas.md |
| Testing & Benchmarks |
testing-benchmarks.md |
| Mobile Conversion |
mobile-conversion.md |
| Ethical Boundaries |
ethical-boundaries.md |
| Modern Patterns |
modern-patterns.md |
| Navigation patterns |
navigation-patterns.md |
| Forms & feedback |
forms-feedback.md |
Conversion-First Philosophy
The Hierarchy
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 │
└─────────────────────────────────────────────────────────────┘
See funnel-strategy.md for stage-specific patterns.
Buyer Persona Quick Reference
By Decision Style
| Type |
Characteristics |
Design Approach |
| Analytical |
Needs data, compares options, slow decision |
Feature tables, specs, case studies with metrics |
| Emotional |
Decides by feeling, influenced by stories |
Testimonials, imagery, transformation narrative |
| Impulsive |
Quick decisions, responds to urgency |
Strong CTAs, limited-time offers, social proof |
| Methodical |
Process-driven, needs all information |
FAQs, detailed documentation, guided tours |
By Context
| Context |
Buyer Behavior |
Strategy |
| B2B |
Multiple stakeholders, longer cycle |
ROI focus, case studies, demos, security signals |
| B2C |
Individual decision, emotional factors |
Benefits over features, lifestyle imagery, reviews |
| High-ticket |
Considered purchase, risk averse |
Trust signals, guarantees, human touch (calls/chat) |
| Low-ticket |
Impulse-friendly, price sensitive |
Urgency, social proof, frictionless checkout |
| Enterprise |
Committee decision, compliance needs |
Custom solutions, SLAs, dedicated support |
| SMB |
Speed matters, budget conscious |
Quick value, clear pricing, self-serve |
Key Benchmarks (2024-2026)
| Metric |
Poor |
Average |
Good |
Excellent |
| Landing page conversion |
< 2% |
2-5% |
6-10% |
15%+ |
| Email capture rate |
< 1% |
1-2% |
2-5% |
5%+ |
| Cart abandonment |
> 80% |
70-80% |
60-70% |
< 60% |
| Free trial → Paid (SaaS) |
< 5% |
5-10% |
10-20% |
25%+ |
| Mobile vs Desktop gap |
> 2.5x |
2-2.5x |
1.5-2x |
< 1.5x |
Integration with Other Elite Skills
Every design decision affects conversion. Here's how the other skills impact business outcomes:
elite-gsap (Animations)
| Pattern |
Conversion Impact |
| ScrollTrigger reveals |
Progressive disclosure keeps attention → lower bounce |
| SplitText headlines |
Attention capture → increased engagement |
| Flip filtering |
Smooth product browsing → higher AOV |
| Loading animations |
Perceived performance → lower abandonment |
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
Throughout the Page
Psychological
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
Enterprise/B2B
Priority order:
1. Credibility (client logos, case studies)
2. Clear problem/solution framing
3. Demo/consultation CTA (not "Buy Now")
4. Security and compliance signals
5. Multiple contact options
6. Detailed documentation accessible
The 80/20 of Conversion
Focus here first for maximum impact:
- Headline clarity - 5-second test: does a stranger understand your value?
- CTA visibility - Is it obvious what to do next?
- Social proof placement - Near decision points, not just at bottom
- Mobile experience - Where most traffic comes from
- Page speed - Sub-3-second loads
- Trust signals - Especially near payment/signup
Resources
- psychology-foundations.md - The science behind decisions
- funnel-strategy.md - Stage-by-stage optimization
- copywriting.md - Words that convert
- testing-benchmarks.md - What to test and what's "good"
- ethical-boundaries.md - Persuasion vs manipulation
1---2name: elite-ux-strategy3description: 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.4---56# Elite UX Strategy78Beautiful design means nothing if it doesn't convert. This skill bridges psychology, design, and business strategy.910## Quick Reference1112| Topic | Reference File |13| ----------------------- | ----------------------------------------------------------------- |14| Psychology & Persuasion | [psychology-foundations.md](references/psychology-foundations.md) |15| Funnel Strategy | [funnel-strategy.md](references/funnel-strategy.md) |16| Copywriting | [copywriting.md](references/copywriting.md) |17| Social Proof & Trust | [social-proof-trust.md](references/social-proof-trust.md) |18| Pricing Pages | [references/pricing-pages.md](references/pricing-pages.md) |19| Forms & CTAs | [forms-ctas.md](references/forms-ctas.md) |20| Testing & Benchmarks | [testing-benchmarks.md](references/testing-benchmarks.md) |21| Mobile Conversion | [mobile-conversion.md](references/mobile-conversion.md) |22| Ethical Boundaries | [ethical-boundaries.md](references/ethical-boundaries.md) |23| Modern Patterns | [modern-patterns.md](references/modern-patterns.md) |24| Navigation patterns | [navigation-patterns.md](references/navigation-patterns.md) |25| Forms & feedback | [forms-feedback.md](references/forms-feedback.md) |2627---2829## Conversion-First Philosophy3031### The Hierarchy3233```341. CLARITY → Can users understand what you offer in 5 seconds?352. RELEVANCE → Does it match what brought them here?363. VALUE → Is the benefit clear and compelling?374. FRICTION → What's stopping them from acting?385. URGENCY → Why should they act now?39```4041### When Aesthetics vs Conversion Conflict4243| Situation | Decision |44| ----------------------------------------- | ------------------------------- |45| Beautiful animation delays CTA visibility | Reduce/remove animation |46| Minimal design hides trust signals | Add trust signals strategically |47| Creative layout confuses scanning | Use proven patterns |48| Bold design choice feels risky | A/B test it |49| "Cleaner" means fewer conversion elements | Test removal vs keeping |5051**Default rule:** When in doubt, optimize for clarity over creativity.5253---5455## The Conversion Funnel (AIDA+RR)5657```58┌─────────────────────────────────────────────────────────────┐59│ AWARENESS │ First impression, hero, headline │60│ │ Goal: Stop the scroll, communicate value │61├─────────────────────────────────────────────────────────────┤62│ INTEREST │ Features, benefits, how it works │63│ │ Goal: Build curiosity, answer "what?" │64├─────────────────────────────────────────────────────────────┤65│ DESIRE │ Social proof, case studies, emotional appeal │66│ │ Goal: Create want, answer "why me?" │67├─────────────────────────────────────────────────────────────┤68│ ACTION │ CTA, pricing, signup form │69│ │ Goal: Remove friction, make it easy │70├─────────────────────────────────────────────────────────────┤71│ RETENTION │ Onboarding, engagement, value delivery │72│ │ Goal: Create habit, deliver promised value │73├─────────────────────────────────────────────────────────────┤74│ REFERRAL │ Share mechanics, referral program │75│ │ Goal: Turn users into advocates │76└─────────────────────────────────────────────────────────────┘77```7879See [funnel-strategy.md](references/funnel-strategy.md) for stage-specific patterns.8081---8283## Buyer Persona Quick Reference8485### By Decision Style8687| Type | Characteristics | Design Approach |88| -------------- | ------------------------------------------- | ------------------------------------------------ |89| **Analytical** | Needs data, compares options, slow decision | Feature tables, specs, case studies with metrics |90| **Emotional** | Decides by feeling, influenced by stories | Testimonials, imagery, transformation narrative |91| **Impulsive** | Quick decisions, responds to urgency | Strong CTAs, limited-time offers, social proof |92| **Methodical** | Process-driven, needs all information | FAQs, detailed documentation, guided tours |9394### By Context9596| Context | Buyer Behavior | Strategy |97| --------------- | -------------------------------------- | --------------------------------------------------- |98| **B2B** | Multiple stakeholders, longer cycle | ROI focus, case studies, demos, security signals |99| **B2C** | Individual decision, emotional factors | Benefits over features, lifestyle imagery, reviews |100| **High-ticket** | Considered purchase, risk averse | Trust signals, guarantees, human touch (calls/chat) |101| **Low-ticket** | Impulse-friendly, price sensitive | Urgency, social proof, frictionless checkout |102| **Enterprise** | Committee decision, compliance needs | Custom solutions, SLAs, dedicated support |103| **SMB** | Speed matters, budget conscious | Quick value, clear pricing, self-serve |104105---106107## Key Benchmarks (2024-2026)108109| Metric | Poor | Average | Good | Excellent |110| ------------------------ | ------ | ------- | ------ | --------- |111| Landing page conversion | < 2% | 2-5% | 6-10% | 15%+ |112| Email capture rate | < 1% | 1-2% | 2-5% | 5%+ |113| Cart abandonment | > 80% | 70-80% | 60-70% | < 60% |114| Free trial → Paid (SaaS) | < 5% | 5-10% | 10-20% | 25%+ |115| Mobile vs Desktop gap | > 2.5x | 2-2.5x | 1.5-2x | < 1.5x |116117---118119## Integration with Other Elite Skills120121Every design decision affects conversion. Here's how the other skills impact business outcomes:122123### elite-gsap (Animations)124125| Pattern | Conversion Impact |126| --------------------- | ----------------------------------------------------- |127| ScrollTrigger reveals | Progressive disclosure keeps attention → lower bounce |128| SplitText headlines | Attention capture → increased engagement |129| Flip filtering | Smooth product browsing → higher AOV |130| Loading animations | Perceived performance → lower abandonment |131132**Warning:** Over-animation delays CTAs and frustrates users. Use purposefully.133134### elite-layouts (Structure)135136| Pattern | Conversion Impact |137| ----------------- | --------------------------------------------- |138| Bento grids | Scannable features → faster comprehension |139| Horizontal scroll | Immersive storytelling → emotional connection |140| Sticky sections | Persistent CTAs → higher click-through |141| Container queries | Consistent experience → mobile conversion |142143### elite-performance (Speed)144145**Every second counts:**146147- 1s delay = 7% conversion loss148- 3s load time = 53% mobile bounce149- LCP > 2.5s = significant ranking penalty150151Speed IS a conversion factor.152153### elite-accessibility154155| Practice | Conversion Impact |156| ------------------ | ------------------------------ |157| WCAG compliance | Larger addressable audience |158| Clear focus states | Keyboard users can convert |159| Accessible forms | Fewer errors, more completions |160| Trust signal | Signals professionalism |161162---163164## Quick Decision Framework165166### Should I add this element?167168```1691. Does it reduce friction? → Add it1702. Does it build trust? → Add it (strategically placed)1713. Does it distract from the CTA? → Remove or de-emphasize1724. Does it answer an objection? → Add it near the decision point1735. Does it look good but serve no purpose? → Remove it174```175176### Should I test this change?177178```179HIGH IMPACT (test first):180- Headlines and value props181- CTA copy and placement182- Pricing presentation183- Form fields (removing any)184- Social proof placement185186LOW IMPACT (implement without test):187- Minor copy tweaks188- Color variations (usually)189- Icon changes190- Spacing adjustments191```192193---194195## Common Conversion Killers196197### Above the Fold198199- [ ] Unclear value proposition200- [ ] No visible CTA201- [ ] Slow loading hero image/video202- [ ] Generic stock photography203- [ ] Jargon-heavy headline204205### Throughout the Page206207- [ ] Missing social proof208- [ ] No trust signals (especially near payment)209- [ ] Too many choices (paradox of choice)210- [ ] Friction in forms (unnecessary fields)211- [ ] No urgency or reason to act now212- [ ] Mobile experience significantly worse213214### Psychological215216- [ ] Not addressing objections217- [ ] Benefits buried under features218- [ ] No risk reversal (guarantees, free trials)219- [ ] Asking for too much too soon220- [ ] Ignoring user's awareness level221222---223224## Project Type Quick-Starts225226### SaaS Landing Page227228```229Priority order:2301. Clear value prop in headline2312. Social proof (logos, testimonials)2323. Feature/benefit section2334. Pricing with recommended tier2345. FAQ addressing objections2356. Final CTA with guarantee236```237238### E-commerce Product Page239240```241Priority order:2421. High-quality product images2432. Clear price and availability2443. Reviews and ratings2454. Add to cart (prominent, sticky on mobile)2465. Trust signals (shipping, returns, security)2476. Cross-sells/upsells (post add-to-cart)2487. Scarcity badges for real inventory status249→ See mobile-conversion.md: Sticky Add-to-Cart250→ See social-proof-trust.md: Scarcity Badges251```252253### Lead Generation254255```256Priority order:2571. Compelling offer (what they get)2582. Minimal form (name + email minimum)2593. Social proof (number of subscribers, testimonials)2604. Clear privacy assurance2615. Expectation setting (what happens next)262263Advanced: Quiz-based lead gen (40-60% completion rates)264→ See forms-ctas.md: Quiz-Based Lead Generation265```266267### Service Business (Legal, Medical, Trades)268269```270Priority order:2711. Trust signals (credentials, trust strips)2722. Clear service descriptions2733. Mobile bottom bar CTA (call + book)2744. Social proof (testimonials, reviews)2755. FAQ addressing common concerns276→ See mobile-conversion.md: Mobile Bottom Bar CTA277→ See social-proof-trust.md: Trust Strips and Credential Logos278```279280### Enterprise/B2B281282```283Priority order:2841. Credibility (client logos, case studies)2852. Clear problem/solution framing2863. Demo/consultation CTA (not "Buy Now")2874. Security and compliance signals2885. Multiple contact options2896. Detailed documentation accessible290```291292---293294## The 80/20 of Conversion295296Focus here first for maximum impact:2972981. **Headline clarity** - 5-second test: does a stranger understand your value?2992. **CTA visibility** - Is it obvious what to do next?3003. **Social proof placement** - Near decision points, not just at bottom3014. **Mobile experience** - Where most traffic comes from3025. **Page speed** - Sub-3-second loads3036. **Trust signals** - Especially near payment/signup304305---306307## Resources308309- [psychology-foundations.md](references/psychology-foundations.md) - The science behind decisions310- [funnel-strategy.md](references/funnel-strategy.md) - Stage-by-stage optimization311- [copywriting.md](references/copywriting.md) - Words that convert312- [testing-benchmarks.md](references/testing-benchmarks.md) - What to test and what's "good"313- [ethical-boundaries.md](references/ethical-boundaries.md) - Persuasion vs manipulation