coastdigitalgroup/coastai-skills

Hero Section Optimization

Purpose

The Hero Section Optimization skill provides a systematic framework for improving the most critical part of a webpage: the "above-the-fold" content. It focuses on aligning messaging with user intent, reducing cognitive friction, and ensuring a clear path to action. By optimizing the headline, subheadline, visual assets, and Call-to-Action (CTA), this skill directly improves measurable outcomes like conversion rates and session duration.

Use Cases

• Optimizing a landing page for a paid ad campaign (PPC).
• Improving a homepage that has a high bounce rate.
• Launching a new product or service where clarity is paramount.
• Refining a SaaS landing page to improve trial sign-ups.

When NOT to Use

• Deep Funnel Pages: Do not use for checkout pages, documentation, or account settings where the "hero" pattern doesn't apply.
• Purely Informational/Long-form Content: If the primary goal is reading an article (e.g., a blog post), a standard hero section might be distracting.
• Brand Awareness Only: If there is no specific action for the user to take (rare for growth-oriented sites), a conversion-focused hero might be misplaced.

Inputs

1. Target Audience: Who is this page for? (e.g., "Small business owners looking for easy accounting software").
2. Primary Goal/CTA: What is the ONE thing we want the user to do? (e.g., "Sign up for a free trial").
3. Current Hero Data (if available): Bounce rate, CTA click-through rate (CTR), heatmaps.
4. Core Value Proposition: What is the primary benefit of the product/service?
5. Current Assets: Existing headlines, images, and copy.

Outputs

1. Hero Audit Report: Identification of current friction points and missed opportunities.
2. Optimized Hero Copy: New Headline (H1), Subheadline, and CTA text.
3. Visual Recommendations: Guidance on image/video selection that supports the messaging.
4. Layout Wireframe/Guidance: Structural changes to improve the hierarchy of information.

Workflow

1. Audit the Current Hero

Perform a "5-Second Test." Is it clear:

• What the service/product is?
• Who it is for?
• What the user should do next?
• What the primary benefit is?

2. Define the Value Proposition

Distill the core offering into a "What's in it for me?" (WIIFM) statement for the user. Use the formula: Target Audience + Problem + Solution + Unique Benefit.

3. Draft the Optimized Copy

• Headline (H1): Must be clear over clever. State the primary benefit or the result of using the product.
• Subheadline: Provide context, address a pain point, or handle a common objection.
• CTA: Use action-oriented, benefit-driven language (e.g., "Start My Free Trial" instead of "Submit").

4. Optimize Visual Hierarchy

• Ensure the CTA is the most visually prominent element.
• Use images that show the product in action or the result of using it (social proof or aspirational).
• Ensure high contrast between text and background.

5. Review Against Decision Rules

Verify that the new design follows the growth heuristics defined below.

Decision Rules

• One Goal: Every hero section must have exactly ONE primary CTA. Secondary CTAs (like "Learn More") should be visually less prominent.
• Clarity > Creativity: If a headline is "clever" but doesn't explain what the product does in 5 seconds, discard it.
• Above the Fold: The Headline, Subheadline, and Primary CTA must be visible on standard mobile and desktop viewports without scrolling.
• Social Proof: If space permits, include a small "trust signal" (e.g., "Joined by 10k+ users" or a 5-star rating) near the CTA.

Constraints

• Truthful Claims: The value proposition must accurately reflect what the product or service delivers — overpromising increases bounce after the initial impression fades.
• Brand Consistency: Visual style, tone, and messaging must remain consistent with the broader brand identity.
• Above-the-Fold Priority: The primary CTA must be visible without scrolling on the most common viewport sizes.

Non-Goals

• Rewriting the overarching brand messaging strategy or product positioning.
• Commissioning or creating new visual assets such as photography, illustration, or video.
• Improving the product itself to deliver on the promises made in the hero.

Common Failure Patterns

• The "Vague Headline": Headlines like "Welcome to the Future" or "We Do It Better" that don't explain the product.
• CTA Burial: Placing the CTA below the fold or making it blend in with the background.
• Image Disconnect: Using generic stock photos that don't relate to the value proposition.
• Information Overload: Trying to explain every feature in the hero section instead of focusing on the primary benefit.

Validation Criteria

• The 5-Second Test: Show the new hero to someone for 5 seconds and ask them what the site is about and what they should do.
• A/B Testing: Compare the optimized version against the original to measure changes in CTR and Bounce Rate.
• Scroll Mapping: Use tools like Hotjar to ensure users are seeing the CTA before they bounce.
• Clarity Score: Rate the hero on a scale of 1-10 based on how quickly the value prop is understood.