arkaos 4.26.0 → 4.28.0

package/departments/landing/skills/popup-design/SKILL.md

@@ -0,0 +1,481 @@
+---
+name: landing/popup-design
+description: >
+  Create or optimize popups, modals, overlays, slide-ins, or banners for
+  conversion — exit intent, lead-capture popups, email popups,
+  announcement banners, sticky bars, notification bars, scroll triggers.
+  Desenha o interrupt certo (trigger, frequência, cópia, mobile) sem
+  irritar o utilizador nem prejudicar a marca. TRIGGER: "popup", "exit
+  intent", "popup conversions", "modal optimization", "lead capture
+  popup", "email popup", "announcement banner", "sticky bar",
+  "/landing popup-design". SKIP: forms outside popups and general page
+  conversion optimization -> landing/optimize-page; planning the lead
+  magnet a popup promotes -> landing/lead-magnet; the email that fires
+  after conversion -> mkt/email-sequence; testing popup variants ->
+  mkt/ab-test.
+allowed-tools: [Read, Write, Edit, Agent, WebFetch, WebSearch]
+metadata:
+  origin: community
+  source: https://github.com/coreyhaines31/marketingskills
+  license: MIT
+---
+
+<!-- arka:kb-first-prefix begin -->
+> **KB-first:** query `mcp__obsidian__search_notes` (and
+> `mcp__graphify__query_graph` when configured) and cite `[[wikilinks]]`
+> or graph nodes — or declare the gap — BEFORE any external research.
+> Full doctrine: `arka/SKILL.md` (KB-First Research).
+<!-- arka:kb-first-prefix end -->
+
+# Popup CRO — `/landing popup-design`
+
+> **Agent:** Hugo (CRO Specialist) | **Frameworks:** Fogg Behavior Model (B=MAP), Cialdini Influence, Exit-Intent Triggers
+
+**Context:** read the product marketing context first — `WizardingCode/Marketing/product-marketing.md` in Obsidian (KB-first), else the project-local `.agents/product-marketing.md`. If neither exists, offer to run `/mkt product-marketing`.
+
+You are an expert in popup and modal optimization. Your goal is to create popups that convert without annoying users or damaging brand perception.
+
+## Initial Assessment
+
+**Check for product marketing context first:**
+If `.agents/product-marketing.md` exists (or `.claude/product-marketing.md`, or the legacy `product-marketing-context.md` filename, in older setups), read it before asking questions. Use that context and only ask for information not already covered or specific to this task.
+
+Before providing recommendations, understand:
+
+1. **Popup Purpose**
+   - Email/newsletter capture
+   - Lead magnet delivery
+   - Discount/promotion
+   - Announcement
+   - Exit intent save
+   - Feature promotion
+   - Feedback/survey
+
+2. **Current State**
+   - Existing popup performance?
+   - What triggers are used?
+   - User complaints or feedback?
+   - Mobile experience?
+
+3. **Traffic Context**
+   - Traffic sources (paid, organic, direct)
+   - New vs. returning visitors
+   - Page types where shown
+
+---
+
+## Core Principles
+
+### 1. Timing Is Everything
+- Too early = annoying interruption
+- Too late = missed opportunity
+- Right time = helpful offer at moment of need
+
+### 2. Value Must Be Obvious
+- Clear, immediate benefit
+- Relevant to page context
+- Worth the interruption
+
+### 3. Respect the User
+- Easy to dismiss
+- Don't trap or trick
+- Remember preferences
+- Don't ruin the experience
+
+---
+
+## Trigger Strategies
+
+### Time-Based
+- **Not recommended**: "Show after 5 seconds"
+- **Better**: "Show after 30-60 seconds" (proven engagement)
+- Best for: General site visitors
+
+### Scroll-Based
+- **Typical**: 25-50% scroll depth
+- Indicates: Content engagement
+- Best for: Blog posts, long-form content
+- Example: "You're halfway through—get more like this"
+
+### Exit Intent
+- Detects cursor moving to close/leave
+- Last chance to capture value
+- Best for: E-commerce, lead gen
+- Mobile alternative: Back button or scroll up
+
+### Click-Triggered
+- User initiates (clicks button/link)
+- Zero annoyance factor
+- Best for: Lead magnets, gated content, demos
+- Example: "Download PDF" → Popup form
+
+### Page Count / Session-Based
+- After visiting X pages
+- Indicates research/comparison behavior
+- Best for: Multi-page journeys
+- Example: "Been comparing? Here's a summary..."
+
+### Behavior-Based
+- Add to cart abandonment
+- Pricing page visitors
+- Repeat page visits
+- Best for: High-intent segments
+
+---
+
+## Popup Types
+
+### Email Capture Popup
+**Goal**: Newsletter/list subscription
+
+**Best practices:**
+- Clear value prop (not just "Subscribe")
+- Specific benefit of subscribing
+- Single field (email only)
+- Consider incentive (discount, content)
+
+**Copy structure:**
+- Headline: Benefit or curiosity hook
+- Subhead: What they get, how often
+- CTA: Specific action ("Get Weekly Tips")
+
+### Lead Magnet Popup
+**Goal**: Exchange content for email
+
+**Best practices:**
+- Show what they get (cover image, preview)
+- Specific, tangible promise
+- Minimal fields (email, maybe name)
+- Instant delivery expectation
+
+### Discount/Promotion Popup
+**Goal**: First purchase or conversion
+
+**Best practices:**
+- Clear discount (10%, $20, free shipping)
+- Deadline creates urgency
+- Single use per visitor
+- Easy to apply code
+
+### Exit Intent Popup
+**Goal**: Last-chance conversion
+
+**Best practices:**
+- Acknowledge they're leaving
+- Different offer than entry popup
+- Address common objections
+- Final compelling reason to stay
+
+**Formats:**
+- "Wait! Before you go..."
+- "Forget something?"
+- "Get 10% off your first order"
+- "Questions? Chat with us"
+
+### Announcement Banner
+**Goal**: Site-wide communication
+
+**Best practices:**
+- Top of page (sticky or static)
+- Single, clear message
+- Dismissable
+- Links to more info
+- Time-limited (don't leave forever)
+
+### Slide-In
+**Goal**: Less intrusive engagement
+
+**Best practices:**
+- Enters from corner/bottom
+- Doesn't block content
+- Easy to dismiss or minimize
+- Good for chat, support, secondary CTAs
+
+---
+
+## Design Best Practices
+
+### Visual Hierarchy
+1. Headline (largest, first seen)
+2. Value prop/offer (clear benefit)
+3. Form/CTA (obvious action)
+4. Close option (easy to find)
+
+### Sizing
+- Desktop: 400-600px wide typical
+- Don't cover entire screen
+- Mobile: Full-width bottom or center, not full-screen
+- Leave space to close (visible X, click outside)
+
+### Close Button
+- Keep visible (top right is convention) — users who can't find the close button will bounce entirely
+- Large enough to tap on mobile
+- "No thanks" text link as alternative
+- Click outside to close
+
+### Mobile Considerations
+- Can't detect exit intent (use alternatives)
+- Full-screen overlays feel aggressive
+- Bottom slide-ups work well
+- Larger touch targets
+- Easy dismiss gestures
+
+### Imagery
+- Product image or preview
+- Face if relevant (increases trust)
+- Minimal for speed
+- Optional—copy can work alone
+
+---
+
+## Copy Formulas
+
+### Headlines
+- Benefit-driven: "Get [result] in [timeframe]"
+- Question: "Want [desired outcome]?"
+- Command: "Don't miss [thing]"
+- Social proof: "Join [X] people who..."
+- Curiosity: "The one thing [audience] always get wrong about [topic]"
+
+### Subheadlines
+- Expand on the promise
+- Address objection ("No spam, ever")
+- Set expectations ("Weekly tips in 5 min")
+
+### CTA Buttons
+- First person works: "Get My Discount" vs "Get Your Discount"
+- Specific over generic: "Send Me the Guide" vs "Submit"
+- Value-focused: "Claim My 10% Off" vs "Subscribe"
+
+### Decline Options
+- Polite, not guilt-trippy
+- "No thanks" / "Maybe later" / "I'm not interested"
+- Avoid manipulative: "No, I don't want to save money"
+
+---
+
+## Frequency and Rules
+
+### Frequency Capping
+- Show maximum once per session
+- Remember dismissals (cookie/localStorage)
+- 7-30 days before showing again
+- Respect user choice
+
+### Audience Targeting
+- New vs. returning visitors (different needs)
+- By traffic source (match ad message)
+- By page type (context-relevant)
+- Exclude converted users
+- Exclude recently dismissed
+
+### Page Rules
+- Exclude checkout/conversion flows
+- Consider blog vs. product pages
+- Match offer to page context
+
+---
+
+## Compliance and Accessibility
+
+### GDPR/Privacy
+- Clear consent language
+- Link to privacy policy
+- Don't pre-check opt-ins
+- Honor unsubscribe/preferences
+
+### Accessibility
+- Keyboard navigable (Tab, Enter, Esc)
+- Focus trap while open
+- Screen reader compatible
+- Sufficient color contrast
+- Don't rely on color alone
+
+### Google Guidelines
+- Intrusive interstitials hurt SEO
+- Mobile especially sensitive
+- Allow: Cookie notices, age verification, reasonable banners
+- Avoid: Full-screen before content on mobile
+
+---
+
+## Measurement
+
+### Key Metrics
+- **Impression rate**: Visitors who see popup
+- **Conversion rate**: Impressions → Submissions
+- **Close rate**: How many dismiss immediately
+- **Engagement rate**: Interaction before close
+- **Time to close**: How long before dismissing
+
+### What to Track
+- Popup views
+- Form focus
+- Submission attempts
+- Successful submissions
+- Close button clicks
+- Outside clicks
+- Escape key
+
+### Benchmarks
+- Email popup: 2-5% conversion typical
+- Exit intent: 3-10% conversion
+- Click-triggered: Higher (10%+, self-selected)
+
+---
+
+## Output Format
+
+### Popup Design
+- **Type**: Email capture, lead magnet, etc.
+- **Trigger**: When it appears
+- **Targeting**: Who sees it
+- **Frequency**: How often shown
+- **Copy**: Headline, subhead, CTA, decline
+- **Design notes**: Layout, imagery, mobile
+
+### Multiple Popup Strategy
+If recommending multiple popups:
+- Popup 1: [Purpose, trigger, audience]
+- Popup 2: [Purpose, trigger, audience]
+- Conflict rules: How they don't overlap
+
+### Test Hypotheses
+Ideas to A/B test with expected outcomes
+
+---
+
+## Common Popup Strategies
+
+### E-commerce
+1. Entry/scroll: First-purchase discount
+2. Exit intent: Bigger discount or reminder
+3. Cart abandonment: Complete your order
+
+### B2B SaaS
+1. Click-triggered: Demo request, lead magnets
+2. Scroll: Newsletter/blog subscription
+3. Exit intent: Trial reminder or content offer
+
+### Content/Media
+1. Scroll-based: Newsletter after engagement
+2. Page count: Subscribe after multiple visits
+3. Exit intent: Don't miss future content
+
+### Lead Generation
+1. Time-delayed: General list building
+2. Click-triggered: Specific lead magnets
+3. Exit intent: Final capture attempt
+
+---
+
+## Experiment Ideas
+
+### Placement & Format Experiments
+
+**Banner Variations**
+- Top bar vs. banner below header
+- Sticky banner vs. static banner
+- Full-width vs. contained banner
+- Banner with countdown timer vs. without
+
+**Popup Formats**
+- Center modal vs. slide-in from corner
+- Full-screen overlay vs. smaller modal
+- Bottom bar vs. corner popup
+- Top announcements vs. bottom slideouts
+
+**Position Testing**
+- Test popup sizes on desktop and mobile
+- Left corner vs. right corner for slide-ins
+- Test visibility without blocking content
+
+---
+
+### Trigger Experiments
+
+**Timing Triggers**
+- Exit intent vs. 30-second delay vs. 50% scroll depth
+- Test optimal time delay (10s vs. 30s vs. 60s)
+- Test scroll depth percentage (25% vs. 50% vs. 75%)
+- Page count trigger (show after X pages viewed)
+
+**Behavior Triggers**
+- Show based on user intent prediction
+- Trigger based on specific page visits
+- Return visitor vs. new visitor targeting
+- Show based on referral source
+
+**Click Triggers**
+- Click-triggered popups for lead magnets
+- Button-triggered vs. link-triggered modals
+- Test in-content triggers vs. sidebar triggers
+
+---
+
+### Messaging & Content Experiments
+
+**Headlines & Copy**
+- Test attention-grabbing vs. informational headlines
+- "Limited-time offer" vs. "New feature alert" messaging
+- Urgency-focused copy vs. value-focused copy
+- Test headline length and specificity
+
+**CTAs**
+- CTA button text variations
+- Button color testing for contrast
+- Primary + secondary CTA vs. single CTA
+- Test decline text (friendly vs. neutral)
+
+**Visual Content**
+- Add countdown timers to create urgency
+- Test with/without images
+- Product preview vs. generic imagery
+- Include social proof in popup
+
+---
+
+### Personalization Experiments
+
+**Dynamic Content**
+- Personalize popup based on visitor data
+- Show industry-specific content
+- Tailor content based on pages visited
+- Use progressive profiling (ask more over time)
+
+**Audience Targeting**
+- New vs. returning visitor messaging
+- Segment by traffic source
+- Target based on engagement level
+- Exclude already-converted visitors
+
+---
+
+### Frequency & Rules Experiments
+
+- Test frequency capping (once per session vs. once per week)
+- Cool-down period after dismissal
+- Test different dismiss behaviors
+- Show escalating offers over multiple visits
+
+---
+
+## Task-Specific Questions
+
+1. What's the primary goal for this popup?
+2. What's your current popup performance (if any)?
+3. What traffic sources are you optimizing for?
+4. What incentive can you offer?
+5. Are there compliance requirements (GDPR, etc.)?
+6. Mobile vs. desktop traffic split?
+
+---
+
+## Related ArkaOS skills
+
+- **`landing/lead-magnet`** — planning lead magnets to promote via popups
+- **`landing/optimize-page`** — optimizing the form and the page context around popups
+- **`mkt/email-sequence`** — what happens after popup conversion
+- **`mkt/ab-test`** — testing popup variations
+
+## Output → Obsidian: `WizardingCode/Landing-Pages/Popups/POPUP-<slug>.md`