# QoE Precheck Mockups

Visual exploration for the QoE Precheck product. Four style variants of two pages each (landing + report). Shared sample data and copy.

## What's here

```
qoe-precheck/
├── README.md                  ← this file
├── index.html                 ← gallery viewer (open this first)
├── _shared/
│   ├── sample-data.json       ← Acme HVAC numbers used in every variant
│   ├── content.md             ← shared body copy, IS/IS-NOT, pricing
│   ├── headlines.json         ← swappable hero headlines (7 variants)
│   ├── headline-switcher.js   ← applies ?headline= on landing pages
│   └── section-toggle.js      ← applies ?sections= on report pages
├── v1-clinical-banker/        ← navy/grey, serif, dense tables — Bloomberg vibe
├── v2-modern-saas/            ← minimal, sans-serif — Linear/Stripe vibe
├── v3-friendly-pro/           ← warm, approachable, credible — Notion/Pitch vibe
├── v4-editorial/              ← serif, content-led — FT/Stratechery vibe
├── v5-private-bank/           ← navy + gold + cream, serif — JPM Private Bank vibe
├── v6-dark-tech/              ← black + accent green, mono — Linear dark / Anthropic
└── v7-consulting/             ← white + gray + red, structured — McKinsey / Bain
```

## Testing axes

Different controls appear depending on whether you're viewing the Landing or the Report.

### Landing page — headline testing
Tests marketing copy against visual style.

| Axis | Options | What it tests |
|---|---|---|
| **Style** | Clinical / SaaS / Friendly / Editorial | Visual treatment |
| **Headline** | H1–H7 (see `_shared/headlines.json`) | Positioning angle / copy |

That's 4 × 7 = **28 landing combinations.** URL: `?page=landing&variant=saas&headline=h3`

### Report page — section composition testing
Tests report density and emphasis. The headline buttons hide; section controls appear.

| Axis | Options | What it tests |
|---|---|---|
| **Style** | Clinical / SaaS / Friendly / Editorial | Visual treatment |
| **Sections** | 6 toggleable blocks + 5 presets | Report density and emphasis |

**Section keys:** `headline · bridge · addbacks · flags · actions · cash`

**Presets** (one click each):
- **Full** — all sections (the complete report)
- **Triage** — score only (60-second qualifier moment)
- **EBITDA Focus** — score + bridge + add-backs (value-creation pitch)
- **Defense** — score + flags + actions (pre-LOI defense brief)
- **Cash Proof** — score + cash (trust-signal artifact)

Plus individual checkbox toggles for any custom combination. URL: `?page=report&variant=editorial&sections=headline,addbacks`

**Keyboard shortcuts:**
- `1`–`4` switch styles (Clinical / SaaS / Friendly / Editorial)
- `q` / `w` switch Landing / Report
- Click any preset, then click section pills to fine-tune
- "Copy link" button puts the current URL on your clipboard

**Adding new headlines or report sections:**
- New headline → edit `_shared/headlines.json`, add an entry. Gallery picks it up on reload.
- New section → wrap markup in all 4 variants with `data-section="newkey"`, then add `{ id: "newkey", label: "..." }` to the `sections` array in `index.html`.

## View locally

```bash
cd mockups/qoe-precheck
python3 -m http.server 8000
open http://localhost:8000
```

Or any static file server. No build step — vanilla HTML + Tailwind via CDN.

## Deploy as preview link (optional)

```bash
cd mockups/qoe-precheck
npx wrangler pages deploy . --project-name=qoeagent-mockups
```

## Why these four variants

Each represents a real positioning choice, not arbitrary visual difference:

| Variant | Vibe | References | Risk |
|---|---|---|---|
| Clinical Banker | Conservative, data-dense | Bloomberg, Capital IQ, WSJ | Could feel dated |
| Modern SaaS | Minimal, tech-forward | Linear, Vercel, Stripe | Could feel un-serious |
| Friendly Pro | Warm, approachable | Notion, Pitch, Carta | Could feel consumer-y |
| Editorial Authority | Serif, content-led | FT, Bain Insights | Could feel slow |

Brokers are conservative (A is safest) but want to feel current (B). Showing all four to a broker tells you their taste profile in 30 seconds.

## Decision criteria

When reviewing the variants, judge by:

1. **Trust signal** — would a broker show this to a $20M deal seller?
2. **Credibility vs. ease** — authoritative without feeling slow?
3. **Add-back hierarchy** — does the $312k number land first?
4. **Score legibility** — is "72/100" the visual anchor?
5. **Print/PDF feasibility** — can the report layout become a shareable artifact?

## Constraint: same content, different visuals

Every variant must use:
- Sample data from `_shared/sample-data.json` (Acme HVAC, $1.84M EBITDA, $312k add-backs)
- Headlines and copy from `_shared/content.md`

This is intentional. You're comparing visual treatment, not content. If a variant feels better because it has different words, the comparison is broken.

## Status

- [x] Scaffold created
- [ ] Variants built
- [ ] Internal team review
- [ ] Shared with brokers
- [ ] Direction chosen