# Clarflow — Complete Content

> Clarflow is an AI-powered quiz funnel builder for ecommerce brands. Build interactive product recommendation quizzes, lead capture funnels, and personalized shopping experiences — no code required.

---

# Documentation

## CSS Classes Reference

> Complete reference for all Clarflow CSS classes. Target and style every part of your funnel — questions, inputs, buttons, headers, and more.

# Clarflow CSS Classes Reference

Target and style every part of your funnel with custom CSS. All classes follow the `cf-` prefix convention and are organized in three tiers: **global**, **step-level**, and **instance-level**.

---

## Layout & DOM Structure

The funnel renders as a 3-child flex column that fills the viewport:

```text
[data-clarflow-root]               <- flex-col, 100dvh, overflow:hidden
  |- [data-clarflow-header]         <- flex-shrink:0 (logo, back, progress)
  |- [data-clarflow-content]        <- flex:1, overflow-y:auto (ONLY scrollable area)
  |    └─ .cf-step                  <- step content
  └─ [data-clarflow-button-portal]  <- flex-shrink:0 (continue button)
```

**Protected properties** (cannot be overridden by custom CSS):
- `[data-clarflow-root]`: display, flex-direction, height, overflow
- `[data-clarflow-content]`: flex, min-height, overflow-y
- `[data-clarflow-button-portal]`: flex-shrink

> Always use `!important` when overriding inline styles. CSS is auto-scoped inside `[data-clarflow-root]`.

---

## Step Classes

| Class | Description |
|-------|-------------|
| `.cf-step` | Every step container |
| `.cf-step-{N}` | Specific step by position (1-based) |
| `.cf-step-first` | First step in the funnel |
| `.cf-step-last` | Last step in the funnel |

**Examples:**

```css
/* Style only the first step */
.cf-step-first {
  background: linear-gradient(135deg, #667eea 0%, #764ba2 100%) !important;
}

/* Add extra padding to the last step */
.cf-step-last {
  padding-bottom: 60px !important;
}
```

---

## Element Type Classes

Every sub-element gets a global class based on its type:

| Class | Element |
|-------|---------|
| `.cf-title` | Title elements |
| `.cf-text` | Text blocks |
| `.cf-image` | Image elements |
| `.cf-question` | Question elements |
| `.cf-input` | Input fields |
| `.cf-dropdown` | Dropdown selects |
| `.cf-loading` | Loading elements |
| `.cf-custom-html` | Custom HTML blocks |

**Step-scoped:** `.cf-step-{N}-{type}` (e.g., `.cf-step-2-question`)

**Instance-scoped:** `.cf-step-{N}-el-{E}` (e.g., `.cf-step-2-el-1` for the first element in step 2)

---

## Question Type & Layout Classes

| Class | Description |
|-------|-------------|
| `.cf-question-single` | Single-select question |
| `.cf-question-multi` | Multi-select question |
| `.cf-question-layout-list` | List layout |
| `.cf-question-layout-grid` | Grid layout (2 columns) |

**Examples:**

```css
/* Make single-select options larger */
.cf-question-single .cf-option {
  padding: 16px 20px !important;
  font-size: 18px !important;
}

/* Add a border to grid layout questions */
.cf-question-layout-grid {
  border: 2px dashed #e5e7eb !important;
  border-radius: 12px !important;
  padding: 16px !important;
}
```

---

## Input Type Classes

| Class | Input Type |
|-------|-----------|
| `.cf-input-text` | Text input |
| `.cf-input-email` | Email input |
| `.cf-input-number` | Number input |
| `.cf-input-tel` | Phone input |
| `.cf-input-url` | URL input |
| `.cf-input-password` | Password input |

**Examples:**

```css
/* Style email inputs differently */
.cf-input-email input {
  border-color: #3b82f6 !important;
}

/* Add phone icon styling */
.cf-input-tel input {
  padding-left: 40px !important;
}
```

---

## Loading Style Classes

| Class | Style |
|-------|-------|
| `.cf-loading-bar` | Bar-style progress loader |
| `.cf-loading-circle` | Circle/spinner loader |
| `.cf-loading-steps` | Multi-step loader |

---

## Option Classes

| Class | Description |
|-------|-------------|
| `.cf-option` | Every option button |
| `.cf-option-selected` | Currently selected option |
| `.cf-option-has-emoji` | Option that contains an emoji |
| `.cf-option-has-image` | Option that contains an image |
| `.cf-option-has-subtext` | Option that contains subtext |

**Step-scoped:** `.cf-step-{N}-option`

**Instance-scoped:** `.cf-step-{N}-el-{E}-option-{O}` (e.g., `.cf-step-1-el-1-option-3`)

**Examples:**

```css
/* Highlight options with images */
.cf-option-has-image {
  border: 2px solid #10b981 !important;
}

/* Style selected state */
.cf-option-selected {
  transform: scale(1.02) !important;
  box-shadow: 0 4px 12px rgba(59, 130, 246, 0.3) !important;
}
```

---

## Image Classes

| Class | Description |
|-------|-------------|
| `.cf-image-single` | Single image display |
| `.cf-image-carousel` | Image carousel (2+ images) |

---

## Field State Classes

| Class | Element | Description |
|-------|---------|-------------|
| `.cf-required` | Input/Dropdown wrapper | Field is required |
| `.cf-label` | Label element | Input or dropdown label |
| `.cf-input-error` | Error paragraph | Input validation error message |
| `.cf-dropdown-error` | Error paragraph | Dropdown validation error message |

**Examples:**

```css
/* Style required field labels */
.cf-required .cf-label {
  font-weight: 700 !important;
}

/* Custom error message styling */
.cf-input-error {
  color: #dc2626 !important;
  font-style: italic !important;
}
```

---

## Dropdown Classes

| Class | Description |
|-------|-------------|
| `.cf-dropdown` | Dropdown wrapper |
| `.cf-dropdown-option` | Every dropdown option |
| `.cf-dropdown-error` | Dropdown validation error |

**Step-scoped:** `.cf-step-{N}-dropdown-option`

**Instance-scoped:** `.cf-step-{N}-el-{E}-dropdown-option-{O}`

---

## Header & Button Classes

| Class | Element | Description |
|-------|---------|-------------|
| `.cf-header` | Header container | The top header bar |
| `.cf-header-back` | Back button wrapper | Back navigation area |
| `.cf-header-logo` | Logo wrapper | Brand logo area |
| `.cf-header-progress` | Progress wrapper | Progress bar area |
| `.cf-header-divider` | Header divider | Border line below the header / progress bar |
| `.cf-button` | Button container | Continue button wrapper (includes padding/shadow) |
| `.cf-button-text` | Button element | The actual continue button |
| `.cf-button-portal` | Portal div | Button portal target at bottom of viewport |

**Examples:**

```css
/* Custom header background */
.cf-header {
  background: #1a1a2e !important;
  border-bottom: 2px solid #16213e !important;
}

/* Round the continue button */
.cf-button-text {
  border-radius: 50px !important;
  text-transform: uppercase !important;
  letter-spacing: 1px !important;
}

/* Hide the progress bar */
.cf-header-progress {
  display: none !important;
}
```

---

## Instance Targeting

For precise control, combine step number with element index:

| Pattern | Example | Targets |
|---------|---------|---------|
| `.cf-step-{N}-el-{E}` | `.cf-step-2-el-1` | First element in step 2 |
| `.cf-step-{N}-el-{E}-option-{O}` | `.cf-step-1-el-1-option-3` | Third option of first element in step 1 |
| `.cf-step-{N}-el-{E}-dropdown-option-{O}` | `.cf-step-3-el-2-dropdown-option-1` | First dropdown option of second element in step 3 |

> All indices are **1-based** (start from 1, not 0).

---

## Real-World Examples

### Dark theme override

```css
.cf-step {
  background: #0f172a !important;
  color: #e2e8f0 !important;
}

.cf-option {
  background: #1e293b !important;
  border-color: #334155 !important;
  color: #e2e8f0 !important;
}

.cf-option-selected {
  border-color: #3b82f6 !important;
  background: #1e3a5f !important;
}

.cf-button-text {
  background: #3b82f6 !important;
  color: white !important;
}
```

### Style only email inputs on step 3

```css
.cf-step-3 .cf-input-email input {
  border: 2px solid #10b981 !important;
  border-radius: 8px !important;
  padding: 12px 16px !important;
}

.cf-step-3 .cf-input-email .cf-label {
  color: #10b981 !important;
  font-size: 14px !important;
}
```

### Highlight multi-select questions

```css
.cf-question-multi {
  background: #fefce8 !important;
  border: 1px solid #fbbf24 !important;
  border-radius: 12px !important;
  padding: 16px !important;
}

.cf-question-multi .cf-option {
  border-color: #f59e0b !important;
}
```

### Custom progress bar

```css
.cf-header-progress div {
  height: 6px !important;
  border-radius: 3px !important;
}

.cf-header-progress div div {
  background: linear-gradient(90deg, #3b82f6, #8b5cf6) !important;
}
```


---

## JSON Builder Reference

> Complete reference for constructing Clarflow quiz funnel JSON. Build funnels with AI tools and paste directly into the Clarflow Builder.

# Clarflow JSON Builder Reference

Build complete quiz funnels with any AI tool and paste them directly into the Clarflow Builder canvas. This document is your complete reference for the JSON format.

---

## How It Works

1. **Copy this document** — click the "Copy Full Markdown" button at the top of this page
2. **Paste into your AI tool** — Claude Code, ChatGPT, or any AI assistant
3. **Describe your funnel** — e.g. "Build me a 10-step quiz funnel for a collagen supplement targeting women 35+"
4. **Get JSON output** — the AI generates valid Clarflow clipboard JSON
5. **Paste into the Builder** — open your funnel in Clarflow, click on the canvas, and press `Ctrl/Cmd + V`

The AI uses this reference to produce JSON that the Clarflow Builder accepts natively via clipboard paste. No manual editing needed.

---

## Clipboard Payload Format

When pasting JSON onto the Clarflow canvas, the clipboard must contain a JSON string with this exact structure:

```json
{
  "type": "clarflow-canvas-nodes",
  "nodes": [ ... ],
  "edges": [ ... ],
  "timestamp": 1710400000000
}
```

| Field | Type | Required | Description |
|-------|------|----------|-------------|
| `type` | `string` | Yes | Must be exactly `"clarflow-canvas-nodes"`. Validation key. |
| `nodes` | `Node[]` | Yes | Array of node objects. |
| `edges` | `Edge[]` | Yes | Array of edge objects. Can be empty `[]`. |
| `timestamp` | `number` | Yes | Unix timestamp in milliseconds (e.g. `Date.now()`). |

> The `type` field is a discriminator. If it doesn't match exactly, the paste is silently ignored.

---

## Node Types Overview

Clarflow has 4 node types. Each node in the `nodes` array follows this base structure:

```json
{
  "id": "step_1710400000000_abc123def",
  "type": "quizStep",
  "position": { "x": 100, "y": 200 },
  "data": { ... },
  "width": 280,
  "height": 200
}
```

| Field | Type | Required | Description |
|-------|------|----------|-------------|
| `id` | `string` | Yes | Unique node ID. See ID Conventions section. |
| `type` | `string` | Yes | One of: `quizStep`, `exitNode`, `ifElseNode`, `startNode`. |
| `position` | `{ x, y }` | Yes | Canvas coordinates (top-left of the node). |
| `data` | `object` | Yes | Node-specific data. Structure varies by type. |
| `width` | `number` | Yes | Node width in pixels. Default: `280`. |
| `height` | `number` | Yes | Node height in pixels. Default: `200`. Doubled for A/B tests. |

| Node Type | Description | Can Be Pasted? |
|-----------|-------------|----------------|
| `quizStep` | Content step with sub-elements (questions, text, images, etc.) | Yes |
| `exitNode` | Terminal node that redirects to a URL | Yes |
| `ifElseNode` | Conditional branching node | Yes |
| `startNode` | Entry point of the funnel | No (auto-excluded on copy) |

---

## Step Node (quizStep)

The primary content node. Contains sub-elements that the end-user sees.

```json
{
  "id": "step_1710400000000_abc123def",
  "type": "quizStep",
  "position": { "x": 100, "y": 200 },
  "data": {
    "name": "Step 1",
    "subEls": [ ... ],
    "size": { "w": 280, "h": 200 },
    "buttonText": "Continue",
    "isConditional": false,
    "conditionalQuestionIndex": 0,
    "isABTest": false,
    "variantA": null,
    "variantB": null,
    "variantAWeight": 50
  },
  "width": 280,
  "height": 200
}
```

| Field | Type | Required | Default | Description |
|-------|------|----------|---------|-------------|
| `name` | `string` | No | `"New Step"` | Internal label in the canvas builder. **Not visible to end-users.** |
| `subEls` | `SubElement[]` | Yes | `[]` | Array of content blocks. See Sub-Elements section. |
| `size` | `{ w, h }` | Yes | `{ w: 280, h: 200 }` | Internal size. `w` = width, `h` = height in pixels. |
| `buttonText` | `string` | No | `"Continue"` | Custom label for the continue button shown to end-users. |
| `isConditional` | `boolean` | No | `undefined` | When `true`, enables conditional routing based on a question's selected option. |
| `conditionalQuestionIndex` | `number` | No | `undefined` | 0-based index into `subEls` pointing to the question used for routing. |
| `isABTest` | `boolean` | No | `undefined` | When `true`, enables A/B test mode. See A/B Testing section. |
| `variantA` | `object` | No | `undefined` | Variant A content (replaces `subEls` for variant A visitors). |
| `variantB` | `object` | No | `undefined` | Variant B content. |
| `variantAWeight` | `number` | No | `50` | Traffic percentage for Variant A (0-100). Variant B gets the remainder. |

**Conditional Routing:** When `isConditional: true`, the node renders a separate output handle for each option in the referenced question. Edges connect from handles like `option-0`, `option-1`, etc.

---

## Sub-Elements

Sub-elements are the content blocks inside a Step Node's `subEls` array. Each has a `kind` field that determines its type.

### title

Heading text displayed prominently.

```json
{ "kind": "title", "text": "What is your biggest challenge?" }
```

| Field | Type | Required | Default | Description |
|-------|------|----------|---------|-------------|
| `kind` | `"title"` | Yes | | Discriminator. |
| `text` | `string` | Yes | | The heading text. Plain text or rich text. |
| `isRichText` | `boolean` | No | `false` | Whether `text` contains rich text formatting. |
| `color` | `string` | No | `undefined` | Hex color override (e.g. `"#FF0000"`). |
| `contentFormat` | `string` | No | `undefined` | `"markdown"` or `"html"`. Format of rich text content. |

### text

Body text / paragraph content.

```json
{ "kind": "text", "text": "Select the option that best describes you." }
```

| Field | Type | Required | Default | Description |
|-------|------|----------|---------|-------------|
| `kind` | `"text"` | Yes | | Discriminator. |
| `text` | `string` | Yes | | The body text content. |
| `isRichText` | `boolean` | No | `false` | Whether `text` contains rich text formatting. |
| `color` | `string` | No | `undefined` | Hex color override. |
| `contentFormat` | `string` | No | `undefined` | `"markdown"` or `"html"`. |

**Rich text example with HTML:**

```json
{
  "kind": "text",
  "text": "<p style=\"text-align: center;\"><span style=\"font-size: 28px;\">How old are you?</span></p>",
  "isRichText": true,
  "contentFormat": "html"
}
```

### image

Displays one or more images.

```json
{ "kind": "image", "url": "https://example.com/hero.png", "alt": "Hero image" }
```

| Field | Type | Required | Default | Description |
|-------|------|----------|---------|-------------|
| `kind` | `"image"` | Yes | | Discriminator. |
| `url` | `string` | Yes | | Primary image URL. |
| `alt` | `string` | No | `undefined` | Alt text for accessibility. |
| `images` | `Array<{ url, alt? }>` | No | `undefined` | Additional images (for carousels/galleries). |

### question

Interactive question with selectable options. The most important sub-element for quiz funnels.

```json
{
  "kind": "question",
  "kindOf": "single",
  "options": [
    { "id": "opt_1", "text": "Focus issues", "emoji": "\ud83c\udfaf" },
    { "id": "opt_2", "text": "Time management", "emoji": "\u23f0" }
  ],
  "layout": "list",
  "variableName": "challenge"
}
```

| Field | Type | Required | Default | Description |
|-------|------|----------|---------|-------------|
| `kind` | `"question"` | Yes | | Discriminator. |
| `kindOf` | `"single"` or `"multi"` | Yes | | `"single"` = one selection. `"multi"` = multiple selections. |
| `options` | `array` | Yes | | Array of options. Can be plain strings or rich option objects. |
| `layout` | `"list"` or `"grid"` | No | `"list"` | Visual layout of the options. |
| `variableName` | `string` | No | `undefined` | Variable name for storing the selected answer. |

**Plain string options** (simplest form):

```json
{ "kind": "question", "kindOf": "single", "options": ["Yes", "No", "Maybe"] }
```

**Rich option objects** (recommended for most funnels):

```json
{
  "id": "opt_abc123",
  "text": "Focus issues",
  "emoji": "\ud83c\udfaf",
  "imageUrl": "https://example.com/focus.png",
  "subtext": "Difficulty concentrating on tasks",
  "subtextEmoji": "\ud83d\udcad",
  "subtextColor": "#6B7280"
}
```

| Field | Type | Required | Default | Description |
|-------|------|----------|---------|-------------|
| `id` | `string` | No* | Auto-generated | Unique option ID. **Required for conditional routing & If/Else conditions.** |
| `text` | `string` | Yes | | Primary display text. Keep short (1-4 words ideal, 6 max). |
| `emoji` | `string` | No | `undefined` | Emoji displayed before the text. |
| `imageUrl` | `string` | No | `undefined` | Image URL displayed in the option card. |
| `subtext` | `string` | No | `undefined` | Secondary text below the main text. |
| `subtextEmoji` | `string` | No | `undefined` | Emoji shown to the left of subtext. |
| `subtextColor` | `string` | No | `undefined` | Hex color override for subtext. |

> **Option text tips:** Keep `text` short and scannable. Use `subtext` for additional context instead of long option text. Use emojis selectively — they help users scan faster but skip them on age ranges, yes/no, or numbers.

### loading

Displays a loading/progress animation. Three styles available.

**Bar style** (simple progress bar, best for 2-5s transitions):

```json
{ "kind": "loading", "seconds": 4, "style": "bar", "text": "Analyzing your answers..." }
```

**Circle style** (circular spinner, best for 3-6s mid-funnel processing):

```json
{ "kind": "loading", "seconds": 5, "style": "circle", "text": "Building your plan..." }
```

**Steps style** (multi-step loader, most engaging, best before results, 15-30s):

```json
{
  "kind": "loading",
  "seconds": 15,
  "style": "steps",
  "steps": [
    {
      "id": "550e8400-e29b-41d4-a716-446655440000",
      "loadingText": "Analyzing your profile...",
      "completedText": "Profile analyzed",
      "seconds": 5,
      "modal": null
    },
    {
      "id": "550e8400-e29b-41d4-a716-446655440001",
      "loadingText": "Building your plan...",
      "completedText": "Plan ready",
      "seconds": 5,
      "modal": {
        "warningText": "To personalize your plan",
        "questionText": "Do you prefer morning or evening routines?",
        "buttonLabelYes": "Morning",
        "buttonLabelNo": "Evening"
      }
    },
    {
      "id": "550e8400-e29b-41d4-a716-446655440002",
      "loadingText": "Finalizing recommendations...",
      "completedText": "Recommendations ready",
      "seconds": 5
    }
  ]
}
```

| Field | Type | Required | Default | Description |
|-------|------|----------|---------|-------------|
| `kind` | `"loading"` | Yes | | Discriminator. |
| `seconds` | `number` | Yes | | Total duration in seconds. |
| `style` | `string` | No | `"bar"` | `"bar"`, `"circle"`, or `"steps"`. |
| `text` | `string` | No | `undefined` | Text shown during loading (for bar/circle styles). |
| `steps` | `array` | No | `undefined` | Multi-step config. Used when style is `"steps"`. |

**Loader step fields:**

| Field | Type | Required | Description |
|-------|------|----------|-------------|
| `id` | `string` | Yes | Unique step ID. Use UUID format. |
| `loadingText` | `string` | Yes | Text shown while this step is loading. |
| `completedText` | `string` | Yes | Text shown when this step completes (with checkmark). |
| `seconds` | `number` | Yes | Duration for this step (1-60 seconds). |
| `modal` | `object` | No | Optional modal that pauses the loader at 50%. |

**Modal fields** (when present on a loader step):

| Field | Type | Required | Description |
|-------|------|----------|-------------|
| `warningText` | `string` | Yes | Warning/context text. |
| `questionText` | `string` | Yes | The question to ask. |
| `buttonLabelYes` | `string` | Yes | Affirmative button label. |
| `buttonLabelNo` | `string` | Yes | Negative button label. |

> Use modals sparingly — 1-2 per multi-step loader max.

### custom_html

Renders arbitrary HTML content or a pre-built interactive block.

**Inline HTML:**

```json
{
  "kind": "custom_html",
  "html": "<div style='text-align:center; padding:20px;'><h2>Your Results</h2><p>Based on your answers...</p></div>"
}
```

**Pre-built block** (uses templateId + templateConfig, html must be empty string):

```json
{
  "kind": "custom_html",
  "html": "",
  "templateId": "reviews1",
  "templateConfig": {
    "reviews": [
      { "title": "Amazing product", "body": "Really works...", "authorName": "Sarah M." }
    ],
    "starColor": "#F5A623",
    "verifiedColor": "#2ECC87",
    "autoRotateMs": 4000
  }
}
```

| Field | Type | Required | Default | Description |
|-------|------|----------|---------|-------------|
| `kind` | `"custom_html"` | Yes | | Discriminator. |
| `html` | `string` | Yes | | Raw HTML content. **Must be `""` when using a pre-built block.** |
| `templateId` | `string` | No | `undefined` | Pre-built block identifier. See Pre-Built Blocks section. |
| `templateConfig` | `object` | No | `undefined` | Configuration for the pre-built block. |

### input

Single-line text input field for collecting user data.

```json
{
  "kind": "input",
  "label": "Your email",
  "placeholder": "you@example.com",
  "inputType": "email",
  "required": true,
  "variableName": "user_email",
  "klaviyoEnabled": true
}
```

| Field | Type | Required | Default | Description |
|-------|------|----------|---------|-------------|
| `kind` | `"input"` | Yes | | Discriminator. |
| `label` | `string` | No | `undefined` | Label text above the input. |
| `placeholder` | `string` | No | `undefined` | Placeholder text inside the input. |
| `inputType` | `string` | Yes | | One of: `"text"`, `"email"`, `"number"`, `"tel"`, `"url"`, `"password"`. |
| `required` | `boolean` | No | `undefined` | Whether the field must be filled before proceeding. |
| `minLength` | `number` | No | `undefined` | Minimum character length. |
| `maxLength` | `number` | No | `undefined` | Maximum character length. |
| `klaviyoEnabled` | `boolean` | No | `undefined` | Whether to sync this input to Klaviyo. |
| `variableName` | `string` | No | `undefined` | Variable name for storing the value. |

### dropdown

Dropdown select menu.

```json
{
  "kind": "dropdown",
  "label": "Your country",
  "placeholder": "Select a country",
  "options": [
    { "id": "opt_us", "text": "United States", "emoji": "\ud83c\uddfa\ud83c\uddf8" },
    { "id": "opt_uk", "text": "United Kingdom", "emoji": "\ud83c\uddec\ud83c\udde7" }
  ],
  "defaultOptionIndex": 0,
  "required": true,
  "variableName": "country"
}
```

| Field | Type | Required | Default | Description |
|-------|------|----------|---------|-------------|
| `kind` | `"dropdown"` | Yes | | Discriminator. |
| `label` | `string` | No | `undefined` | Label text above the dropdown. |
| `placeholder` | `string` | No | `undefined` | Placeholder text when no option is selected. |
| `options` | `array` | Yes | | Array of dropdown options (`{ id?, text, emoji? }`). |
| `defaultOptionIndex` | `number` | No | `undefined` | 0-based index of the pre-selected option. |
| `required` | `boolean` | No | `undefined` | Whether a selection is required. |
| `variableName` | `string` | No | `undefined` | Variable name for storing the value. |

---

## Exit Node

Terminal node that redirects the end-user to an external URL.

```json
{
  "id": "exit_1710400000000_abc123def",
  "type": "exitNode",
  "position": { "x": 900, "y": 200 },
  "data": {
    "name": "Exit",
    "redirectUrl": "https://example.com/thank-you",
    "size": { "w": 280, "h": 200 }
  },
  "width": 280,
  "height": 200
}
```

| Field | Type | Required | Default | Description |
|-------|------|----------|---------|-------------|
| `name` | `string` | No | `"Exit"` | Display name in canvas. |
| `redirectUrl` | `string` | Yes | `""` | URL the end-user is redirected to. Can be empty string. |
| `size` | `{ w, h }` | Yes | `{ w: 280, h: 200 }` | Internal size dimensions. |

---

## If/Else Node

Conditional branching node that routes users based on their previous answers.

```json
{
  "id": "ifelse_1710400000000_abc123def",
  "type": "ifElseNode",
  "position": { "x": 500, "y": 200 },
  "data": {
    "name": "Age Router",
    "conditions": [
      {
        "id": "cond_young",
        "label": "If",
        "criteria": [
          { "stepId": "step_q1", "questionIndex": 0, "optionIds": ["opt_under18"] }
        ],
        "handleId": "condition-if",
        "type": "if"
      },
      {
        "id": "cond_adult",
        "label": "Else If 1",
        "criteria": [
          { "stepId": "step_q1", "questionIndex": 0, "optionIds": ["opt_18to35"] }
        ],
        "handleId": "condition-elseif-1",
        "type": "elseIf"
      },
      {
        "id": "cond_fallback",
        "label": "Else",
        "criteria": [],
        "handleId": "condition-else",
        "type": "else"
      }
    ],
    "size": { "w": 240, "h": 180 }
  },
  "width": 240,
  "height": 180
}
```

| Field | Type | Required | Default | Description |
|-------|------|----------|---------|-------------|
| `name` | `string` | No | `"If/Else"` | Display name in canvas. |
| `conditions` | `array` | Yes | | Array of conditions. |
| `size` | `{ w, h }` | Yes | `{ w: 240, h: 180 }` | Internal size. |

**Condition fields:**

| Field | Type | Required | Description |
|-------|------|----------|-------------|
| `id` | `string` | Yes | Unique condition ID. **Used as `sourceHandle` in edges.** |
| `label` | `string` | Yes | Display label: `"If"`, `"Else If 1"`, `"Else If 2"`, ..., `"Else"`. |
| `criteria` | `array` | Yes | Array of criteria (AND logic). Empty `[]` for Else. |
| `handleId` | `string` | Yes | Internal handle: `"condition-if"`, `"condition-elseif-1"`, `"condition-else"`. |
| `type` | `string` | Yes | `"if"`, `"elseIf"`, or `"else"`. |

**Criteria fields:**

| Field | Type | Required | Description |
|-------|------|----------|-------------|
| `stepId` | `string` | Yes | ID of the Step Node containing the question to evaluate. |
| `questionIndex` | `number` | Yes | 0-based index of the question in that step's `subEls` array. |
| `optionIds` | `string[]` | Yes | Option IDs that must be selected. AND logic: all must match. |

**Condition ordering rules:**
1. First condition must be `type: "if"`
2. Last condition must be `type: "else"`
3. Any number of `type: "elseIf"` conditions between them
4. Between criteria in one condition: AND logic (all must be satisfied)
5. Between conditions: evaluated top to bottom, first match wins

---

## Edges

Edges connect nodes together. Each edge in the `edges` array:

```json
{
  "id": "edge_1710400000000_abc123def",
  "source": "step_1710400000000_node1",
  "target": "step_1710400000001_node2",
  "sourceHandle": "output",
  "targetHandle": "input",
  "type": "deletable",
  "animated": false,
  "style": { "stroke": "#374151", "strokeWidth": 2 }
}
```

| Field | Type | Required | Default | Description |
|-------|------|----------|---------|-------------|
| `id` | `string` | Yes | | Unique edge ID. |
| `source` | `string` | Yes | | ID of the source (outgoing) node. |
| `target` | `string` | Yes | | ID of the target (incoming) node. |
| `sourceHandle` | `string` | Yes | `"output"` | Output handle on the source node. See table below. |
| `targetHandle` | `string` | Yes | `"input"` | Always `"input"`. |
| `type` | `string` | Yes | `"deletable"` | Always `"deletable"` for Clarflow edges. |
| `animated` | `boolean` | No | `false` | Whether the edge has a flow animation. |
| `style` | `object` | No | | Standard: `{ "stroke": "#374151", "strokeWidth": 2 }`. |

**Source handle types:**

| Handle Pattern | Used For | Example |
|----------------|----------|---------|
| `"output"` | Default (non-conditional) edge | `"output"` |
| `"option-{index}"` | Conditional routing on step | `"option-0"`, `"option-1"` |
| `"variantA-option-{index}"` | A/B test variant A conditional | `"variantA-option-0"` |
| `"variantB-option-{index}"` | A/B test variant B conditional | `"variantB-option-1"` |
| Condition `id` | If/Else node edges | The condition's `id` value (e.g. `"cond_young"`) |

> **Important for If/Else edges:** The `sourceHandle` must be the condition's `id` field, NOT the `handleId` pattern. The condition `id` is what edges reference.

---

## A/B Testing

When `isABTest: true` on a Step Node, the node shows two variants to different visitors.

**Variant structure:**

```json
{
  "subEls": [ ... ],
  "buttonText": "Continue",
  "isConditional": false,
  "conditionalQuestionIndex": 0
}
```

| Field | Type | Required | Default | Description |
|-------|------|----------|---------|-------------|
| `subEls` | `array` | Yes | | Sub-elements for this variant. |
| `buttonText` | `string` | No | `undefined` | Custom button text for this variant. |
| `isConditional` | `boolean` | No | `undefined` | Enable per-variant conditional routing. |
| `conditionalQuestionIndex` | `number` | No | `undefined` | Index of the question in this variant's `subEls` for routing. |

**A/B test node example:**

```json
{
  "id": "step_abtest_1",
  "type": "quizStep",
  "position": { "x": 500, "y": 200 },
  "data": {
    "name": "A/B Test Step",
    "subEls": [],
    "size": { "w": 280, "h": 200 },
    "isABTest": true,
    "variantAWeight": 50,
    "variantA": {
      "subEls": [
        { "kind": "title", "text": "Version A: Do you struggle with focus?" },
        { "kind": "question", "kindOf": "single", "options": ["Yes", "No"] }
      ],
      "buttonText": "Next"
    },
    "variantB": {
      "subEls": [
        { "kind": "title", "text": "Version B: How's your concentration?" },
        { "kind": "question", "kindOf": "single", "options": ["Good", "Could be better"] }
      ],
      "buttonText": "Continue"
    }
  },
  "width": 280,
  "height": 400
}
```

> **Height rule:** For A/B test nodes, set `height` to `size.h * 2` (e.g. `200 * 2 = 400`).

---

## Pre-Built Blocks

Pre-built blocks are config-driven interactive components. When using a pre-built block, set `html` to an empty string `""` and provide `templateId` + `templateConfig`.

```json
{
  "kind": "custom_html",
  "html": "",
  "templateId": "reviews1",
  "templateConfig": { ... }
}
```

### Available Blocks

| Category | Block ID | Description |
|----------|----------|-------------|
| Review | `reviews1` | Review carousel with 5-star ratings and verified badges |
| Review | `reviews2-trustpilot` | Trustpilot-style review carousel |
| Review | `reviews3` | Auto-scrolling horizontal review slider (dark/premium aesthetic) |
| Offer | `offer` | Full offer card with badge, hero image, features, trust badges |
| Offer | `offer2` | Simpler product card with pricing and bullet benefits |
| Interactive | `before-after` | Drag slider to compare two images side by side |
| Interactive | `scratch-to-reveal` | Scratch card with confetti animation on reveal |
| Interactive | `swipe-statements` | Tinder-style swipe cards for yes/no statements |
| Graph | `graph-goal` | Goal progression chart with animated trend line |
| Assessment | `noise-profile` | Severity assessment card with slider and stat cards |
| Graph | `results-by-date` | Month-over-month bar chart with projected results |

---

### reviews1 — Review Carousel

Auto-rotating review carousel with 5-star ratings and verified badges.

```json
{
  "templateId": "reviews1",
  "templateConfig": {
    "reviews": [
      { "title": "This actually works", "body": "I was skeptical but after 3 weeks...", "authorName": "Sarah M." },
      { "title": "Best purchase this year", "body": "Noticed results within days...", "authorName": "John G." },
      { "title": "Highly recommend", "body": "My friend recommended this and...", "authorName": "Lisa K." }
    ],
    "starColor": "#F5A623",
    "verifiedColor": "#2ECC87",
    "autoRotateMs": 4000
  }
}
```

| Field | Type | Required | Default | Description |
|-------|------|----------|---------|-------------|
| `reviews` | `array` | Yes | | Array of `{ title, body, authorName }`. 3-5 recommended. |
| `starColor` | `string` | No | `"#F5A623"` | Hex color for star icons. |
| `verifiedColor` | `string` | No | `"#2ECC87"` | Hex color for "Verified" badge. |
| `autoRotateMs` | `number` | No | `4000` | Auto-rotation interval in milliseconds. |

### reviews2-trustpilot — Trustpilot Reviews

Trustpilot-style review carousel with green square stars.

```json
{
  "templateId": "reviews2-trustpilot",
  "templateConfig": {
    "reviews": [
      { "title": "Eye-opening information", "body": "Detailed review text...", "authorName": "Patrick N." },
      { "title": "Changed my life", "body": "Another review...", "authorName": "Brian R." }
    ],
    "autoRotateMs": 4000
  }
}
```

| Field | Type | Required | Default | Description |
|-------|------|----------|---------|-------------|
| `reviews` | `array` | Yes | | Same structure as reviews1. |
| `autoRotateMs` | `number` | No | `4000` | Auto-rotation interval. |

### reviews3 — Review Slider

Auto-scrolling horizontal review carousel with overall rating badge. Dark/premium aesthetic.

```json
{
  "templateId": "reviews3",
  "templateConfig": {
    "headerLabel": "Loved by thousands",
    "overallRating": "4.8",
    "primaryColor": "#CA5839",
    "bgGradientStart": "#2e1c18",
    "bgGradientEnd": "#3d2520",
    "textColor": "#ffffff",
    "reviewTextColor": "rgba(255,255,255,0.85)",
    "reviewCardBg": "rgba(202,88,57,0.1)",
    "reviews": [
      { "text": "Review text without a separate title...", "authorName": "Sarah M." },
      { "text": "Another review...", "authorName": "Mike T." }
    ]
  }
}
```

| Field | Type | Required | Default | Description |
|-------|------|----------|---------|-------------|
| `headerLabel` | `string` | No | `"Loved by thousands"` | Header text above reviews. |
| `overallRating` | `string` | No | `"4.8"` | Overall rating in badge. |
| `primaryColor` | `string` | No | `"#CA5839"` | Accent color. |
| `bgGradientStart` | `string` | No | `"#2e1c18"` | Background gradient start. |
| `bgGradientEnd` | `string` | No | `"#3d2520"` | Background gradient end. |
| `textColor` | `string` | No | `"#ffffff"` | Main text color. |
| `reviewTextColor` | `string` | No | `"rgba(255,255,255,0.85)"` | Review body text color. |
| `reviewCardBg` | `string` | No | `"rgba(202,88,57,0.1)"` | Review card background. |
| `reviews` | `array` | Yes | | Reviews with `{ text, authorName }` (note: `text` not `body`, no `title`). |

### offer — Offer Card

Full-featured offer card with badge, hero image, feature tags, offer box, and trust badges.

```json
{
  "templateId": "offer",
  "templateConfig": {
    "badgeText": "Your Personalized Plan",
    "headlineHtml": "<p style=\"text-align: center\"><span style=\"font-size: 22px\">Transform your health — <span style=\"color: #D4488C\">or pay nothing.</span></span></p>",
    "descriptionHtml": "<p style=\"text-align: center; font-size: 12px; color: #5C5C5C\">Join 25,000+ people who saw results...</p>",
    "imageUrl": "https://example.com/product.jpeg",
    "feature1": "Results in 28 days",
    "feature2": "Science-backed formula",
    "feature3": "Easy daily routine",
    "accentColor": "#D4488C",
    "offerTextHtml": "<p style=\"font-size: 12px; color: #5C5C5C\"><span style=\"color: #D4488C; font-weight: 700\">QUIZ RESULTS OFFER:</span> Unlock <span style=\"font-weight: 700; color: #1A1A1A\">up to 60% off</span>...</p>",
    "trustBadge1": "90-day guarantee",
    "trustBadge2": "Clinically tested",
    "trustBadge3": "Free shipping"
  }
}
```

| Field | Type | Required | Description |
|-------|------|----------|-------------|
| `badgeText` | `string` | Yes | Top badge/eyebrow text. |
| `headlineHtml` | `string` | Yes | Rich HTML headline. |
| `descriptionHtml` | `string` | Yes | Rich HTML description below headline. |
| `imageUrl` | `string` | Yes | Hero product image URL. |
| `feature1` | `string` | Yes | Feature tag 1. |
| `feature2` | `string` | Yes | Feature tag 2. |
| `feature3` | `string` | Yes | Feature tag 3. |
| `accentColor` | `string` | Yes | Accent/brand color (hex). |
| `offerTextHtml` | `string` | Yes | Rich HTML offer details. |
| `trustBadge1` | `string` | Yes | Trust badge 1 text. |
| `trustBadge2` | `string` | Yes | Trust badge 2 text. |
| `trustBadge3` | `string` | Yes | Trust badge 3 text. |

### offer2 — Product Card

Simpler product card with image, pricing, features, and benefit bullets.

```json
{
  "templateId": "offer2",
  "templateConfig": {
    "imageUrl": "https://example.com/product.webp",
    "badgeText": "RECOMMENDED FOR YOU",
    "productName": "Product Name",
    "featuresText": "Benefit 1 \u2022 Benefit 2 \u2022 Benefit 3",
    "originalPrice": "$89",
    "discountedPrice": "$39",
    "priceCopyHtml": "<p style=\"font-size: 13px; color: rgba(13,27,42,0.72)\">Your quiz unlocked a <strong>$50 credit</strong>...</p>",
    "accentColor": "#5BA4CF",
    "whyTitleHtml": "<p style=\"font-size: 16px; font-weight: 900; text-align: center\">Why this fits your profile</p>",
    "bullets": [
      "First benefit explanation",
      "Second benefit explanation",
      "Third benefit explanation",
      "Fourth benefit explanation"
    ]
  }
}
```

| Field | Type | Required | Description |
|-------|------|----------|-------------|
| `imageUrl` | `string` | Yes | Product image URL. |
| `badgeText` | `string` | Yes | Top badge text. |
| `productName` | `string` | Yes | Product name. |
| `featuresText` | `string` | Yes | Inline features text (dot-separated). |
| `originalPrice` | `string` | Yes | Original/strikethrough price. |
| `discountedPrice` | `string` | Yes | Discounted/current price. |
| `priceCopyHtml` | `string` | Yes | Rich HTML price explanation. |
| `accentColor` | `string` | Yes | Accent color (hex). |
| `whyTitleHtml` | `string` | Yes | Rich HTML "why this fits" title. |
| `bullets` | `string[]` | Yes | Array of benefit bullet strings (4-6 recommended). |

### before-after — Image Comparison Slider

Interactive drag slider to compare two images side by side.

```json
{
  "templateId": "before-after",
  "templateConfig": {
    "beforeImageUrl": "https://example.com/before.jpeg",
    "afterImageUrl": "https://example.com/after.jpeg",
    "beforeLabel": "Before",
    "afterLabel": "After"
  }
}
```

| Field | Type | Required | Default | Description |
|-------|------|----------|---------|-------------|
| `beforeImageUrl` | `string` | Yes | | "Before" image URL. |
| `afterImageUrl` | `string` | Yes | | "After" image URL. |
| `beforeLabel` | `string` | No | `"Before"` | Label for the before side. |
| `afterLabel` | `string` | No | `"After"` | Label for the after side. |

### scratch-to-reveal — Scratch Card

Interactive scratch card with canvas overlay. User scratches to reveal a reward with confetti animation.

```json
{
  "templateId": "scratch-to-reveal",
  "templateConfig": {
    "titleHtml": "<strong>You've Unlocked a <span style=\"color: #CA5839\">Mystery Reward</span></strong>",
    "subtitleText": "Scratch below to reveal your exclusive offer",
    "primaryColor": "#CA5839",
    "scratchBrushSize": 22,
    "revealThreshold": 50,
    "canvasHeight": 340,
    "rewardEyebrow": "Your Exclusive Reward",
    "rewardValue": "FREE",
    "rewardItem": "Growth Activation Serum",
    "rewardDescription": "$49 value - Added to your order",
    "goldColor": "#b8860b",
    "instructionText": "Scratch to Reveal",
    "instructionSubText": "Use your finger to scratch",
    "enableConfetti": true,
    "confettiColors": [],
    "maxWidth": 340,
    "borderRadius": 12
  }
}
```

| Field | Type | Required | Default | Description |
|-------|------|----------|---------|-------------|
| `titleHtml` | `string` | Yes | | Rich HTML title above scratch area. |
| `subtitleText` | `string` | No | | Subtitle below title. |
| `primaryColor` | `string` | No | `"#CA5839"` | Primary accent color. |
| `scratchBrushSize` | `number` | No | `22` | Scratch brush radius in pixels. |
| `revealThreshold` | `number` | No | `50` | % of area to scratch before auto-reveal. |
| `canvasHeight` | `number` | No | `340` | Scratch canvas height in pixels. |
| `rewardEyebrow` | `string` | Yes | | Small text above reward value. |
| `rewardValue` | `string` | Yes | | Big reward value text (e.g. "FREE", "50% OFF"). |
| `rewardItem` | `string` | Yes | | Item/product name. |
| `rewardDescription` | `string` | Yes | | Description below reward. |
| `goldColor` | `string` | No | `"#b8860b"` | Gold accent for reward display. |
| `instructionText` | `string` | No | `"Scratch to Reveal"` | Instruction overlay text. |
| `instructionSubText` | `string` | No | | Secondary instruction text. |
| `enableConfetti` | `boolean` | No | `true` | Enable confetti on reveal. |
| `confettiColors` | `string[]` | No | `[]` | Custom confetti colors (empty = defaults). |
| `maxWidth` | `number` | No | `340` | Max width in pixels. |
| `borderRadius` | `number` | No | `12` | Border radius in pixels. |

### swipe-statements — Tinder-Style Cards

Tinder-style swipe cards where users swipe right for yes, left for no.

```json
{
  "templateId": "swipe-statements",
  "templateConfig": {
    "titleText": "Does this sound like you?",
    "subtitleText": "Swipe right for yes, left for no",
    "primaryColor": "#CA5839",
    "yesColor": "#22c55e",
    "noColor": "#ef4444",
    "cardBgColor": "#ffffff",
    "textColor": "#1a1a1a",
    "subtextColor": "#555555",
    "yesLabel": "Yes",
    "noLabel": "Nope",
    "hintText": "Swipe or use buttons below",
    "completeTitle": "We've got your profile!",
    "completeSubtitle": "You matched with {count} common concerns",
    "cards": [
      { "emoji": "\ud83e\ude9e", "text": "I've noticed changes recently" },
      { "emoji": "\ud83d\ude29", "text": "I've tried other products with little results" },
      { "emoji": "\ud83c\udf3f", "text": "I prefer natural, science-backed solutions" },
      { "emoji": "\u23f0", "text": "I want to act before it gets worse" },
      { "emoji": "\ud83d\udcaa", "text": "I'm ready to commit to a daily routine" }
    ],
    "maxWidth": 360,
    "cardHeight": 320
  }
}
```

| Field | Type | Required | Default | Description |
|-------|------|----------|---------|-------------|
| `titleText` | `string` | Yes | | Title above the card stack. |
| `subtitleText` | `string` | No | | Subtitle/instruction text. |
| `primaryColor` | `string` | No | `"#CA5839"` | Primary accent color. |
| `yesColor` | `string` | No | `"#22c55e"` | Color for "yes" swipe/button. |
| `noColor` | `string` | No | `"#ef4444"` | Color for "no" swipe/button. |
| `cardBgColor` | `string` | No | `"#ffffff"` | Card background color. |
| `textColor` | `string` | No | `"#1a1a1a"` | Main text color. |
| `subtextColor` | `string` | No | `"#555555"` | Secondary text color. |
| `yesLabel` | `string` | No | `"Yes"` | Yes button label. |
| `noLabel` | `string` | No | `"Nope"` | No button label. |
| `hintText` | `string` | No | | Hint text below cards. |
| `completeTitle` | `string` | No | | Title shown after all cards swiped. |
| `completeSubtitle` | `string` | No | | Subtitle after completion. `{count}` is replaced with yes-count. |
| `cards` | `array` | Yes | | Array of `{ emoji, text }` cards (4-8 recommended). |
| `maxWidth` | `number` | No | `360` | Max card width in pixels. |
| `cardHeight` | `number` | No | `320` | Card height in pixels. |

### graph-goal — Goal Progression Chart

Animated goal progression chart showing growth/decline over time.

```json
{
  "templateId": "graph-goal",
  "templateConfig": {
    "yAxisLabels": [
      "HIGH\nLevels",
      "NORMAL\nLevels",
      "LOW\nLevels"
    ],
    "xAxisLabels": ["TODAY", "MONTH 1", "MONTH 2", "MONTH 3", "MONTH 4"],
    "youAreHereLabel": "YOU ARE HERE",
    "goalLabel": "GOAL: Significant Improvement",
    "trend": "upward"
  }
}
```

| Field | Type | Required | Default | Description |
|-------|------|----------|---------|-------------|
| `yAxisLabels` | `string[]` | Yes | | Y-axis labels (3 items: high, normal, low). Use `\n` for line breaks. |
| `xAxisLabels` | `string[]` | Yes | | X-axis labels (time periods, 4-6 items). |
| `youAreHereLabel` | `string` | No | `"YOU ARE HERE"` | Label for the starting point. |
| `goalLabel` | `string` | No | | Label for the goal/target point. |
| `trend` | `string` | Yes | | `"upward"` or `"downward"` — direction of the trend line. |

### noise-profile — Severity Assessment Card

Severity assessment display with slider, alert box, and stat cards.

```json
{
  "templateId": "noise-profile",
  "templateConfig": {
    "cardTitle": "Your Assessment Results",
    "levelPillText": "Severe",
    "levelPillColor": "#C0392B",
    "imageUrl": "https://example.com/assessment.webp",
    "sliderTooltipText": "Your level",
    "sliderLabels": ["Balanced", "Mild", "Moderate", "Severe"],
    "sliderEndPosition": 90,
    "alertTitle": "SEVERE imbalance detected",
    "alertText": "Based on your responses, your levels are critically disrupted...",
    "stats": [
      { "emoji": "\ud83e\udda0", "bgColor": "#FEF3E2", "label": "Primary metric", "value": "Critically Low", "isHighlighted": true },
      { "emoji": "\ud83d\udca8", "bgColor": "#E3F2FD", "label": "Secondary metric", "value": "Severe", "isHighlighted": true },
      { "emoji": "\ud83e\udde0", "bgColor": "#FCE4EC", "label": "Tertiary metric", "value": "Elevated", "isHighlighted": true },
      { "emoji": "\u26a1", "bgColor": "#E8EAF6", "label": "Fourth metric", "value": "Below 40%", "isHighlighted": true }
    ]
  }
}
```

| Field | Type | Required | Default | Description |
|-------|------|----------|---------|-------------|
| `cardTitle` | `string` | Yes | | Main card title. |
| `levelPillText` | `string` | Yes | | Severity level pill text. |
| `levelPillColor` | `string` | Yes | | Severity pill color (hex). |
| `imageUrl` | `string` | No | | Optional image URL. |
| `sliderTooltipText` | `string` | No | `"Your level"` | Tooltip on the severity slider. |
| `sliderLabels` | `string[]` | Yes | | Slider scale labels (4 items: low to high). |
| `sliderEndPosition` | `number` | Yes | | Slider position 0-100. |
| `alertTitle` | `string` | Yes | | Alert box title. |
| `alertText` | `string` | Yes | | Alert box description. |
| `stats` | `array` | Yes | | Array of stat cards (3-4 recommended). |
| `stats[].emoji` | `string` | Yes | | Stat card emoji. |
| `stats[].bgColor` | `string` | Yes | | Stat card background color (hex). |
| `stats[].label` | `string` | Yes | | Stat metric label. |
| `stats[].value` | `string` | Yes | | Stat value text. |
| `stats[].isHighlighted` | `boolean` | No | `false` | Whether to visually highlight this stat. |

### results-by-date — Month-Over-Month Bar Chart

Animated bar chart showing projected results over time.

```json
{
  "templateId": "results-by-date",
  "templateConfig": {
    "titleHtml": "<p style=\"text-align: center; font-size: 28px; font-weight: 700\">The last plan you'll ever need</p>",
    "descriptionHtml": "<p style=\"text-align: center; font-size: 16px; color: #555\">Based on your answers, we expect visible results by May 2026</p>",
    "trend": "upward",
    "startMonth": "February",
    "endMonth": "May"
  }
}
```

| Field | Type | Required | Description |
|-------|------|----------|-------------|
| `titleHtml` | `string` | Yes | Rich HTML title (use inline styles). |
| `descriptionHtml` | `string` | Yes | Rich HTML description. |
| `trend` | `string` | Yes | `"upward"` or `"downward"`. |
| `startMonth` | `string` | Yes | Starting month name (e.g. "February"). |
| `endMonth` | `string` | Yes | Ending month name (e.g. "May"). |

---

## ID Conventions

IDs use a timestamp + random suffix pattern for uniqueness:

| Entity | Pattern | Example |
|--------|---------|---------|
| Step Node | `step_{timestamp}_{random}` | `step_1710400000000_k7x2m9abc` |
| Exit Node | `exit_{timestamp}_{random}` | `exit_1710400000001_p3y8n5def` |
| If/Else Node | `ifelse_{timestamp}_{random}` | `ifelse_1710400000002_q1w2e3ghi` |
| Start Node | `start_{timestamp}_{random}` | `start_1710400000003_r4t5y6jkl` |
| Edge | `edge_{timestamp}_{random}` | `edge_1710400000004_u7i8o9mno` |
| Condition | `condition_{timestamp}_{random}` | `condition_1710400000005_a1s2d3pqr` |
| Option | `opt_{timestamp}_{random}` | `opt_1710400000006_f4g5h6stu` |
| Loader Step | UUID format | `a1b2c3d4-e5f6-7890-abcd-ef1234567890` |

- `{timestamp}` = `Date.now()` (milliseconds since epoch)
- `{random}` = 9-character random alphanumeric string

> When pasting, the system automatically remaps all IDs to new unique values. So the exact IDs don't need to be globally unique — they just need to be **internally consistent** (e.g., an edge's `source` must match a node's `id`).

---

## Positioning

**Linear flow:** Space nodes 400px apart horizontally, constant Y.

```text
position.x = startX + (stepIndex * 400)
position.y = 200
```

**Branching:** Offset branches vertically.

```text
Main path:   y = 200
Branch A:    y = 50
Branch B:    y = 350
```

---

## Variable References

When a quiz captures user input (via `variableName` on questions, inputs, or dropdowns), you can reference that value in later title/text elements using double-bracket syntax:

```text
{{variable_name}}
```

For example, if an input stores to `variableName: "first_name"`, a later title can use:

```json
{ "kind": "title", "text": "Great news, {{first_name}}!" }
```

---

## Validation Rules & Common Pitfalls

The paste deserializer checks:
1. The parsed object must have `type === "clarflow-canvas-nodes"` (exact match)
2. `nodes` must be an array
3. `edges` must be an array
4. If any check fails, the paste is silently ignored (no error shown)

| Pitfall | Symptom | Fix |
|---------|---------|-----|
| Missing `type: "clarflow-canvas-nodes"` | Paste does nothing | Add the type field |
| `nodes` or `edges` not an array | Paste does nothing | Ensure both are arrays, even if empty |
| Option IDs missing on conditional questions | Edges connect to wrong options | Add explicit `id` fields to all options |
| A/B test node height not doubled | Node renders incorrectly | Set `height` to `size.h * 2` |
| If/Else edge uses `handleId` instead of condition `id` | Edge doesn't connect | Use the condition's `id` as `sourceHandle` |
| Invalid `kind` on sub-element | Element doesn't render | Must be: title, text, image, question, loading, custom_html, input, dropdown |
| `kindOf` missing on question | Question may not render | Must be `"single"` or `"multi"` |
| `inputType` missing on input | Input may not render | Must be: text, email, number, tel, url, password |
| Pre-built block with non-empty `html` | Block may not render correctly | Set `html` to `""` when using `templateId` |

---

## Complete Examples

### Example 1: Minimal Single Step

A single question step with no connections:

```json
{
  "type": "clarflow-canvas-nodes",
  "nodes": [
    {
      "id": "step_1_a",
      "type": "quizStep",
      "position": { "x": 300, "y": 200 },
      "data": {
        "name": "Quick Question",
        "subEls": [
          { "kind": "title", "text": "How did you hear about us?" },
          {
            "kind": "question",
            "kindOf": "single",
            "options": ["Google", "Friend", "Social Media", "Other"]
          }
        ],
        "size": { "w": 280, "h": 200 }
      },
      "width": 280,
      "height": 200
    }
  ],
  "edges": [],
  "timestamp": 1710400000000
}
```

### Example 2: Two Connected Steps

Two steps connected by a default edge:

```json
{
  "type": "clarflow-canvas-nodes",
  "nodes": [
    {
      "id": "step_1_intro",
      "type": "quizStep",
      "position": { "x": 100, "y": 200 },
      "data": {
        "name": "Introduction",
        "subEls": [
          { "kind": "title", "text": "Welcome to our assessment" },
          { "kind": "text", "text": "This will take about 2 minutes." }
        ],
        "size": { "w": 280, "h": 200 },
        "buttonText": "Let's Go"
      },
      "width": 280,
      "height": 200
    },
    {
      "id": "step_2_question",
      "type": "quizStep",
      "position": { "x": 500, "y": 200 },
      "data": {
        "name": "Main Question",
        "subEls": [
          { "kind": "title", "text": "What is your primary goal?" },
          {
            "kind": "question",
            "kindOf": "single",
            "options": [
              { "id": "opt_focus", "text": "Better focus", "emoji": "\ud83c\udfaf" },
              { "id": "opt_sleep", "text": "Better sleep", "emoji": "\ud83d\ude34" },
              { "id": "opt_stress", "text": "Less stress", "emoji": "\ud83e\uddd8" }
            ],
            "layout": "list"
          }
        ],
        "size": { "w": 280, "h": 200 }
      },
      "width": 280,
      "height": 200
    }
  ],
  "edges": [
    {
      "id": "edge_1_2",
      "source": "step_1_intro",
      "target": "step_2_question",
      "sourceHandle": "output",
      "targetHandle": "input",
      "type": "deletable",
      "animated": false,
      "style": { "stroke": "#374151", "strokeWidth": 2 }
    }
  ],
  "timestamp": 1710400000000
}
```

### Example 3: Conditional Routing

A step with conditional routing that sends users to different nodes based on their answer:

```json
{
  "type": "clarflow-canvas-nodes",
  "nodes": [
    {
      "id": "step_q1",
      "type": "quizStep",
      "position": { "x": 100, "y": 200 },
      "data": {
        "name": "Router Question",
        "subEls": [
          { "kind": "title", "text": "Are you a morning or evening person?" },
          {
            "kind": "question",
            "kindOf": "single",
            "options": [
              { "id": "opt_morning", "text": "Morning person", "emoji": "\ud83c\udf05" },
              { "id": "opt_evening", "text": "Evening person", "emoji": "\ud83c\udf19" }
            ]
          }
        ],
        "size": { "w": 280, "h": 200 },
        "isConditional": true,
        "conditionalQuestionIndex": 0
      },
      "width": 280,
      "height": 200
    },
    {
      "id": "step_morning",
      "type": "quizStep",
      "position": { "x": 500, "y": 100 },
      "data": {
        "name": "Morning Path",
        "subEls": [
          { "kind": "title", "text": "Great! Early birds get the worm." }
        ],
        "size": { "w": 280, "h": 200 }
      },
      "width": 280,
      "height": 200
    },
    {
      "id": "step_evening",
      "type": "quizStep",
      "position": { "x": 500, "y": 350 },
      "data": {
        "name": "Evening Path",
        "subEls": [
          { "kind": "title", "text": "Night owls are creative!" }
        ],
        "size": { "w": 280, "h": 200 }
      },
      "width": 280,
      "height": 200
    }
  ],
  "edges": [
    {
      "id": "edge_morning",
      "source": "step_q1",
      "target": "step_morning",
      "sourceHandle": "option-0",
      "targetHandle": "input",
      "type": "deletable",
      "animated": false,
      "style": { "stroke": "#374151", "strokeWidth": 2 }
    },
    {
      "id": "edge_evening",
      "source": "step_q1",
      "target": "step_evening",
      "sourceHandle": "option-1",
      "targetHandle": "input",
      "type": "deletable",
      "animated": false,
      "style": { "stroke": "#374151", "strokeWidth": 2 }
    }
  ],
  "timestamp": 1710400000000
}
```

> `option-0` maps to the first option ("Morning person"), `option-1` to the second ("Evening person"). The index corresponds to the option's position in the `options` array.

### Example 4: Full Flow with Email Capture, Loading, and Exit

A complete flow showcasing multiple sub-element types:

```json
{
  "type": "clarflow-canvas-nodes",
  "nodes": [
    {
      "id": "step_welcome",
      "type": "quizStep",
      "position": { "x": 100, "y": 200 },
      "data": {
        "name": "Welcome",
        "subEls": [
          { "kind": "image", "url": "https://example.com/logo.png", "alt": "Brand logo" },
          { "kind": "title", "text": "Find your perfect routine" },
          { "kind": "text", "text": "Answer a few quick questions and we'll build a personalized plan." }
        ],
        "size": { "w": 280, "h": 200 },
        "buttonText": "Start Quiz"
      },
      "width": 280,
      "height": 200
    },
    {
      "id": "step_q1",
      "type": "quizStep",
      "position": { "x": 500, "y": 200 },
      "data": {
        "name": "Goal Selection",
        "subEls": [
          { "kind": "title", "text": "What's your #1 goal?" },
          {
            "kind": "question",
            "kindOf": "single",
            "options": [
              { "id": "opt_focus", "text": "Improve focus", "emoji": "\ud83c\udfaf", "subtext": "Stay on task longer" },
              { "id": "opt_energy", "text": "More energy", "emoji": "\u26a1", "subtext": "Feel less drained" },
              { "id": "opt_calm", "text": "Reduce anxiety", "emoji": "\ud83e\uddd8", "subtext": "Feel more at peace" }
            ],
            "layout": "list",
            "variableName": "primary_goal"
          }
        ],
        "size": { "w": 280, "h": 200 }
      },
      "width": 280,
      "height": 200
    },
    {
      "id": "step_email",
      "type": "quizStep",
      "position": { "x": 900, "y": 200 },
      "data": {
        "name": "Email Capture",
        "subEls": [
          { "kind": "title", "text": "Almost done!" },
          { "kind": "text", "text": "Enter your email to get your personalized results." },
          {
            "kind": "input",
            "label": "Email",
            "placeholder": "you@example.com",
            "inputType": "email",
            "required": true,
            "klaviyoEnabled": true,
            "variableName": "email"
          }
        ],
        "size": { "w": 280, "h": 200 },
        "buttonText": "Get My Results"
      },
      "width": 280,
      "height": 200
    },
    {
      "id": "step_loading",
      "type": "quizStep",
      "position": { "x": 1300, "y": 200 },
      "data": {
        "name": "Processing",
        "subEls": [
          { "kind": "title", "text": "Building your plan..." },
          {
            "kind": "loading",
            "seconds": 8,
            "style": "steps",
            "steps": [
              {
                "id": "ls_1",
                "loadingText": "Analyzing your responses...",
                "completedText": "Responses analyzed",
                "seconds": 3
              },
              {
                "id": "ls_2",
                "loadingText": "Creating personalized plan...",
                "completedText": "Plan created",
                "seconds": 5
              }
            ]
          }
        ],
        "size": { "w": 280, "h": 200 }
      },
      "width": 280,
      "height": 200
    },
    {
      "id": "exit_results",
      "type": "exitNode",
      "position": { "x": 1700, "y": 200 },
      "data": {
        "name": "Results Page",
        "redirectUrl": "https://example.com/results",
        "size": { "w": 280, "h": 200 }
      },
      "width": 280,
      "height": 200
    }
  ],
  "edges": [
    {
      "id": "e1",
      "source": "step_welcome",
      "target": "step_q1",
      "sourceHandle": "output",
      "targetHandle": "input",
      "type": "deletable",
      "animated": false,
      "style": { "stroke": "#374151", "strokeWidth": 2 }
    },
    {
      "id": "e2",
      "source": "step_q1",
      "target": "step_email",
      "sourceHandle": "output",
      "targetHandle": "input",
      "type": "deletable",
      "animated": false,
      "style": { "stroke": "#374151", "strokeWidth": 2 }
    },
    {
      "id": "e3",
      "source": "step_email",
      "target": "step_loading",
      "sourceHandle": "output",
      "targetHandle": "input",
      "type": "deletable",
      "animated": false,
      "style": { "stroke": "#374151", "strokeWidth": 2 }
    },
    {
      "id": "e4",
      "source": "step_loading",
      "target": "exit_results",
      "sourceHandle": "output",
      "targetHandle": "input",
      "type": "deletable",
      "animated": false,
      "style": { "stroke": "#374151", "strokeWidth": 2 }
    }
  ],
  "timestamp": 1710400000000
}
```


---

# Blog Posts

# Funnel Teardowns

## Forge Men Quiz Funnel Teardown

> See how Forge Men's 18-step anti-aging quiz builds detailed skin profiles from lifestyle data, then converts with personalized transformation plans and a 50% discount on their Tallow Balm.

**Category:** Men's Beautycare | **Traffic:** 1M

Men's anti-aging skincare brand selling bio-identical tallow balm, positioned as a simple 30-second daily routine to reverse visible skin aging.

### Key Learnings

#### 1. Deep Lifestyle Profiling as a Personalization Engine

## What happens

Forge Men runs an 18-step funnel with 13 questions spanning age, skin concerns, motivation, coffee intake, shower temperature, shaving frequency, smoking, alcohol, sun exposure, stress, sleep, product experience, and a confidence micro-commitment — all before showing any product. Most skincare quizzes ask 4-5 surface-level questions. Forge goes unusually deep into daily habits.

## Why it matters

This serves two purposes. First, it creates an **illusion of diagnostic precision**. When the "Skin Profile Summary" appears showing "Aging Type: Extrinsic" and "Trigger: Stress," the user believes the assessment is genuinely personalized because they answered so many granular questions. The specificity of the inputs makes the output feel medically credible.

Second, every answer is a **zero-party data goldmine** for email segmentation. Forge now knows each lead's age bracket, stress level, sleep quality, substance use, and sun exposure — enabling hyper-targeted follow-up sequences that reference exact lifestyle factors.

## Key Insights

- Lifestyle questions (coffee, shower temp, shaving) feel non-invasive yet reveal skin-relevant habits
- The volume of questions creates perceived diagnostic rigor — users trust detailed assessments more
- Each data point enables segmented email flows: "As someone who gets less than 6 hours of sleep..."
- Questions double as education — users learn that hot showers and coffee affect skin health
- The sunk cost of 13 answers across 18 steps makes abandoning before seeing results feel wasteful

#### 2. The Skin Profile Summary as a Conversion Trigger

## What happens

After the lifestyle questions, users see a "Summary Of Your Skin Profile" page showing their aging level on a visual scale (Low → High), aging type classification (Extrinsic), primary trigger (Stress), room for improvement (High), and impact on appearance (Noticeable). This is followed by a projected improvement timeline with a bar chart.

## Why it matters

This is a **problem amplification sequence** disguised as a health assessment. The visual scale showing "HIGH" aging level in red creates urgency. The clinical-sounding labels ("Extrinsic aging," "Noticeable impact") borrow authority from medical diagnostics.

The follow-up projection page — "We Expect You To Visibly Reduce Wrinkles, Eye Bags, And Crow's Feet By July 2026" — immediately pivots from problem to solution. The specific date makes the promise tangible and creates a mental deadline.

## Key Insights

- The aging level gauge uses color psychology: the red/high zone triggers loss aversion
- Clinical terminology ("Extrinsic") makes a skincare quiz feel like a professional skin analysis
- Showing four profile metrics (type, trigger, room, impact) reinforces the depth of the "assessment"
- The projected timeline with month labels and a declining bar chart visualizes the transformation
- Setting a specific future date ("By July 2026") creates accountability and urgency to start now

#### 3. The Micro-Commitment Pop-Up Before the Offer

## What happens

Just before revealing the product offer, Forge shows a "Your Transformation Plan Is Almost Ready" loading screen. Mid-load, a pop-up interrupts: "Would looking younger help you feel more confident?" with Yes/No buttons. After answering, the loading completes and the sales page appears.

## Why it matters

This is a textbook **commitment and consistency** play from Robert Cialdini's persuasion framework. By getting users to tap "Yes" to wanting to look younger and feel more confident, they've made a micro-commitment that aligns with purchasing the product. When the offer appears next, buying becomes the consistent action.

The loading screen with progress bars ("Goals ✓", "Custom skin profile matched ✓", "Essential skincare selected ✓") adds perceived backend processing — as if an algorithm is genuinely assembling a custom plan. This **computational theater** increases perceived value of the recommendation.

## Key Insights

- The Yes/No pop-up forces an explicit identity statement: "I want to look younger"
- Answering "Yes" creates cognitive dissonance if the user then doesn't act on the offer
- The loading animation with checkmarks mimics real-time processing, adding perceived sophistication
- Three progress items (Goals, Profile, Skincare) frame the product as a complete "plan," not just a cream
- The interruption pattern (load → pop-up → resume) keeps attention high at the critical pre-offer moment

#### 4. Problem-First Visual Framing with Image Selection

## What happens

Step 2 asks "When I Look In The Mirror, I See..." with four close-up photo tiles showing real skin problems: Wrinkles & Fine Lines, Eye Bags & Dark Circles, Saggy Skin, and Dark Spots. Users can select multiple concerns before tapping Continue.

## Why it matters

This is **visual priming** — by forcing users to look at extreme close-ups of aging skin and identify which ones match their own face, the quiz triggers an emotional response that text-only options cannot. The first-person framing ("When I look in the mirror, I see...") makes it personally confrontational.

Multi-select is strategic: users who select 2-3 concerns feel their problems are more complex, justifying a more comprehensive (and expensive) solution. It also captures richer data for the personalized results page.

## Key Insights

- Close-up aging photos activate loss aversion — users viscerally don't want to look like that
- First-person phrasing ("I see...") forces self-identification with the problem
- Multi-select increases perceived problem severity: more selections = more urgency
- Image-based options have higher engagement rates than text-only alternatives
- The selected concerns can be echoed back in the results page for personalization

#### 5. Education-as-Persuasion: The "Did You Know?" Bridge

## What happens

Between the skin profile summary and the offer page, Forge inserts an educational interstitial: "Did You Know? Researchers discovered men can look 10 years younger within 6 months, if they apply 'bio-identical oil' on their face for just 30 seconds per day." It's accompanied by a before/after composite image.

## Why it matters

This step plants the **mechanism story** — the specific ingredient claim ("bio-identical oil") and the minimal effort required ("30 seconds per day") that make the product's promise believable. By framing it as a research discovery rather than a product pitch, it bypasses sales resistance.

The placement is deliberate: it sits between the problem (your skin profile shows HIGH aging) and the solution (the product offer). This creates a logical bridge: Problem → Mechanism → Product.

## Key Insights

- "Researchers discovered" borrows authority from science without citing specific studies
- "10 years younger in 6 months" is a bold, specific, and memorable claim
- "30 seconds per day" removes the effort objection — it's positioned as effortless
- "Bio-identical oil" introduces the product's mechanism before showing the product itself
- The before/after composite image provides visual proof of the transformation promise
- Users arrive at the offer page already believing the mechanism works — the product just delivers it

### Onboarding Flow

**Step 1: Age Gate & Hook** — Opens with a bold headline: 'Take This 1-Minute Quiz To Claim Your Discount!' The first question asks 'How old are you?' with four age brackets (30-39, 40-49, 50-59, 60+). Doubles as a landing page and first question — immediately segments users by age while the discount hook reduces bounce.

**Step 2: Mirror Check — Visual Concern Selector** — 'When I Look In The Mirror, I See...' — a multi-select image grid with four close-up photos of aging skin: Wrinkles & Fine Lines, Eye Bags & Dark Circles, Saggy Skin, Dark Spots. Visual priming forces users to confront their concerns viscerally. Multi-select captures richer segmentation data.

**Step 3: Interest & Motivation** — 'What Most Interests You In Forge?' — options range from reversing aging to slowing it down to lasting hydration, plus 'All of the above.' Captures purchase motivation and intent level. The phrasing assumes interest in the brand, subtly framing the decision as which benefit matters most, not whether to buy.

**Step 4: Coffee Intake** — 'How Much Coffee Do You Drink Daily?' — 1 Cup, 2-3 Cups, 4+ Cups, or none. Starts the lifestyle profiling section. Caffeine dehydrates skin, so this feels medically relevant while being a low-friction, non-invasive question that keeps users engaged.

**Step 5: Shower Temperature** — 'My Shower Temperature Preference Is...' — Steaming hot, Warm but not too hot, Cold/lukewarm. An unexpected but clever question — hot water strips natural oils from skin. Users learn something new about skin health just by seeing this question, building trust in the quiz's expertise.

**Step 6: Shaving Frequency** — 'How Often Do You Shave?' — Daily, 2-3x Weekly, Never (maintaining a beard). Men-specific question that reinforces the brand's masculine positioning. Shaving irritates skin and affects product recommendations, making the question feel purposeful.

**Step 7: Smoking Habits** — 'How Often Do You Smoke?' — Rarely (social smoker), Several times a day, Used to smoke but quit, I've never smoked. Smoking accelerates skin aging dramatically. Including this alongside lighter lifestyle questions normalizes the ask and captures a high-value segmentation signal.

**Step 8: Alcohol Consumption** — 'How Often Do You Drink Alcohol?' — five options from 1-3 drinks/week to daily drinker to 'I don't drink.' Alcohol dehydrates and inflames skin. The detailed options capture nuanced data for both personalization and email segmentation.

**Step 9: Sun Exposure** — 'My Skin Deals With...' — Constant sun exposure, Some sun exposure, Little sun exposure, Minimal sun. UV exposure is the #1 cause of extrinsic aging, making this a key variable for the skin profile assessment. The answer directly feeds the 'Aging Type: Extrinsic' classification shown later.

**Step 10: Stress Level** — 'I Feel The Pressure Of Stress...' — Every day constantly, Several days throughout the week, Sometimes, Rarely. Stress is a known skin aging trigger. The answer feeds the 'Trigger: Stress' classification in the skin profile summary, making the results feel causally connected to inputs.

**Step 11: Sleep Quality** — 'How Much Sleep Do You Get Most Nights?' — 8+ hours, 6-7 hours, Less than 6 hours. Sleep is when skin repairs itself. This rounds out the lifestyle assessment with a universally relatable question that most men will answer honestly.

**Step 12: Anti-Aging Experience** — 'With Anti-Aging Products, I've...' — Been disappointed by results, Seen some improvements, Never tried anything yet, Ready to find what actually works! The final question before results. Captures purchase readiness and past frustrations. 'Ready to find what actually works!' is a leading option that primes buying intent.

**Step 13: Skin Profile Summary** — A personalized results dashboard showing: Aging Level on a visual gauge (marked 'HIGH' in red), Aging Type (Extrinsic), Trigger (Stress), Room For Improvement (High), Impact on Appearance (Noticeable). Includes a photo of an older man and clinical-style metrics. This is the payoff for 13 questions across 18 steps — users feel genuinely diagnosed.

**Step 14: Projected Improvement Timeline** — 'Based On Your Skin Profile, We Expect You To Visibly Reduce The Appearance Of Wrinkles, Eye Bags, And Crow's Feet By July 2026.' A declining bar chart visualizes the transformation from April to July. The specific date and visual trajectory create urgency and make the promise feel concrete.

**Step 15: Mechanism Education — "Did You Know?"** — An educational interstitial: 'Researchers discovered men can look 10 years younger within 6 months, if they apply bio-identical oil on their face for just 30 seconds per day.' Before/after composite image reinforces the claim. Plants the product mechanism before the offer appears.

**Step 16: Micro-Commitment Pop-Up** — Mid-loading interruption: 'Would looking younger help you feel more confident?' with Yes/No buttons. A commitment and consistency play — tapping 'Yes' creates psychological alignment with purchasing. Appears over a dimmed loading screen to feel like a necessary step, not an ad.

**Step 17: Transformation Plan Loading** — 'Your Transformation Plan Is Almost Ready' with three animated progress bars: Goals ✓, Custom skin profile matched ✓, Essential skincare selected ✓. Computational theater that makes the product recommendation feel algorithmically assembled. The CTA reads 'Get Your Essential Skincare' — framing the product as prescribed, not sold.

**Step 18: Sales Page — Product Offer** — Full sales page with 'SPRING SALE — Exclusive 50% OFF Discount' banner. Shows the ForgeSkin Rejuvenating Tallow Balm product with 4.7/5 rating from 18,250+ reviews. Echoes skin profile data (Aging reason: Extrinsic, Opportunity: High). Includes 60-day money back guarantee, product carousel, and social proof. The headline 'DEFY AGING AND LOOK MUCH YOUNGER IN WEEKS' closes the loop from quiz to purchase.

---

## Hike Footwear Quiz Funnel Teardown

> See how Hike Footwear's 12-step foot health quiz uses emotional pain framing, mid-quiz education, and data-backed comfort projections to convert adults 40+ into barefoot shoe buyers at 50% off.

**Category:** Health Footwear | **Traffic:** 4M

Minimalist barefoot shoe brand targeting adults 40+ with foot, knee, and back pain — positioned as a podiatrist-developed alternative to overly cushioned footwear.

### Key Learnings

#### 1. Pain-First Emotional Opening Before Any Product Context

## What happens

The quiz opens not with a product question but with an emotional impact question: "What's holding you back from enjoying life to the fullest?" Options include constant foot pain, limited mobility, missing out on activities, and feeling restricted daily. This is followed by another emotional deepener: "How is foot discomfort affecting your daily life?" with options like limiting independence and affecting relationships.

## Why it matters

This is a **double pain amplification** sequence. By asking users to articulate both the *cause* (foot pain) and the *life impact* (missing activities, losing independence), Hike forces users to connect their physical symptom to an emotional cost. This elevates the purchase decision from "do I need new shoes?" to "do I want my life back?"

The language is deliberately life-oriented, not medical. Words like "independence," "relationships," and "happiness" frame the problem as existential, not clinical. By the time users reach the product, they're not shopping for footwear — they're seeking a solution to a life problem.

## Key Insights

- Two consecutive emotional questions create compound pain awareness before any product mention
- Life-impact framing ("missing activities," "affecting relationships") raises perceived stakes beyond foot pain
- Users who articulate emotional costs are more willing to pay premium prices for solutions
- The sequence mirrors therapeutic intake interviews, creating a consultative rather than transactional feel
- No product, brand, or shoe is mentioned until step 6 — the first 5 steps are entirely about the user's pain

#### 2. Mid-Quiz Education as a Belief Shift

## What happens

After collecting condition data (step 5), Hike inserts an educational interstitial: "Most 'Comfortable' Shoes Are Weakening Your Feet — Over 80% of adults over 40 experience foot issues caused by overly cushioned or stiff shoes. Your feet are designed to move — not be restricted."

## Why it matters

This is a **paradigm shift slide** — it reframes the user's existing beliefs before presenting the product. Most foot pain sufferers think they need *more* cushioning and support. This slide tells them the opposite: their "comfortable" shoes are the problem.

The placement is surgical. It comes right after users have listed their specific conditions (plantar fasciitis, bunions, neuropathy), so they're primed to receive new information about what causes those issues. The "80% of adults over 40" statistic creates social proof for the claim while targeting the demographic.

By planting this belief *before* showing the product, users arrive at the offer already convinced that minimalist/barefoot shoes are the logical solution — not a risky alternative.

## Key Insights

- Challenges the user's existing solution (cushioned shoes) before presenting the new one (barefoot shoes)
- The "80% of adults over 40" stat normalizes the problem and targets the core demographic simultaneously
- "Your feet are designed to move — not be restricted" introduces the product philosophy as biology, not opinion
- Placed after condition capture so users connect their specific problems to the general cause
- Transforms the product from "alternative footwear" to "the correct approach" in the user's mind

#### 3. Social Proof Through Data Matching

## What happens

The results page states: "We've evaluated your answers and prepared a summary from 1,243 people similar to your profile." It then shows a line chart of foot comfort improvement over 30 days, with the claim: "Adults over 40 who switched to barefoot shoes experienced an 89% improvement in foot comfort, with some reaching up to 95% pain reduction within just 4 weeks."

## Why it matters

The "1,243 people similar to your profile" is a powerful **social proof personalization** technique. Instead of generic testimonials, it implies that Hike has data from people with the *exact same conditions and demographics* as the quiz-taker. This makes the 80% improvement projection feel like a peer-validated prediction, not a marketing claim.

The ascending line chart provides **visual proof of trajectory** — users can literally see themselves getting better over time. Combined with the specific numbers (89% improvement, 95% pain reduction, 4 weeks), it creates a concrete expectation that makes the purchase feel like a calculated decision rather than a gamble.

## Key Insights

- "1,243 people similar to your profile" creates peer-based social proof more persuasive than celebrity endorsements
- The specificity of the number (1,243 not "thousands") adds credibility through precision
- The 30-day line chart visualizes the user's future transformation, making it feel inevitable
- Specific outcome percentages (89%, 95%) give users numbers to anchor their expectations to
- Four-week timeline creates urgency: the sooner you start, the sooner you improve

#### 4. Visual Age Segmentation with Photo Tiles

## What happens

Instead of a simple age dropdown, step 3 asks "How Old Are You?" with four photo tiles showing women at different ages: 30-44, 45-59, 60-69, and 70+. Each tile shows a real woman in the age bracket wearing the same gray tank top, making age differences visually stark.

## Why it matters

This serves multiple purposes. First, **visual self-identification** is faster and more engaging than text — users instinctively click the face that looks most like them. Second, showing real women across age ranges normalizes foot pain as a common issue at every life stage, reducing stigma.

The uniform clothing across all photos keeps the focus on age differences, subtly reinforcing that this quiz is specifically designed for their demographic. It also communicates that the brand understands and represents women of all ages, not just young athletes.

## Key Insights

- Photo-based age selection has higher engagement than text dropdowns
- Seeing real women their age creates immediate brand trust and relatability
- Uniform styling across photos keeps focus on age, not appearance
- The 30-44 to 70+ range explicitly targets the 40+ demographic without excluding younger users
- Visual self-identification creates a stronger emotional connection than selecting a number

#### 5. Zero-Friction Landing with Objection Removal

## What happens

The landing page headline reads "Persistent Foot Pain? Uncover the Hidden Causes and How to Fix Them" with the subhead "Complete the 60-Second Quiz to Get Personalized Results and Free eBooks Instantly!" Below the CTA button, it explicitly states: "No Email. No Obligations." The page also features Trustpilot stars and "Over 963,000+ customers found relief in the past 12 months."

## Why it matters

Hike removes every possible friction point before the user even starts. The **"No Email. No Obligations"** line directly addresses the #1 reason people abandon quizzes: fear of being spammed. By removing this objection upfront, Hike prioritizes quiz completion over email capture — betting that users who see their results will convert at the product page.

The "963,000+ customers found relief" is massive social proof that does double duty: it validates the brand and frames the product as a medical-grade solution ("found relief," not "bought shoes"). The "60-Second Quiz" time commitment and "Free eBooks" value-add further reduce barriers to entry.

## Key Insights

- "No Email. No Obligations" eliminates the #1 quiz abandonment trigger before it arises
- Prioritizing completion over email capture suggests high confidence in end-of-funnel conversion
- "963,000+ customers found relief" uses medical language ("relief") to position shoes as a health solution
- "60-Second Quiz" sets a precise time expectation, reducing commitment anxiety
- Free eBooks create a tangible value exchange even before quiz results
- The dual CTA (top and bottom of landing) captures both quick-deciders and scroll-readers

### Onboarding Flow

**Step 1: Landing Page — Pain Hook** — Bold landing with Hike Footwear branding, Trustpilot stars, and '963,000+ customers found relief in the past 12 months.' Headline: 'Persistent Foot Pain? Uncover the Hidden Causes and How to Fix Them.' Promises a 60-second quiz with personalized results and free eBooks. 'No Email. No Obligations' removes friction upfront. Dual CTAs top and bottom.

**Step 2: Emotional Impact — Life Barriers** — 'What's holding you back from enjoying life to the fullest?' — Constant foot pain, Limited mobility, Missing out on activities, Feeling restricted daily. Opens with an emotional question rather than a medical one, framing foot pain as a life problem, not just a physical symptom.

**Step 3: Age Segmentation — Photo Tiles** — 'How Old Are You? One-Minute Personalized Quiz' — four photo tiles showing real women at age brackets 30-44, 45-59, 60-69, and 70+. Visual self-identification replaces a boring dropdown, creating instant relatability. Uniform gray tank tops keep focus on age differences.

**Step 4: Pain Deepener — Daily Life Impact** — 'How is foot discomfort affecting your daily life?' — Limiting my independence, Missing social activities, Affecting my relationships, Impacting my overall happiness. Second emotional layer that compounds the pain from step 2. Users now connect foot pain to relationship and happiness costs.

**Step 5: Condition Selector — Multi-Select** — 'What foot conditions are you dealing with?' — multi-select with Plantar Fasciitis, Neuropathy, Bunions, Lymphedema, Heel Spurs, General Foot Pain, and Other. Continue button enables multi-selection. Captures specific conditions for personalization and product recommendation logic.

**Step 6: Education — Belief Shift Interstitial** — 'Most Comfortable Shoes Are Weakening Your Feet' — educational slide stating that over 80% of adults over 40 experience foot issues from overly cushioned or stiff shoes. 'Your feet are designed to move — not be restricted.' Reframes the problem before presenting the barefoot shoe solution.

**Step 7: Previous Solutions Tried** — 'What solutions have you tried?' — Orthopedic shoes, Insoles/supports, Multiple solutions, Nothing yet. Captures product awareness and prior spending behavior. Users who've tried multiple solutions are pre-qualified as high-intent buyers willing to pay for relief.

**Step 8: Main Goal** — 'What is your main goal' — Regain independence, Increase daily activity, Reduce pain, Prevent future issues, Improve overall well-being. Five goal options range from reactive (reduce pain) to proactive (prevent future issues), capturing purchase motivation and urgency level.

**Step 9: Footwear Preferences — Visual Grid** — 'What's most important to you in footwear?' — icon-based visual grid: All-day comfort, Wide toe box (no squeezing), Zero-drop sole (natural posture), Lightweight & flexible, and more. Illustrated icons educate users on barefoot shoe features while capturing preferences. Each icon subtly introduces product USPs.

**Step 10: Processing Animation** — 'Thanks! We're processing your input...' with a circular loading animation and 'Continue To See Result →' button. Computational theater that adds perceived processing time, making results feel algorithmically generated rather than pre-set. The pause builds anticipation.

**Step 11: Personalized Results — Comfort Projection** — 'Based on your results, your FOOT COMFORT could improve up to 80% in the first month.' Shows data from '1,243 people similar to your profile' with an ascending line chart from Day 1 to Day 30. Claims 89% improvement in foot comfort with up to 95% pain reduction in 4 weeks for adults over 40 who switched to barefoot shoes.

**Step 12: Sales Page — Product Offer** — 'Easter Sale is LIVE!' banner with 50% off. Features the HF Flow minimalist shoe at $69.95 (was $140). 4.8 stars from 7,295 reviews. Women/Men toggle. Key claims: Relieves pressure on feet and joints, Developed with podiatrists, Free shipping. Product carousel shows multiple angles including anatomical sole view.

---

## ColonBroom Quiz Funnel Teardown

> See how ColonBroom's 18-step gut health quiz uses medical-grade symptom mapping, humor-driven copy, and personalized weight projections to convert users into 65%-off subscription buyers.

**Category:** Health & Wellness Supplements | **Traffic:** 600K

Clinically proven high-fiber supplement brand for gut health, weight loss, and bloating relief — positioned as a premium daily wellness routine with subscription pricing.

### Key Learnings

#### 1. Medical-Grade Symptom Mapping as Trust Architecture

## What happens

ColonBroom dedicates 8 of its 13 quiz questions to health and symptom data: current health state, gut symptoms (bloating, constipation, diarrhea), stool frequency, secondary symptoms (skin issues, bad breath, heartburn), associated conditions (fungal infections, mood disorders), allergies, medical conditions (diabetes, thyroid, gout), and digestive diseases (IBS, GERD, colitis). The quiz also screens for pregnancy and breastfeeding.

## Why it matters

This volume of health screening transforms a supplement quiz into something that feels like a **clinical intake form**. Users subconsciously elevate the brand from "fiber supplement company" to "health authority" because no ordinary product quiz would ask about GERD, diverticulitis, or oral thrush.

The safety framing is deliberate — phrases like "to ensure it's safe for you to use" and "let's ensure it's safe for you" position ColonBroom as a brand that *cares about contraindications*, borrowing the trust signals of pharmaceutical products. Users feel like the recommendation has been medically vetted for their specific situation.

## Key Insights

- 8 out of 13 questions focus on health data — an unusually high ratio that signals clinical seriousness
- Safety-first framing ("ensure it's safe for you") borrows pharmaceutical trust signals
- Screening for pregnancy, breastfeeding, and specific diseases like GERD goes far beyond typical supplement quizzes
- Each health disclosure deepens the user's psychological investment in seeing their personalized result
- The data captured enables highly targeted email sequences referencing specific conditions
- Users who disclose health conditions feel the recommendation was screened *for them specifically*

#### 2. Conversational Copy That Normalizes Taboo Topics

## What happens

ColonBroom's quiz copy is deliberately casual and warm: "Many factors can impact your well-being, but feeling full of crap is at the top of the list," "Let's get more personal. Did you know your stool can tell a lot about your gut health? Tell us how often you poop," and "Exercise is not the only way to stay active. Multiple trips to the bathroom count, too!"

## Why it matters

Gut health, bowel movements, and digestive issues are inherently embarrassing topics. ColonBroom uses **destigmatizing humor** to lower the emotional barrier. By saying "feeling full of crap" (a pun) and joking about bathroom trips as exercise, the quiz signals: we get it, we're not going to make this awkward.

This tone does two things. First, it increases completion rates — users are more likely to honestly answer questions about poop frequency, rectal itching, and constipation when the brand treats these as normal rather than clinical. Second, it creates brand affinity through personality. ColonBroom isn't a sterile health brand; it's the friend who can talk about your gut without making you cringe.

## Key Insights

- "Feeling full of crap" is a deliberate pun that normalizes gut discomfort through humor
- Casual phrasing about stool frequency ("tell us how often you poop") reduces embarrassment
- "Multiple trips to the bathroom count, too!" reframes a symptom as a lighthearted positive
- Encouragement phrases ("Keep going! You're doing amazing") maintain momentum through a long quiz
- The warm, non-judgmental tone ("It's a safe space... We're here to help, not to judge") increases honesty in body measurement inputs
- Humor-forward health brands see higher social sharing and word-of-mouth

#### 3. Personalized Weight Projection as the Conversion Trigger

## What happens

After collecting body measurements (age, height, current weight, desired weight), email, and a loading screen ("Creating your agenda..."), ColonBroom shows a personalized results page: "Fuel your weight loss with ColonBroom Premium." It displays a weight estimate chart showing the user's current weight (170 lb in April 2026) declining to their goal (150 lb by May 2026) with specific weekly loss increments (-7.7 lb, -2.3 lb).

## Why it matters

This is a **personalized outcome visualization** — the most powerful conversion element in the funnel. By using the user's *actual measurements* and *desired weight* to generate a specific timeline and trajectory, the chart feels like a custom prescription rather than a generic promise.

The declining line chart with exact pound-loss numbers at each interval creates what psychologists call **implementation intentions** — the user can mentally see themselves at each checkpoint. "I'll lose 7.7 lb in the first two weeks" is infinitely more compelling than "you'll lose weight."

The one-month timeline (April → May) is strategically short enough to feel achievable but long enough to require a subscription — directly feeding the 2-month or 4-month plan recommendation on the offer page.

## Key Insights

- Using the user's actual weight and goal weight makes the projection feel genuinely personalized
- Specific weekly loss numbers (-7.7 lb, -2.3 lb) create concrete expectations and mental checkpoints
- The declining line chart visualizes transformation as inevitable and progressive
- A one-month preview creates urgency while implying continued use for sustained results
- The chart bridges directly to the subscription recommendation: "you need at least 2 months"
- "Weight estimate" with an asterisk maintains plausible deniability while still feeling like a promise

#### 4. Gender-First Segmentation on the Landing Page

## What happens

The landing page opens with a "SPRING SALE UP TO -65% OFF!" banner, a "Clinically Proven" badge, the headline "Lose weight, not time with up to 65% OFF," benefit bullets (weight loss, fat burn, bloating relief, appetite control), press logos (Us Weekly, Men's Journal, Woman's World, Forbes Health), and a Female/Male selector at the bottom as the entry point.

## Why it matters

Starting with gender selection serves three purposes. First, it's the **lowest possible friction entry point** — everyone knows their gender, so the first click requires zero thought. This gets users into the quiz flow before any resistance can form.

Second, it immediately **personalizes the entire experience**. The female path can include pregnancy and breastfeeding questions (steps 9-10), while the male path can skip them. This makes the quiz feel intelligently routed rather than one-size-fits-all.

Third, the landing page front-loads every trust signal before the quiz even starts: clinically proven badge, 65% off anchor, benefit list, and five major press logos. Users enter the quiz already pre-sold on credibility.

## Key Insights

- Gender selection is the easiest possible first action — zero cognitive load
- Enables conditional quiz paths (pregnancy/breastfeeding questions for female path)
- Press logos (Forbes Health, Us Weekly) establish credibility before any quiz commitment
- "Clinically Proven" badge positioned above the fold borrows pharmaceutical authority
- The 65% discount is anchored before users invest any time, creating perceived deal urgency
- Benefit bullets (weight loss, fat burn, bloating, appetite) preview the quiz's diagnostic scope

#### 5. Late Email Gate With Body Measurement Lock-In

## What happens

The email capture appears at step 15 of 18 — after users have answered 13 health questions and entered their body measurements (age, height, weight, desired weight). The form simply says "Enter your email" with a marketing consent checkbox. It comes right before the loading screen and personalized results.

## Why it matters

By the time users reach the email gate, they've disclosed their poop frequency, medical conditions, allergies, digestive diseases, pregnancy status, and exact body measurements. This creates a **disclosure momentum** effect — after sharing the most intimate health data imaginable, typing an email feels trivial by comparison.

The body measurements step (13 of 13) is the final quiz question before email capture, and it's the most personally invested input. Users who type their current weight and desired weight have made an explicit goal commitment. The email gate then positions the results page as the payoff for that commitment: you've told us everything, now let us show you your plan.

## Key Insights

- Email capture after body measurements leverages disclosure momentum — email feels trivial after weight data
- 13 questions of health data create massive sunk cost before the email gate
- The "safe space" framing on measurements ("don't worry, we're here to help not to judge") increases completion
- Users who enter a desired weight have made an explicit goal commitment, increasing email conversion
- Post-email loading screen ("Creating your agenda...") rewards the email with perceived processing
- The branded toilet paper mascot on the loading screen maintains the playful tone through the gate

### Onboarding Flow

**Step 1: Landing Page — Gender Selector** — 'SPRING SALE UP TO -65% OFF!' banner with 'Clinically Proven' badge. Headline: 'Lose weight, not time with up to 65% OFF.' Benefit bullets: weight loss, fat burn, bloating relief, appetite control. Press logos: Us Weekly, Men's Journal, Woman's World, Forbes Health, inspiremore. Female/Male selector at bottom as the quiz entry point.

**Step 2: Current Health State** — 'Hey, let's get to know each other better. Please share your current health state:' — Poor, Could be better, Average, Pretty good, Feeling great! Step 1 of 13. Warm conversational opener that establishes baseline health while setting a friendly, non-clinical tone for the quiz.

**Step 3: Gut Symptoms — Multi-Select** — 'Many factors can impact your well-being, but feeling full of crap is at the top of the list. Are you prone to:' — Bloating, Weight-gain, Constipation, Diarrhea, Menopause symptoms. Step 2 of 13. The 'full of crap' pun normalizes digestive talk. Multi-select captures symptom breadth.

**Step 4: Stool Frequency** — 'Let's get more personal. Did you know your stool can tell a lot about your gut health? Tell us how often you poop:' — Everyday, Twice a week, Once a week, Less than once a week. Step 3 of 13. Educational framing turns an awkward question into a health insight moment.

**Step 5: Secondary Symptoms** — 'There is more to your gut than just pooping. Premium quality ingredients can help you from the inside out. Do you experience any of these symptoms?' — Skin issues (acne, eczema, rashes), Bad breath, Heartburn, Rectal or vaginal itching, and more. Step 4 of 13. Connects gut health to unexpected symptoms, expanding the product's perceived value.

**Step 6: Associated Conditions** — 'Other side effects may be associated with your gastrointestinal issues. Let us know if you've ever experienced the following:' — Skin and nail fungal infections, Oral thrush, Mood disorders, Digestive problems, Skin issues. Step 5 of 13. Further expands the gut-health connection to seemingly unrelated conditions.

**Step 7: Allergies & Sensitivities** — 'Using ColonBroom Premium should be a top-notch experience. To ensure it's safe for you to use, please let us know if you have any allergies or sensitivities:' — Wheat and gluten, Lactose intolerance, Nuts, Fish, and more. Step 6 of 13. Safety framing positions the brand as responsible and pharmaceutical-grade.

**Step 8: Medical Conditions** — 'Taking ColonBroom Premium on a daily basis could be beneficial for your overall health. But first, let's ensure it's safe for you. Do you have any of the following medical conditions?' — Diabetes, Thyroid issues, Gout, None. Step 7 of 13. Medical screening builds trust while capturing high-value health segmentation data.

**Step 9: Digestive Diseases** — 'Keep going! You're doing amazing. Let us know if you have (or have had) any of the following diseases of the digestive tract:' — Gastritis, IBS, GERD, Diverticulitis, Colitis. Step 8 of 13. Deep clinical data capture with an encouraging 'keep going!' to maintain momentum through the long health section.

**Step 10: Pregnancy Check** — 'Are you currently pregnant?' — Yes/No. Step 9 of 13. Simple binary safety screen. Shown on the female quiz path. Reinforces ColonBroom's responsible, health-first positioning.

**Step 11: Breastfeeding Check** — 'Are you currently breastfeeding?' — Yes/No. Step 10 of 13. Second binary safety screen for the female path. Together with the pregnancy question, this mirrors actual clinical intake protocols.

**Step 12: Activity Level** — 'Physical activity can influence your mood, weight, bowel movements, and more. How active are you?' — I workout, I'm in light mode, Physically inactive, Other. Step 11 of 13. Shifts from health screening to lifestyle data. Educational preamble connects exercise to gut health.

**Step 13: Daily Active Time** — 'Exercise is not the only way to stay active. Multiple trips to the bathroom count, too! How much time do you spend doing something active each day?' — Very little to 90+ minutes. Step 12 of 13. The bathroom joke keeps the tone light while capturing useful lifestyle data for weight projections.

**Step 14: Body Measurements** — 'Just one more to go! To complete the quiz, please enter your measurements. It's a safe space, so don't worry. We're here to help, not to judge.' Step 13 of 13. Imperial/Metric toggle. Captures age, height, current weight, and desired weight. The reassuring copy reduces drop-off on the most sensitive input.

**Step 15: Email Capture** — 'Enter your email' with a marketing consent checkbox. Clean, minimal design. Appears after all 13 quiz questions and body measurements — by this point users have disclosed intimate health data, making email feel trivial. The consent checkbox enables compliant follow-up marketing.

**Step 16: Loading — Creating Your Agenda** — 'Creating your agenda...' with a branded toilet paper mascot illustration and progress bar. The playful character maintains ColonBroom's humorous tone through the computational theater pause. Builds anticipation for personalized results while implying algorithmic processing.

**Step 17: Personalized Weight Projection** — 'Fuel your weight loss with ColonBroom Premium.' Shows a personalized weight estimate chart: current weight (170 lb, April 2026) declining to goal weight (150 lb, May 2026) with specific loss increments (-7.7 lb, -2.3 lb). Uses the user's actual measurements to create a concrete visual timeline. 'SEE THE PRODUCT' CTA.

**Step 18: Sales Page — Subscription Offer** — 'Spring Sale — Save up to 65%.' 'Our recommendation for achieving your goals' — recommends a 2-Month subscription plan for effective results or 4-Month plan for a longer-lasting routine. Shows two ColonBroom Premium Blend jars with a 'Secret Gift' badge. Clinically Proven, Vegan, Gluten-Free, Non-GMO badges. One-Time Purchase / Subscribe (Save 65%) toggle. Best Value and Longer-Lasting Routine tabs.

---

## Mars Men Quiz Funnel Teardown

> See how Mars Men's 17-step testosterone quiz uses dual loading screens, before/after social proof, and masculine identity framing to convert men into 50%-off supplement buyers with a 90-day guarantee.

**Category:** Men's Health Supplements | **Traffic:** 1.2M

Natural testosterone support supplement brand for men, positioned as a scientifically-backed T-Revival System with 8 clinical-dose ingredients for energy, strength, focus, and drive.

### Key Learnings

#### 1. Dual Loading Screens Create a Two-Phase Assessment Feel

## What happens

Mars Men uses two separate loading/analysis screens within the same funnel. The first (step 10) reads "Analyzing your health profile..." with a spinner and text: "Based on your responses, we're building a comprehensive assessment of your hormonal health." The second (step 13) reads "Building your profile..." with three sequential stages: "Analysing your profile ✓, Gathering relevant data ✓, Finalizing calculations..."

Crucially, the quiz *continues after the first loading screen* — two more questions (family history, processed food intake) appear between the two loading steps.

## Why it matters

This **dual-phase architecture** creates the illusion of a sophisticated multi-stage assessment. The first loading screen processes the symptom data (energy, stress, sleep, body composition). The second processes the risk factor data (family history, diet). By splitting the analysis, Mars Men makes it feel like two distinct diagnostic algorithms are running.

The questions that appear *between* loading screens feel more important because they come after an "initial analysis." Users think: "they've already started processing my data, and now they need more information to complete the picture." This elevates two routine questions (family history, diet) into critical diagnostic inputs.

## Key Insights

- Two loading screens make a single quiz feel like a multi-phase clinical assessment
- Questions placed between loading screens feel more critical and diagnostic
- The first loader's copy ("comprehensive assessment of hormonal health") primes users to take remaining questions seriously
- The second loader's three-stage progress (Analysing → Gathering → Finalizing) adds perceived computational depth
- Users experience two anticipation peaks instead of one, increasing perceived value of the results
- This pattern is unique among the funnels analyzed — most use a single loading screen before results

#### 2. Testimonial-First Landing With Embedded Age Gate

## What happens

The landing page opens with "Find Out What's Really Happening With Your Testosterone" and immediately shows a customer testimonial: "I was skeptical at first that an online quiz could help me get my T levels back, but it was super easy, took maybe a minute, and... Let's just say me and my wife are VERY happy I took this quiz. — ADAM, Verified Customer." Below the testimonial sits the age gate: "How old are you?" with four brackets.

## Why it matters

Most quiz funnels open with a headline and benefits list. Mars Men leads with a **testimonial that addresses the exact objection** the user is thinking: "Can an online quiz really help with testosterone?" Adam's quote preemptively overcomes skepticism while dropping an innuendo about sexual results ("my wife is VERY happy") — the most emotionally compelling benefit for this demographic.

By placing the testimonial *above* the age gate, every user reads it before making their first click. The "Verified Customer" label adds credibility, and the casual tone ("Let's just say...") feels authentic rather than scripted. The age gate beneath it becomes a natural next action rather than a cold start.

## Key Insights

- Leading with a testimonial addresses quiz skepticism before it forms
- The sexual innuendo ("my wife is VERY happy") targets the highest-emotion benefit without being explicit
- "Verified Customer" label adds credibility to the casual, authentic-sounding tone
- Placing the testimonial above the first question ensures 100% read-through
- The "2-minute assessment" framing combines with "took maybe a minute" in the testimonial to double-commit on time investment
- Age brackets are listed in descending order (50+ first) — targeting the highest-concern demographic first

#### 3. Afternoon Energy as a Testosterone Proxy

## What happens

Step 4 asks: "How's your energy at 3pm compared to when you wake up?" with four options ranging from "Completely drained — Need caffeine or a nap" to "Same energy — No afternoon crash." Each option includes both a severity label and a descriptive subtitle.

## Why it matters

This is a **symptom-as-proxy** question — it never mentions testosterone, but afternoon energy crashes are a classic low-T symptom. By framing it as a specific, relatable moment (3pm energy), Mars Men takes an abstract hormonal concept and makes it tangible. Every man has experienced the afternoon slump; now they're connecting that feeling to a potential testosterone issue.

The dual-line format (bold label + descriptive subtitle) is clever. "Completely drained" is the emotional hook; "Need caffeine or a nap" is the relatable detail that makes users think "that's literally me." This specificity creates a stronger self-identification response than a generic "rate your energy level."

## Key Insights

- "3pm energy" is a specific, universal moment that makes an abstract symptom concrete and measurable
- Users don't need to understand testosterone science — they just need to recognize their own afternoon
- Dual-line format combines emotional labels with relatable behaviors for stronger self-identification
- The emoji progression from exhausted to energetic creates a visual severity scale
- Most men will select one of the three "tired" options, validating their concern before seeing results
- This question alone could justify the quiz: "you need more energy" → "we have a testosterone solution"

#### 4. Before/After Social Proof With Specific User Count

## What happens

After 6 questions about symptoms and goals, step 7 shows: "You are in the right place! 💪 Over 429,576 men have reclaimed their T, drive, and physique thanks to our NEW Scientific, Natural T-Revival System!" This is accompanied by a user-submitted before/after mirror selfie showing visible body transformation.

## Why it matters

The specificity of "429,576 men" (not "over 400K") creates the **precision credibility effect** — oddly specific numbers feel more real than round ones. Combined with the word "reclaimed" (implying they lost something and got it back), it hits the core emotional driver: this isn't about getting something new, it's about restoring what's rightfully yours.

The before/after mirror selfie is deliberately informal — it looks like a real user photo, not a studio shot. This authenticity is more persuasive than polished transformation imagery because it says "a guy just like you did this." The visible muscle definition in the after photo provides visual proof of the testosterone-muscle connection.

## Key Insights

- "429,576" is specifically precise — odd numbers feel more credible than round ones
- "Reclaimed" triggers loss aversion: you're not buying a supplement, you're taking back what's yours
- User-submitted mirror selfies feel more authentic than studio transformation photos
- "NEW Scientific, Natural T-Revival System" combines novelty, science, and naturalness in one phrase
- Placed at the midpoint (step 7 of 17) as momentum insurance after vulnerability-heavy symptom questions
- The 💪 emoji adds masculine energy without feeling clinical

#### 5. Masculine Identity Framing in the Results Sequence

## What happens

The profile summary shows "Level of T Decline: HIGH" with a gauge, "Testosterone Assessment: DECLINING," and four metrics: Decline Pattern (Progressive), Room for Improvement (High), Root Cause (Cortisol Environmental), Quality of Life Impact (Substantial). The projection page then reads: "The last solution you'll ever need to feel like a man again" with a chart showing T-levels rising from LOW to a "GOAL: 60% INCREASE IN T" over 3 months.

## Why it matters

Mars Men weaponizes **masculine identity threat** as its core conversion lever. The profile doesn't just say "your testosterone is low" — it says your decline is "Progressive" (getting worse), the impact on your quality of life is "Substantial," and the root cause is environmental (implying the modern world is doing this to you).

The projection headline — "The last solution you'll ever need to feel like a man again" — is the most emotionally charged line in any of the funnels analyzed. It directly links testosterone to masculine identity ("feel like a man") and implies that users have *lost* their manhood. The "again" at the end creates a before/after narrative: you were a man, now you're not, but you can be again.

## Key Insights

- "Progressive" decline pattern implies urgency: it's getting worse every day you wait
- "Cortisol Environmental" as root cause externalizes blame — it's not your fault, it's the modern world
- "Quality of Life Impact: Substantial" validates the user's experience while amplifying concern
- "Feel like a man again" is a direct identity threat/restoration play — the strongest emotional trigger
- The T-level chart with "YOU ARE HERE" in the LOW zone creates visual urgency
- "60% INCREASE IN T" is a specific, measurable promise that makes the supplement feel clinical
- 90-day timeline matches the product supply (90-Day Supply), creating a natural purchase cycle

### Onboarding Flow

**Step 1: Landing — Testimonial + Age Gate** — 'Find Out What's Really Happening With Your Testosterone' — 2-minute assessment promise. Customer testimonial from Adam about reclaiming T levels and sexual innuendo ('my wife is VERY happy'). Age gate: 50+, 40-49, 30-39, 20-29 in descending order, targeting highest-concern demo first.

**Step 2: Primary Concern** — 'What's your biggest concern about your masculine health right now?' — Energy levels, Muscle mass and strength, Sex drive and performance, Mental focus and clarity, Weight Loss. Emoji icons for each option. Captures the primary purchase motivation for product positioning.

**Step 3: Stress Symptoms** — 'Do you have stress symptoms during the day? Like feeling tired, cranky, foggy, or moody.' — Yes/No. The descriptors (cranky, foggy, moody) normalize these as stress symptoms rather than personal failings, making 'Yes' easy to select.

**Step 4: Afternoon Energy Level** — 'How's your energy at 3pm compared to when you wake up?' — Completely drained (Need caffeine or a nap), Noticeably lower (Afternoon slump hits hard), Slightly tired (Still functional but slower), Same energy (No afternoon crash). Dual-line format with emoji severity scale. Tangible proxy for testosterone levels.

**Step 5: Timeline of Changes** — 'When did you start noticing changes to your energy and drive?' — Over a year ago, In the past year, In the past few months, Not sure. Captures urgency and chronicity for segmentation.

**Step 6: Expected Results — Multi-Select** — 'What results are you expecting from increased testosterone? (Choose all that apply)' — Higher energy that lasts all day, Increased muscle mass and strength, Better sex drive and performance, Improved mental clarity and focus, All of the above. Multi-select with Continue button.

**Step 7: Social Proof — Before/After** — 'You are in the right place! 💪 Over 429,576 men have reclaimed their T, drive, and physique thanks to our NEW Scientific, Natural T-Revival System!' Before/after mirror selfie showing body transformation. Midpoint social proof with deliberately specific user count and informal user photo.

**Step 8: Body Composition** — 'How would you describe your current body composition?' — Lean and muscular, Average build, Soft with some muscle, Overweight/out of shape. Self-assessment captures fitness baseline and body image perception for personalized messaging.

**Step 9: Sleep Quality** — 'How many hours of quality sleep do you get per night?' — Less than 5, 5-6, 7-8, More than 8. Sleep directly affects testosterone production — capturing this data supports the 'Cortisol Environmental' root cause classification.

**Step 10: First Loading — Health Profile Analysis** — 'Analyzing your health profile...' with spinner. 'Based on your responses, we're building a comprehensive assessment of your hormonal health and identifying the key factors affecting your energy and vitality.' First of two loading screens — creates a dual-phase assessment feel.

**Step 11: Family History** — 'Do you have a family history of diabetes, heart disease, or metabolic issues?' — Yes, No, Not Sure. 'Why we ask' explainer: these conditions share root causes with low testosterone — insulin resistance, inflammation, and metabolic dysfunction. Post-loading question feels more diagnostic.

**Step 12: Processed Food Intake** — 'How often do you eat processed foods?' — Daily, Several times a week, Occasionally (Mostly whole foods), Rarely (I avoid processed foods). 'Why we ask' explainer: processed foods contain chemicals and additives that disrupt hormone production, linked to lower testosterone in multiple studies.

**Step 13: Second Loading — Building Profile** — 'Building your profile...' with three sequential stages: Analysing your profile ✓, Gathering relevant data ✓, Finalizing calculations (loading). Second loading screen adds computational theater and distinguishes the risk factor analysis from the symptom analysis.

**Step 14: Testosterone Profile Summary** — 'Summary of your Profile' — Level of T Decline gauge (HIGH). 'Testosterone Assessment: DECLINING — Your testosterone production is significantly below peak. This results from accumulated stress, metabolic slowdown, and environmental toxins.' Four metrics: Decline Pattern (Progressive), Room for Improvement (High), Root Cause (Cortisol Environmental), Quality of Life Impact (Substantial).

**Step 15: T-Level Projection Timeline** — 'The last solution you'll ever need to feel like a man again.' Chart showing T-Levels from LOW ('YOU ARE HERE') rising to 'GOAL: 60% INCREASE IN T' over Today → April → May → June. 'Based on your answers, we expect you to visibly increase energy, strength and masculine drive by Feb 28st.' Identity-driven framing with specific improvement projection.

**Step 16: Sales Pitch — Guarantee + Social Proof** — 'You'll Reclaim Your Energy & Drive With Just a 90-Day Supply from Mars Men.' Full money-back guarantee if goals aren't achieved. '91% of Users Reported Higher Energy Levels' stat with Over 1.2 Million Sold badge. Product shown with four benefit pillars: Skyrocket Energy, Enhance Focus, Supercharge Strength, Amplify Passion. 'CLAIM YOUR DISCOUNT' CTA.

**Step 17: Product Page — 50% Off** — 'GET 50% OFF' — Mars Men Natural Testosterone Support. $59 (was $118), 50% OFF FOR LIFE, no code required. 80% recommend (based on 12-week triple-blind clinical study). 8 Ingredients at Full Clinical Doses, Zero Fillers, Made in USA & Third-party Tested, 90-Day Money-Back Guarantee, Free Shipping. Product carousel with dark premium styling.

---

## Spartan Quiz Funnel Teardown

> See how Spartan's 18-step hair loss quiz uses social visibility framing, 'Why we ask' explainers, and a DHT-focused hair profile to convert men into Root Activator Shampoo bundle buyers at 66% off.

**Category:** Men's Hair Care | **Traffic:** 1M

Men's hair loss brand selling a DHT-blocking Root Activator Shampoo, positioned as a simple 2-minute hair wash ritual for thicker, fuller hair in as little as 10 weeks.

### Key Learnings

#### 1. "Why We Ask" Explainers Build Trust Through Transparency

## What happens

Two questions in the quiz — "Does hair loss run in your family?" and "How often do you tend to experience stress?" — include a "Why we ask" expandable section below the options. The family history explainer says: "The most common cause of hair loss is hereditary hair loss. So if an immediate family member has a history of hair loss, there's a good chance it'll affect you too." The stress explainer mentions telogen effluvium by name.

## Why it matters

Most quizzes ask questions without explaining *why*. Spartan breaks this pattern by showing its reasoning, which achieves three things. First, it **educates users on hair loss science** (DHT, telogen effluvium) — this positions the brand as an authority rather than just a seller. Second, it **justifies the question's relevance**, reducing the "why do they need this?" friction that causes drop-offs. Third, it **pre-loads the mechanism story** — by the time users see "Trigger: DHT Sensitivity" on their profile, they already understand what DHT is.

## Key Insights

- "Why we ask" sections transform intrusive questions into educational moments
- Using clinical terms (telogen effluvium) borrows medical authority without requiring credentials
- Transparency about data usage reduces the "why are they asking this?" abandonment trigger
- The explainers pre-load the product mechanism: DHT blocking becomes the logical solution to DHT sensitivity
- Only 2 of 13 questions have explainers — used sparingly on the most sensitive topics (genetics, stress)

#### 2. The Forge/Spartan Template: Identical Funnel Architecture Across Verticals

## What happens

Spartan's funnel follows the exact same structural template as Forge Men's skincare quiz: photo-tile age gate → problem questions → lifestyle questions → social proof interstitial → profile questions → Hair Profile Summary (with identical gauge design) → improvement timeline bar chart → micro-commitment pop-up ("Are you determined to finally stop your hair loss?") → loading screen (Goals ✓, Custom Fit ✓, Selected Essentials ✓) → sales page with profile echo.

## Why it matters

This reveals a **proven funnel template** being deployed across men's DTC verticals. The identical structure — down to the profile gauge design, the bar chart style, and the pop-up interrupt pattern — suggests this template has been A/B tested and optimized at scale. The only variables are the questions, copy, and product.

This is significant for funnel builders: rather than inventing new quiz architectures, top-performing DTC brands are using **battle-tested templates** and simply swapping in vertical-specific content. The psychological sequence (problem → depth → social proof → diagnosis → projection → commitment → offer) works regardless of whether you're selling skincare or shampoo.

## Key Insights

- Same template powers both Forge (skincare) and Spartan (hair loss) — proof of a scalable quiz architecture
- Profile Summary page is identical: gauge + 4 metrics (aging type, room for improvement, trigger, impact)
- The micro-commitment pop-up pattern is reused verbatim — only the question text changes
- Loading screen with three progress bars (Goals, Custom Fit, Selected Essentials) is templated
- Sales page echoes profile data (Aging reason: Extrinsic, Opportunity: High) in both funnels
- The template's effectiveness comes from its psychological sequence, not its visual design

#### 3. Severity Framing Through Social Visibility

## What happens

Step 4 asks "How much hair have you lost?" with three options, each accompanied by a social visibility descriptor: "A lot — It's obvious to everyone," "Some — Those close to me notice," "A little — Only I notice." Instead of medical severity scales, Spartan frames hair loss severity through *who else can see it*.

## Why it matters

This is **social anxiety framing** — the most emotionally charged way to measure hair loss severity. Medical scales (Norwood, Hamilton) are clinical and detached. But "it's obvious to everyone" triggers the user's deepest insecurity: public visibility.

Each option escalates the social stakes. "Only I notice" → "Those close to me notice" → "It's obvious to everyone" maps directly to increasing social anxiety. Users who select "A lot" have now articulated their worst fear, priming them to invest heavily in a solution. Even "A little — Only I notice" implies *I'm watching it happen*, which creates prevention urgency.

## Key Insights

- Social visibility framing is more emotionally activating than clinical scales
- "It's obvious to everyone" triggers the public perception anxiety that drives hair loss purchases
- Even the mildest option ("Only I notice") implies active monitoring and growing concern
- The three-tier structure ensures every user feels their situation is worth addressing
- This data enables targeted email: "We know you're worried others are noticing..." messaging
- Avoids medical terminology that might make users feel they need a doctor instead of a product

#### 4. Mid-Funnel Social Proof as Momentum Insurance

## What happens

After 6 questions about hair loss specifics and goals, step 7 shows a full-screen social proof interstitial: "1.4 Million people have chosen Spartan" with an orbital graphic of diverse men's faces arranged in concentric circles around a central avatar. A Continue button advances the quiz.

## Why it matters

This is **momentum insurance** — placed exactly at the point where users might start questioning whether to continue. After disclosing personal hair loss details (where, how much, when it started), users experience a vulnerability hangover. The social proof slide says: 1.4 million other men did exactly what you're doing, and they chose Spartan.

The orbital avatar graphic is visually clever — it suggests a community of diverse men rather than a faceless number. The centered avatar makes the user feel like they're joining an inner circle, not just a customer list. Placed at the midpoint (step 7 of 18), it's the psychological equivalent of a rest stop.

## Key Insights

- Placed after the most vulnerable questions (hair loss location, severity, timeline) to combat drop-off
- "1.4 Million people have chosen Spartan" uses "chosen" — implying active decision, not passive purchase
- The orbital avatar design creates a visual community that feels inclusive and masculine
- Full-screen format forces attention — users can't scroll past it
- Acts as a midpoint reset: validates the quiz process before moving into lifestyle questions
- No product mention — purely about belonging to a community of men taking action

#### 5. The "Skip This Quiz" Paradox

## What happens

The landing page includes a prominent "SKIP THIS QUIZ" link directly below the headline "How old are you?" — offering users an explicit escape route before they even start.

## Why it matters

Counterintuitively, showing an exit *increases* quiz completion rates. This is the **door-in-the-face technique** adapted for digital funnels. By making the quiz feel optional ("you can leave anytime"), users who choose to stay experience **self-selected commitment** — they're continuing because they chose to, not because they were forced into a flow.

The "SKIP THIS QUIZ" link likely redirects to the product page, capturing impatient buyers who don't want a quiz but do want the product. Meanwhile, everyone who stays past step 1 has made an active choice to invest their time, which dramatically increases downstream completion and conversion rates.

## Key Insights

- Offering an explicit exit paradoxically increases quiz engagement through self-selected commitment
- Users who choose to stay feel autonomous, reducing the "trapped in a funnel" friction
- The skip link likely captures direct-to-product buyers who would have bounced from a mandatory quiz
- Placed on step 1 only — by step 2, users are committed and the option disappears
- Creates two conversion paths: quiz → offer (high engagement) and skip → product page (high intent)
- The bold underline styling makes it visible but secondary to the photo-tile age options

### Onboarding Flow

**Step 1: Age Gate — Photo Tiles** — 'How old are you?' with four photo tiles showing men at age brackets: 20-29, 30-39, 40-49, 50+. Includes a prominent 'SKIP THIS QUIZ' link for direct-to-product buyers. Terms of Use and Privacy Policy consent below. Visual self-identification as the entry point.

**Step 2: Hair Loss Location** — 'Where on your head are you losing your hair or experiencing thinning?' — Hairline, Crown, A bit of both, Patchy (coin-sized bald spots), Nowhere yet but I'd like to prevent future hair loss. Icon illustrations for each option. The prevention option captures users who haven't lost hair yet.

**Step 3: Dandruff Symptoms** — 'Do you experience dandruff symptoms on your scalp? Flaking, itching, redness, or burning.' — Yes/No. Simple binary question that captures scalp health data for product recommendation and follow-up content about scalp conditions.

**Step 4: Hair Loss Severity** — 'How much hair have you lost?' — A lot (It's obvious to everyone), Some (Those close to me notice), A little (Only I notice). Social visibility framing turns a clinical question into an emotional one. Each option escalates the social anxiety trigger.

**Step 5: Timeline of Changes** — 'When did you start noticing changes to your hair?' — Over a year ago, In the past year, In the past few months, Not sure. Captures urgency level — longer timelines suggest chronic loss while recent changes suggest acute triggers.

**Step 6: Treatment Goals — Multi-Select** — 'What results are you expecting from your treatment? Choose as many as you'd like.' — A stronger defined hairline, Visibly thicker fuller hair, More scalp coverage, Keep the hair I have, All of the above. Multi-select captures goal breadth. 'All of the above' is a high-intent signal.

**Step 7: Social Proof — 1.4 Million Users** — '1.4 Million people have chosen Spartan' with an orbital avatar graphic showing diverse men's faces in concentric circles. Full-screen social proof interstitial placed at the midpoint to combat vulnerability-driven drop-off after disclosing hair loss details.

**Step 8: Hair Type** — 'What's your hair type?' — Straight or wavy, Curly or coily, Textured or processed, I don't have hair. Captures hair characteristics for product formulation matching. The 'I don't have hair' option acknowledges fully bald users without excluding them.

**Step 9: Hair Length** — 'How long is your hair?' — Buzzed, shaved, or bald, Short, Medium, Long. Hair length affects product usage amount and application method — practical data that makes the recommendation feel tailored.

**Step 10: Daily Hair Routine Time** — 'How much time do you spend on your hair every day?' — Less than 5 minutes, 5-10 minutes, 10+ minutes. Subtext: 'We offer treatments that are quick, simple, and work with your routine.' Pre-frames the product as low-effort regardless of answer.

**Step 11: Motivation Transition — Before/After** — 'A busy schedule doesn't have to stop you from looking and feeling years younger.' Before/after composite image of an older man. Subtext promises a personalized haircare routine based on quiz answers. Bridges from data collection to the diagnostic results phase.

**Step 12: Family History** — 'Does hair loss run in your family?' — Yes, No, Not sure. Includes a 'Why we ask' explainer about hereditary hair loss being the most common cause. Transparency builds trust while educating on genetics and DHT.

**Step 13: Stress Level** — 'How often do you tend to experience stress?' — All the time, Sometimes, Rarely, Not sure. 'Why we ask' explainer mentions telogen effluvium by name — stress-triggered hair loss that interrupts growth cycles. Clinical terminology builds authority.

**Step 14: Hair Profile Summary** — 'Summary of your Hair Profile' — Level of hair loss gauge marked HIGH (red zone). Four metrics: Aging type (Extrinsic), Room For Improvement (High), Trigger (DHT Sensitivity), Impact on Appearance (Noticeable). Photo of a man with thinning hair. Clinical diagnostic presentation that mirrors medical assessments.

**Step 15: Growth Timeline Projection** — 'The last plan you'll ever need to achieve a full head of hair.' Bar chart showing hair thickness improvement from April to September 2026. 'Based on your answers, we expect you to visibly increase hair thickness and hair health by September 2026.' Six-month timeline creates urgency to start now.

**Step 16: Micro-Commitment Pop-Up** — Mid-loading interruption: 'Are you determined to finally stop your hair loss?' with Yes/No buttons. Commitment and consistency play — tapping 'Yes' creates psychological alignment with purchasing. Same pattern as Forge's confidence pop-up.

**Step 17: Plan Loading Screen** — Three progress bars: Goals ✓, Custom Fit ✓, Selected Essentials ✓. Submit button. Computational theater that makes the product recommendation feel algorithmically assembled from quiz data. Identical template to Forge's loading screen.

**Step 18: Sales Page — Bundle Offer** — 'BUNDLE & SAVE UP TO 66%.' Hair Profile Matched badge with Aging reason (Extrinsic) and Opportunity (High) echoed from the profile. Spartan Root Activator Shampoo triple-bottle display with before/after photos. Rated 4.7/5 by 18,250+ happy customers. Positioned as a '2-Minute Hair Wash Ritual' for thicker, fuller hair in 10 weeks. USPs: Follicle Activation, DHT Block, Strengthening.

---

## Liven Quiz Funnel Teardown

> See how Liven's massive 42-step well-being quiz uses 26 psychological questions, triple authority stacking, and a scratch-to-reveal discount to convert users into subscription plan buyers for their mental health app.

**Category:** Mental Health & Self-Development | **Traffic:** 4M

Digital well-being management platform offering personalized self-development plans based on behavioral science research from Harvard, Oxford, and Cambridge.

### Key Learnings

#### 1. The 26-Question Psychological Assessment as Product Differentiation

## What happens

Liven's quiz contains 26 distinct questions covering energy levels, procrastination, focus, worry, mood swings, emotional harmony, emotional expression, task overwhelm, decision-making, fear of failure, compliment acceptance, social insecurity, partner overthinking, people-pleasing, motivation, well-being areas, morning habits, physical activity, habits to quit, sleep quality, life stressors, happiness goals, plan priorities, behavioral technique knowledge, specialist referral, and daily time commitment. The quiz uses three different input formats: frequency scales (Often/Sometimes/Rarely), Likert agreement scales (Strongly disagree → Strongly agree), and multi-select checklists.

## Why it matters

This isn't a quiz — it's a **psychometric intake assessment** disguised as an onboarding flow. The depth and variety of question types signal that Liven is a serious mental health tool, not a generic wellness app. Users completing 26 deeply personal questions about overthinking, insecurity, and fear of failure undergo what psychologists call **therapeutic disclosure** — the act of articulating these struggles is itself therapeutic.

The three different input formats prevent survey fatigue. Switching from frequency scales to Likert thumbs-up/down to multi-select checklists keeps the experience varied despite the extreme length. Each format shift feels like a new section of the assessment.

## Key Insights

- 26 questions is 2-3x the length of any other funnel analyzed — possible because the product is digital, not physical
- Three input formats (frequency, Likert, multi-select) prevent monotony in an unusually long quiz
- Questions about partner overthinking, compliment rejection, and social insecurity touch therapy-level topics
- The therapeutic disclosure effect means users feel better just from answering — attributing that to Liven
- Extreme depth creates massive sunk cost: abandoning at question 20 of 26 feels psychologically impossible
- Each answer provides genuine personalization data for the behavioral plan content

#### 2. Triple Authority Stacking: Universities, Expert, and Community

## What happens

Liven deploys three distinct authority signals in sequence. First, an education interstitial (step 27): "Liven was developed using scientific practices — Your journey is based on decades of research" with Harvard, Oxford, and Cambridge logos. Second, an expert endorsement (step 30): "Your plan will be reviewed by our science team" with a testimonial from Tara Passaretti, Licensed Mental Health Counselor, plus a Thoughts/Feelings/Behavior diagram. Third, a community slide (step 31): "Join over 2,500,000 people" on a world map.

## Why it matters

This is **authority stacking** — layering three different trust signals (academic, professional, social) in rapid succession to create an overwhelming credibility case. Each type of authority appeals to a different skepticism:

- **Academic authority** (Harvard, Oxford, Cambridge): "Is this scientifically valid?"
- **Professional authority** (Licensed Counselor): "Is this clinically safe?"
- **Social authority** (2.5M users): "Are other people actually using this?"

By addressing all three objections in sequence, Liven leaves no skepticism unresolved before the email capture and payment wall.

## Key Insights

- Three authority types in three consecutive steps creates a crescendo of credibility
- University logos borrow decades of institutional trust without requiring specific study citations
- A named, licensed counselor with photo and credentials adds clinical legitimacy
- The Thoughts/Feelings/Behavior CBT triangle signals evidence-based therapeutic approach
- 2.5M community on a world map normalizes seeking mental health support globally
- This triple stack appears right before email capture — maximizing trust at the conversion gate

#### 3. The Scratch-to-Reveal Discount as Gamified Conversion

## What happens

After the personalized plan reveal, Liven shows a scratch card: "Scratch & save on your Well-being Management Plan — A little boost, right when you need it." Users physically swipe to "scratch" a golden ticket, revealing "Your discount is 50% on your personal Well-being Management Plan" with confetti animation.

## Why it matters

This is **gamified price anchoring** — by making users physically interact to reveal their discount, the 50% off feels like something they personally *won* rather than a standard promotion. The scratch card mechanic triggers the same dopamine reward as a lottery win, creating a positive emotional spike right before the payment decision.

The "A little boost, right when you need it" copy frames the discount as a gift from the brand at a moment of vulnerability (after seeing their HIGH negative effects profile). The confetti animation amplifies the reward feeling, making the 50% off feel special and time-limited even if every user gets it.

## Key Insights

- Physical scratch interaction creates ownership of the discount — "I revealed this, it's mine"
- Scratch card mechanic triggers dopamine reward associated with winning/discovering
- Placed after the well-being profile (HIGH negative effects) — discount arrives when urgency is highest
- Confetti animation creates an emotional peak right before the pricing decision
- "A little boost, right when you need it" personalizes the discount as care, not just marketing
- Users who physically uncover a deal feel more compelled to use it than those shown a banner

#### 4. Personalized Name Integration Throughout the Funnel

## What happens

After email capture (step 33), Liven asks "What's your first name?" (step 34). From this point forward, the user's name appears in every subsequent screen: "Summary of your Well-being Profile" → "Clarflow, Your personal Well-being Management Plan is ready!" → "Clarflow, Scratch & save on your Well-being Management Plan" → the sales page comparison.

## Why it matters

Name personalization after the email gate creates a **relationship escalation** moment. Before the name capture, the quiz is impersonal — "your well-being," "your profile." After, it becomes a one-on-one conversation: "Clarflow, your plan is ready." This mirrors how a therapist transitions from intake forms to first-name treatment.

Critically, the name is captured *after* email — meaning Liven has both the email and name for highly personalized follow-up campaigns. But the primary function is in-quiz: seeing your name on the results page, the plan reveal, and the discount makes the entire offer feel custom-built for you specifically, not a generic template.

## Key Insights

- Name captured after email — sequencing ensures both data points are collected before the paywall
- Every post-name screen uses the first name, creating an escalating sense of personal attention
- "Clarflow, Your personal Well-being Management Plan is ready!" feels like a therapist addressing you
- Name on the scratch card ("Clarflow, Scratch & save...") makes the discount feel personally assigned
- Personalized screens have higher conversion rates than generic ones — the name is the simplest lever
- Follow-up emails can now use first name + quiz data for hyper-personalized sequences

#### 5. Before/After Identity Transformation on the Sales Page

## What happens

The final sales page shows a side-by-side comparison: "Now" (man looking stressed, hunched) vs "Your Goal" (same man smiling, confident). Below each image, three metrics are compared: Energy level (Low → High), Well-being level (Weak → Strong), Self-esteem level (Low → High). The pricing appears beneath: 7-Day Trial at $3.08/day or 4-Week Plan at $1.62/day (Most Popular).

## Why it matters

This is **identity-level before/after framing** for a digital product — an approach borrowed from physical transformation funnels (weight loss, skincare) but applied to mental health. The same person in different emotional states is more persuasive than abstract benefit lists because it shows transformation as a single visual.

The three metric bars (energy, well-being, self-esteem) echo the profile summary data, creating a closed loop: the quiz diagnosed you as Low/Weak/Low, and the plan promises to take you to High/Strong/High. This makes the purchase feel like completing the diagnostic cycle.

The per-day pricing ($3.08/day and $1.62/day) reframes $21.60 and $48.60 as trivially small daily investments, anchoring against daily expenses like a coffee.

## Key Insights

- Same person in two emotional states is more relatable than two different people for before/after
- Three metrics echoing the profile summary create a diagnostic → prescription → transformation loop
- Per-day pricing ($1.62/day) reframes subscription cost as less than a coffee
- "Most Popular" badge on the 4-Week Plan uses social proof to steer toward the higher LTV option
- The 7-Day Trial at $21.60 serves as a low-commitment entry point for hesitant users
- Profile data (Main difficulty: Overthinking, Goal: Well-being) personalized on the pricing page

### Onboarding Flow

**Step 1: Landing — Gender Selector** — 'A PERSONALIZED WELL-BEING MANAGEMENT PLAN — Improve your well-being with our personalized plan.' 3-minute quiz promise. Male/Female photo tiles of people in matching green shirts. Terms, Privacy, and Subscription Policy consent.

**Step 2: Age Selection** — 'What's your age? We only use your age to personalize your plan.' Six brackets from 18-24 to 65+. Transparency note reassures users about data usage.

**Step 3: Social Proof — 2.5M Users** — 'Over 2,500,000 people have chosen Liven' with orbital avatar graphic showing diverse faces. Early social proof validates the quiz before any personal questions begin.

**Step 4: Q1 — Energy & Fatigue** — 'How often do you feel tired or lack energy, even after rest?' — Often, Sometimes, Rarely. Step 1/26. Icon-based frequency scale. Opens with a universally relatable symptom.

**Step 5: Q2 — Procrastination** — 'Do you often leave things to the last minute?' — Often, Sometimes, Never. Step 2/26. Captures executive function behavior.

**Step 6: Q3 — Focus & Distraction** — 'How easily distracted are you?' — Easily distracted, Occasionally lose focus, Rarely lose focus, Very focused. Step 3/26. Four-tier scale for attention assessment.

**Step 7: Q4 — Worry & Overwhelm** — 'How often do you feel worried or overwhelmed?' — Often, Sometimes, Rarely. Step 4/26.

**Step 8: Q5 — Mood Swings** — 'How often do you experience mood swings?' — Often, Sometimes, Rarely. Step 5/26.

**Step 9: Q6 — Emotional Harmony** — 'Have you felt in harmony with yourself and your circle in recent months?' — Yes, Moderately, No. Step 6/26. Shifts from symptoms to relational well-being.

**Step 10: Q7 — Emotional Expression (Likert)** — 'It's difficult for me to express emotions — Do you agree with the following statement?' Five-point Likert scale with thumb icons from Strongly disagree to Strongly agree. Step 7/26. First Likert-format question — format shift maintains engagement.

**Step 11: Q8 — Task Overwhelm (Likert)** — 'I often feel overwhelmed by the amount of tasks I have to do' — Likert scale. Step 8/26.

**Step 12: Q9 — Decision Making (Likert)** — 'I often find it challenging to make a decision' — Likert scale. Step 9/26.

**Step 13: Q10 — Fear of Failure (Likert)** — 'I often struggle to pursue my ambitions due to fear of messing up and failing' — Likert scale. Step 10/26. Touches on a deeply personal vulnerability.

**Step 14: Q11 — Compliment Acceptance** — 'Have you ever struggled with accepting compliments because you didn't believe they are true?' — Almost always, Depends, Not at all, I'm not sure. Step 11/26. Self-esteem indicator.

**Step 15: Q12 — Social Insecurity** — 'I tend to feel insecure while talking to others' — Yes, No, I'm not sure. Step 12/26.

**Step 16: Q13 — Partner Overthinking** — 'I tend to overthink my partner's behavior' — Yes, No, I'm not sure. Step 13/26. Relationship-specific anxiety question.

**Step 17: Q14 — People-Pleasing** — 'Do you often prioritize others' needs and sacrifice your own ones?' — Often, Sometimes, Never. Step 14/26.

**Step 18: Q15 — Motivation Timeline** — 'When was the last time you felt driven and motivated?' — A few weeks ago, Less than a year ago, More than a year ago, Never in my life. Step 15/26. 'Never in my life' captures the most severe cases.

**Step 19: Q16 — Well-Being Areas (Multi-Select)** — 'Are there aspects of your well-being you'd like to address?' — multi-select: Low energy, Worry, Emotional exhaustion, Overthinking, Irritability, I'm totally fine. Step 16/26. First multi-select format shift.

**Step 20: Q17 — Morning Routine** — 'What do you usually do first thing in the morning?' — Picking up my phone, Making coffee, Brushing teeth & Taking Shower, Other. Step 17/26. Lifestyle behavior capture.

**Step 21: Q18 — Physical Activity** — 'How much time do you dedicate to physical activity each week?' — 0-2, 3-5, 6-8, More than 8 hours. Step 18/26.

**Step 22: Q19 — Habits to Quit (Multi-Select)** — 'Do you have any habits that you'd like to quit?' — multi-select: Being late, Self-doubt, Social media, Sugar cravings, Losing sleep, Nail-biting, Binge-watching. Step 19/26.

**Step 23: Q20 — Sleep Issues (Multi-Select)** — 'Is there anything you want to improve about your sleep?' — multi-select: Waking up tired, Waking up during the night, Reduced sleep quality, Difficulty falling asleep, Waking up earlier than intended, I sleep well. Step 20/26.

**Step 24: Q21 — Life Stressors (Multi-Select)** — 'Have any of the following caused you to struggle more than before?' — multi-select: Family or relationship, External circumstances, My appearance, Sleep issues, Job-related stress, Other. Step 21/26.

**Step 25: Q22 — Happiness Goals (Multi-Select)** — 'In order to live a happier life, what do you think you need to improve?' — multi-select: My state of calm, My focus levels, My willpower, My energy levels, My inner strength, Other. Step 22/26.

**Step 26: Q23 — Plan Priorities (Multi-Select)** — 'Which of the following would you like to start working on with your plan?' — multi-select: Stop doubting myself, Build emotional resilience, Set and achieve goals, Stop overthinking, Improve my ability to trust others, Improve my daily routine. Step 23/26.

**Step 27: Authority — University Logos** — 'Liven was developed using scientific practices — Your journey is based on decades of research.' Harvard University, University of Oxford, University of Cambridge logos. Academic authority interstitial placed before the final quiz questions.

**Step 28: Q24 — Behavioral Technique Knowledge** — 'How much do you know about Behavioral Techniques?' — Nothing at all, Not that much, A lot. Step 24/26. Segments users by therapeutic literacy for content calibration.

**Step 29: Q25 — Specialist Referral** — 'Did you hear about Liven from a specialist?' — Yes, No. Step 25/26. Attribution question that also reinforces clinical credibility.

**Step 30: Authority — Expert Review** — 'Your plan will be reviewed by our science team.' Testimonial from Tara Passaretti, Licensed Mental Health Counselor. Thoughts/Feelings/Behavior CBT triangle diagram. Professional authority with named, credentialed expert.

**Step 31: Authority — Global Community** — 'Join over 2,500,000 people — Become part of a growing worldwide community and achieve your goals with us!' World map with avatar pins. Social authority through global community visualization.

**Step 32: Q26 — Daily Goal Setting** — 'Set your daily goal — Pick the amount of time you want to spend on self-development daily.' 5, 10, 15, 20 min/day. Step 26/26. Final question creates a micro-commitment to daily usage.

**Step 33: Email Capture** — 'Enter your email to see your personal Profile Summary.' Privacy reassurance below. Positioned after 26 questions — massive sunk cost makes email feel trivial.

**Step 34: Name Capture** — 'What's your first name?' Simple input with Continue. Captured after email to enable personalized screens throughout the results and offer sequence.

**Step 35: Well-Being Profile Summary** — 'Summary of your Well-being Profile' — Negative effects level gauge (HIGH, red zone). Four metrics: Main difficulty (Overthinking), Challenging period (Few years), Trigger (Personal reason), Energy level (Low). Photo of man looking thoughtful. Clinical-style assessment mirrors therapy intake results.

**Step 36: Improvement Timeline** — 'A plan designed to support your wellbeing journey.' Bar chart April → June 2026. 'Based on your answers, we expect you to improve your well-being by June 2026.' Disclaimer: chart is non-customized illustration.

**Step 37: Loading — Plan Creation + Testimonial** — 'Creating your personalized Well-being Management plan' with progress bar (Setting goals 40%). Below: 5-star testimonial from Brian Ross: 'It has really changed my life' about overcoming procrastination. Social proof during loading.

**Step 38: Micro-Commitment Pop-Up** — Mid-loading interruption: 'Are you inclined to finish what you start?' Yes/No. Commitment and consistency play — tapping 'Yes' creates psychological alignment with completing the purchase. Meta-clever: the question itself tests whether they'll finish the funnel.

**Step 39: Personalized Plan Reveal** — '{{FirstName}}, Your personal Well-being Management Plan is ready!' Well-being level curve from 'Today' (red, low) to 'After using Liven' (green, high) over 4 weeks. Personalized with user's name.

**Step 40: Scratch Card — Discount Reveal** — '{{FirstName}}, Scratch & save on your Well-being Management Plan — A little boost, right when you need it.' Interactive golden scratch card. Gamified discount reveal that creates ownership through physical interaction.

**Step 41: Discount Revealed — 50% Off** — 'Your discount is 50% on your personal Well-being Management Plan' with confetti animation. The scratched golden ticket reveals the offer. Emotional reward peak before the pricing page.

**Step 42: Sales Page — Subscription Pricing** — Before/after comparison: Now (stressed man, Energy Low, Well-being Weak, Self-esteem Low) vs Your Goal (confident man, all metrics High/Strong). 'Your personalized plan is ready!' echoes Main difficulty: Overthinking, Goal: Well-being. 7-Day Trial $3.08/day ($21.60) or 4-Week Plan $1.62/day ($48.60, Most Popular). 'GET MY PLAN' CTA.

---