67f3922e4f
Phase 1 — Agent & Command Foundation: - Rewrite cs-project-manager agent (55→515 lines, 4 workflows, 6 skill integrations) - Expand cs-product-manager agent (408→684 lines, orchestrates all 8 product skills) - Add 7 slash commands: /rice, /okr, /persona, /user-story, /sprint-health, /project-health, /retro Phase 2 — Script Gap Closure (2,779 lines): - jira-expert: jql_query_builder.py (22 patterns), workflow_validator.py - confluence-expert: space_structure_generator.py, content_audit_analyzer.py - atlassian-admin: permission_audit_tool.py - atlassian-templates: template_scaffolder.py (Confluence XHTML generation) Phase 3 — Reference & Asset Enrichment: - 9 product references (competitive-teardown, landing-page-generator, saas-scaffolder) - 6 PM references (confluence-expert, atlassian-admin, atlassian-templates) - 7 product assets (templates for PRD, RICE, sprint, stories, OKR, research, design system) - 1 PM asset (permission_scheme_template.json) Phase 4 — New Agents: - cs-agile-product-owner, cs-product-strategist, cs-ux-researcher Phase 5 — Integration & Polish: - Related Skills cross-references in 8 SKILL.md files - Updated product-team/CLAUDE.md (5→8 skills, 6→9 tools, 4 agents, 5 commands) - Updated project-management/CLAUDE.md (0→12 scripts, 3 commands) - Regenerated docs site (177 pages), updated homepage and getting-started Quality audit: 31 files reviewed, 29 PASS, 2 fixed (copy-frameworks.md, governance-framework.md) Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>
177 lines
6.0 KiB
Markdown
177 lines
6.0 KiB
Markdown
# High-Converting Landing Page Patterns
|
|
|
|
## Overview
|
|
|
|
This reference catalogs proven landing page design patterns that drive higher conversion rates. Each pattern includes placement guidance, implementation notes, and A/B testing priorities.
|
|
|
|
## Hero Section Layouts
|
|
|
|
### Pattern 1: Left Copy + Right Product Screenshot
|
|
- **Best for:** SaaS products with a strong visual UI
|
|
- **Structure:** Headline, subheadline, CTA on left (60%); product screenshot on right (40%)
|
|
- **Why it works:** F-pattern reading leads with copy, product image provides proof
|
|
- **Conversion lift:** Baseline pattern, strong performer across industries
|
|
|
|
### Pattern 2: Centered Copy + Full-Width Background
|
|
- **Best for:** Brand-driven products, consumer apps
|
|
- **Structure:** Centered headline, subheadline, CTA over background image/gradient
|
|
- **Why it works:** Focuses attention on single message, high visual impact
|
|
- **Note:** Ensure text contrast against background for readability
|
|
|
|
### Pattern 3: Video Hero
|
|
- **Best for:** Complex products requiring demonstration
|
|
- **Structure:** Short headline + embedded video (60-90 seconds) + CTA below
|
|
- **Why it works:** Video explains what text cannot, increases time on page
|
|
- **Note:** Always include thumbnail; autoplay is often counterproductive
|
|
|
|
### Pattern 4: Interactive Demo
|
|
- **Best for:** Developer tools, data products, design tools
|
|
- **Structure:** Minimal copy + embedded interactive product experience
|
|
- **Why it works:** Hands-on experience converts better than description
|
|
- **Note:** Keep demo focused on one "aha moment" workflow
|
|
|
|
## Social Proof Placement
|
|
|
|
### Logo Bar
|
|
- **Position:** Immediately below hero section
|
|
- **Count:** 5-7 logos for credibility without clutter
|
|
- **Label:** "Trusted by" or "Used by teams at"
|
|
- **Selection:** Mix recognizable brands with relevant industry logos
|
|
|
|
### Testimonial Cards
|
|
- **Position:** After feature explanation sections
|
|
- **Format:** Photo + name + title + company + specific quote
|
|
- **Best quotes:** Include measurable outcomes ("Saved 10 hours/week")
|
|
- **Layout:** 2-3 testimonials in a row, carousel for more
|
|
|
|
### Case Study Callouts
|
|
- **Position:** Mid-page, before pricing
|
|
- **Format:** Company logo + headline metric + "Read the story" link
|
|
- **Example:** "Acme Corp reduced onboarding time by 60%"
|
|
|
|
### Social Proof Numbers
|
|
- **Position:** Near CTA or in dedicated trust section
|
|
- **Format:** Large number + descriptor (e.g., "50,000+ teams", "4.8/5 rating")
|
|
- **Selection:** Choose 3-4 most impressive metrics
|
|
|
|
## Pricing Table Designs
|
|
|
|
### Good/Better/Best (3-Tier)
|
|
- Most effective for SaaS with clear feature tiers
|
|
- Highlight recommended plan with visual emphasis
|
|
- Show annual discount prominently
|
|
- Include feature comparison matrix below
|
|
|
|
### Simple Two-Tier
|
|
- Free/Pro or Starter/Professional
|
|
- Best for PLG products with clear upgrade trigger
|
|
- Minimize decision fatigue
|
|
|
|
### Enterprise Custom
|
|
- Replace price with "Contact Sales" for high-ACV products
|
|
- List enterprise-specific features (SSO, SLA, dedicated support)
|
|
- Include a "Talk to Sales" CTA, not just a form
|
|
|
|
### Pricing Psychology
|
|
- Anchor with highest-priced plan first (or in the middle with visual highlight)
|
|
- Use monthly price with annual billing toggle
|
|
- Show savings percentage for annual plans
|
|
- Round prices ending in 9 (e.g., $49/mo, $99/mo)
|
|
|
|
## Trust Signals
|
|
|
|
### Security Badges
|
|
- SOC 2, ISO 27001, GDPR compliance badges
|
|
- SSL certificate indicator
|
|
- Place near forms and payment sections
|
|
|
|
### Guarantees
|
|
- Money-back guarantee with specific timeframe
|
|
- Free trial with no credit card requirement
|
|
- SLA uptime commitments
|
|
|
|
### Awards & Recognition
|
|
- Industry awards (best of, top rated)
|
|
- Analyst recognition (Gartner, Forrester, G2 Leader)
|
|
- Media mentions (as seen in logos)
|
|
|
|
### Real-Time Activity
|
|
- "X people signed up today" (use real data only)
|
|
- Recent activity feed
|
|
- Live user count
|
|
|
|
## Urgency Elements
|
|
|
|
### Ethical Urgency
|
|
- Limited-time pricing (with real deadline)
|
|
- Early adopter benefits (extra features, lower price)
|
|
- Cohort-based enrollment (actual capacity limits)
|
|
|
|
### Avoid
|
|
- Fake countdown timers that reset
|
|
- False scarcity ("only 3 left" when unlimited)
|
|
- Pressure tactics that erode trust
|
|
|
|
## Form Optimization
|
|
|
|
### Field Reduction
|
|
- Every additional field reduces conversion ~10%
|
|
- Start with email only, progressive profiling later
|
|
- Use single-column layouts for forms
|
|
|
|
### Smart Defaults
|
|
- Pre-fill country based on IP
|
|
- Auto-detect company from email domain
|
|
- Default to most popular plan
|
|
|
|
### Inline Validation
|
|
- Validate fields on blur, not on submit
|
|
- Show success states (green checkmark)
|
|
- Provide helpful error messages
|
|
|
|
### Multi-Step Forms
|
|
- Break long forms into 2-3 steps with progress indicator
|
|
- Put easiest questions first to build commitment
|
|
- Allow saving progress for complex forms
|
|
|
|
## Mobile-First Patterns
|
|
|
|
### Thumb-Friendly Design
|
|
- CTAs in thumb zone (bottom 40% of screen)
|
|
- Minimum tap target: 44x44px
|
|
- Adequate spacing between interactive elements
|
|
|
|
### Content Priority
|
|
- Lead with most compelling content (no scrolling to find CTA)
|
|
- Collapse secondary information into accordions
|
|
- Use sticky CTA bar on scroll
|
|
|
|
### Performance
|
|
- Target <3s load time on 3G
|
|
- Lazy-load images below fold
|
|
- Minimize JavaScript execution
|
|
|
|
## A/B Testing Priority Matrix
|
|
|
|
Test these elements in order of expected impact:
|
|
|
|
| Priority | Element | Expected Impact | Effort |
|
|
|----------|---------|----------------|--------|
|
|
| 1 | Headline | High | Low |
|
|
| 2 | CTA text and color | High | Low |
|
|
| 3 | Hero image/video | High | Medium |
|
|
| 4 | Social proof placement | Medium | Low |
|
|
| 5 | Form fields (fewer) | Medium | Low |
|
|
| 6 | Pricing presentation | Medium | Medium |
|
|
| 7 | Page length | Medium | High |
|
|
| 8 | Testimonial selection | Low | Low |
|
|
| 9 | Color scheme | Low | Medium |
|
|
| 10 | Font choices | Low | Low |
|
|
|
|
### Testing Best Practices
|
|
- Test one variable at a time for clear attribution
|
|
- Run tests for minimum 2 weeks or 1,000 visitors per variant
|
|
- Use 95% statistical significance threshold
|
|
- Document all test results for institutional knowledge
|
|
- Winner becomes new control for next test iteration
|