🎯 Product Funnel Wizard — Visual UX Flow
The Simplest Possible UX
┌────────────────────────────────────────────────────────────────┐
│ STEP 1: Product Detail Page │
│ │
│ ValkyrAI Masterclass $299 │
│ Complete course on AI workflows │
│ │
│ [Buy Now] [✨ Generate Funnel with AI] ← MAGIC BUTTON! │
│ │
└────────────────────────────────────────────────────────────────┘
│
│ (User clicks)
▼
┌────────────────────────────────────────────────────────────────┐
│ STEP 2: Simple Modal Form (5 fields, 30 seconds) │
│ │
│ Generate Funnel for: ValkyrAI Masterclass │
│ │
│ Brand Name: [Valkyr Labs ] │
│ Target Audience: [developers, founders ] │
│ Price Tier: [Core ($299-$999) ▼] │
│ Delivery Mode: [Course ▼] │
│ Hero Benefit: [Master AI workflows in 14 days] │
│ │
│ [Cancel] [✨ Generate Funnel] │
│ │
└────────────────────────────────────────────────────────────────┘
│
│ (Backend starts workflow)
▼
┌────────────────────────────────────────────────────────────────┐
│ STEP 3: Progress Indicator (30-60 seconds) │
│ │
│ Generating Your Funnel... ✨ │
│ │
│ ████████████████████░░░░░░░░░░░░ 65% │
│ │
│ Current Step: Generating ad variants... │
│ │
│ What's being created: │
│ ✅ Complete PRD with problem/promise │
│ ✅ Landing page sections (hero, features, CTA) │
│ ⏳ Ad variants (TikTok, Instagram, LinkedIn) │
│ ⏳ Email sequence (3-5 emails) │
│ │
└────────────────────────────────────────────────────────────────┘
│
│ (Generation completes)
▼
┌────────────────────────────────────────────────────────────────┐
│ STEP 4: Review Screen │
│ │
│ ✅ Funnel Generated Successfully! │
│ │
│ Generated Assets: │
│ ✅ Complete PRD │
│ ✅ Landing Page (6 sections) │
│ ✅ Ad Variants (3 platforms: TikTok, Instagram, LinkedIn) │
│ ✅ Email Sequence (5 emails) │
│ │
│ [👁️ Preview Landing Page] [🚀 Publish Now] [Close] │
│ │
└────────────────────────────────────────────────────────────────┘
│
│ (User clicks Publish)
▼
┌────────────────────────────────────────────────────────────────┐
│ STEP 5: Success! │
│ │
│ 🎉 Funnel Published! │
│ │
│ Your landing page is now live: │
│ 🔗 /valkyr-labs-valkyrai-masterclass │
│ │
│ What you can do now: │
│ • View landing page │
│ • Download ad scripts for TikTok/Instagram │
│ • Set up email automation │
│ • Track analytics │
│ │
│ [Visit Landing Page] [View Full Report] [Close] │
│ │
└────────────────────────────────────────────────────────────────┘
Backend Flow (What Happens Behind the Scenes)
User clicks "Generate Funnel"
│
▼
ProductFunnelWizardController.startWizard()
│
├─ Create ProductFunnelWizard record (status: generating)
├─ Return wizardId immediately
│
▼
ProductFunnelWizardService.executeGenerationWorkflow() [async]
│
├─ Build workflow input from form data
│
▼
FunnelGeneratorModule.execute()
│
├─ Build AI system prompt (Stack/Ambitious Labs style)
├─ Build user prompt with product details
├─ Call OpenAI GPT-4o
├─ Parse JSON response
│
▼
Generate structured content:
├─ PRD (problem, promise, offer structure, funnel stages)
├─ Landing page sections (hero, features, testimonials, CTA)
├─ Ad variants (TikTok 15s, Instagram 30s, LinkedIn 45s)
└─ Email sequence (5 emails with send delays)
│
▼
ProductFunnelWizardService saves:
├─ ContentData (structured content)
├─ ProductLandingPage (landing page config)
└─ Update wizard status to "review"
│
▼
Frontend polls /status endpoint
│
└─ Shows review screen when status = "review"
User clicks "Publish"
│
▼
ProductFunnelWizardController.publishFunnel()
│
├─ Mark ProductLandingPage as published
├─ Update wizard status to "published"
└─ Return landing page URL
Data Flow Diagram
┌─────────────┐
│ Product │ (Existing digital product)
│ id: uuid │
│ name: str │
│ price: $$ │
└──────┬──────┘
│
│ (User starts wizard)
▼
┌──────────────────────┐
│ ProductFunnelWizard │ (Wizard state tracker)
│ - productId │
│ - brand │
│ - targetAudience │
│ - priceTier │
│ - deliveryMode │
│ - heroBenefit │
│ - wizardStatus │ ← draft → generating → review → published
│ - generatedContent │ → [Links to ContentData]
│ - generatedLandingPage → [Links to ProductLandingPage]
└──────────┬───────────┘
│
│ (AI generation)
▼
┌──────────────────────┐
│ FunnelGeneratorModule│ (AI content generation)
│ - Calls GPT-4o │
│ - Returns JSON │
└──────────┬───────────┘
│
│ (Structured output)
▼
┌──────────────────────┐
│ ContentData │ (Generated funnel content)
│ - contentType: funnel
│ - prd: {...} │ ← Problem, promise, modules
│ - landingPageSections: [...] ← 6+ sections
│ - adVariants: [...] ← TikTok, Instagram, LinkedIn
│ - emailSequence: [...] ← 3-5 emails
│ - status: draft │
└──────────┬───────────┘
│
│ (Landing page creation)
▼
┌──────────────────────┐
│ ProductLandingPage │ (Publishable landing page)
│ - productId │
│ - slug │ ← /valkyr-labs-ai-masterclass
│ - seoTitle │
│ - seoDescription │
│ - config: {...} │ ← Sections from ContentData
│ - isPublished: false │ → User clicks "Publish" → true
└──────────────────────┘
React Component Hierarchy
ProductDetailPage
└─ ProductDetail
├─ ProductHeader
├─ ProductDescription
└─ ActionButtons
├─ BuyNowButton
└─ GenerateFunnelButton ← MAGIC BUTTON
│
│ (onClick)
▼
FunnelWizardModal ← Main wizard component
│
├─ (Step 1) WizardForm
│ ├─ BrandInput
│ ├─ AudienceInput
│ ├─ PriceTierSelect
│ ├─ DeliveryModeSelect
│ └─ HeroBenefitTextarea
│
├─ (Step 2) ProgressIndicator
│ ├─ ProgressBar
│ └─ CurrentStepLabel
│
├─ (Step 3) ReviewScreen
│ ├─ GeneratedAssetsList
│ ├─ PreviewButton
│ └─ PublishButton
│
└─ (Step 4) SuccessScreen
├─ LandingPageLink
└─ NextStepsActions
API Endpoints (Auto-Generated by ThorAPI)
POST /api/v1/product-funnel-wizard/start
├─ Input: ProductFunnelWizard
└─ Output: WizardStartResponse { wizardId, status, estimatedSeconds }
GET /api/v1/product-funnel-wizard/{wizardId}/status
└─ Output: WizardStatusResponse {
wizardId,
status,
progress,
currentStep,
contentDataId,
landingPageId,
landingPageUrl,
generatedAssets {
prdGenerated,
landingPageSectionsCount,
adVariantsCount,
emailSequenceCount
}
}
POST /api/v1/product-funnel-wizard/{wizardId}/publish
└─ Output: { landingPageUrl, published: true }
GET /api/v1/product-funnel-wizard/{wizardId}/preview
└─ Output: HTML preview of landing page
# Plus all CRUD endpoints auto-generated for:
GET/POST/PUT/DELETE /api/v1/ProductFunnelWizard
GET/POST/PUT/DELETE /api/v1/ContentData
GET/POST/PUT/DELETE /api/v1/ProductLandingPage
State Machine (Wizard Status)
┌─────────┐
│ draft │ (Initial state)
└────┬────┘
│ startWizard()
▼
┌────────────┐
│ generating │ (AI working)
└─────┬──────┘
│ (on success)
▼
┌────────┐
│ review │ (User reviews)
└────┬───┘
│ publishFunnel()
▼
┌───────────┐
│ published │ (Landing page live)
└───────────┘
│ (on error)
▼
┌────────┐
│ failed │ (Show error message)
└────────┘
Why This UX is SUPER SIMPLE
1. One Button to Rule Them All
<button>✨ Generate Funnel with AI</button>
- No complex navigation
- No multi-page wizard
- Just click and wait
2. 5-Field Form (30 seconds)
- Brand name (pre-filled from product)
- Target audience (text input)
- Price tier (dropdown with 4 options)
- Delivery mode (dropdown with 7 options)
- Hero benefit (textarea)
That's it! No overwhelming configuration.
3. Auto-Progress Updates
// Frontend polls every 2 seconds
useGetWizardStatusQuery(wizardId, { pollingInterval: 2000 })
// Backend updates:
"Generating PRD..." → 20%
"Creating landing page..." → 50%
"Generating ad variants..." → 75%
"Finalizing..." → 100%
4. Preview Before Publishing
- User clicks "Preview" → See HTML
- Review content → Make edits if needed
- Click "Publish" → Landing page goes live
5. No Manual Work
- No writing copy
- No designing landing page
- No creating ads
- No writing emails
- AI does it all!
Summary
This UX is ridiculously simple:
- ✅ One button on product page
- ✅ 5-field form (30 seconds to fill)
- ✅ Auto-progress (no waiting blindly)
- ✅ Preview/review (before publishing)
- ✅ One-click publish (landing page goes live)
No complexity. No overwhelm. Just magic. ✨
Total user time: 2-3 minutes from click to published landing page!