Skip to content

Home

Jump to bottom
Tim Spinks edited this page Sep 9, 2025 · 1 revision

BBO Microsite — PRD & Engineering Playbook v1.0

(Draft, Sep 2025)

1. Executive Overview (PRD)

Campaign Goals

  • Promote Firefox’s “Open What You Want” positioning via satirical, Gen Z–friendly creative.

  • Drive awareness, not data collection (no PII stored).

  • Anchor campaign activations (TwitchCon booth, influencer streams, Data War game) on a central microsite.

User Experience Flow

  1. Landing Page — Campaign branding, ticker, hero banner.

  2. Avatar Creation Modal

    • Users answer 7 multiple-choice questions (5 options each).

    • Avatar + bio generated via LLM API.

  3. Avatar URL Assigned — User receives unique “all access pass” link (e.g. /a/{hash}).

  4. Avatar Gallery & Playpen

    • Actions: space selfie, TikTok dance, etc.

    • Unlocks stored per-avatar, but experienced individually per user.

  5. Return Visits —

    • Cookie auto-routes returning users to their avatar.

    • These URLs allow users to view/modify avatars (no authentication required).

Success Metrics

  • Volume of avatars generated.

  • Engagement with playpen actions.

  • Return rate (users revisiting via hash/URL).

  • Social sharing (tracked via outbound links, not user IDs).

Constraints

  • No email collection or CRM tie-in (legal constraint).

  • Must function on mobile + desktop with infinite scaling (no breakpoints).

  • Runs at least through end of 2025, possibly extended for card game.

2. Engineering Playbook (TDD)

Tech Stack

  • Frontend: Next.js (on Netlify), Tailwind CSS, HeroUI (limited).

  • CMS: Sanity (content blocks, homepage cards, editorial updates).

  • Database: Supabase (Postgres) → avatar/user mapping + playpen action flags.

  • Image Storage:

    • LLM returns avatar/playpen images.

    • Store originals in Supabase Storage (private bucket).

    • Serve via CDN with signed URLs for caching + performance.

  • Hosting: Netlify (fast deploy, preview builds).

  • Version Control: GitHub (Mozilla enterprise repo).

System Architecture

Flow:

  1. User submits choices → API → LLM generates avatar image + bio.

  2. API stores result in Supabase:

    • Avatars table - one row per unique avatar, up to N rows per choice combination.

    • Users table - one row per unique hash.

  3. Avatar/playpen images stored in Supabase Storage → cached CDN delivery.

  4. User gets unique hash in URL + cookie for return visits.

Database Schema (Proposed)

Table: Avatars

  • id (PK, UUID)

  • combination_key (string: concatenated 7 answers, eg. '5324153')

  • image_url (string, Supabase storage path)

  • bio_text (text)

  • playpen_selfie_url (string, nullable)

  • playpen_tiktok_url (string, nullable)

  • created_at (timestamp)

Table: Users

  • id (PK, UUID / hash)

  • avatar_id (FK → Avatars.id)

  • cookie_id (string, optional for return routing)

  • playpen_selfie_unlocked (boolean)

  • playpen_tiktok_unlocked (boolean)

  • created_at (timestamp)

Avatar Generation & Memoization Logic

  • Each combination of answers = deterministic combination_key.

  • On first N requests:

    • Generate avatar via LLM.

    • Insert into Avatars (up to N variants allowed per combination).

  • On subsequent requests (N+1):

    • Randomly select from existing Avatars for that combination.

    • Create new User pointing to that randomly assigned Avatar.

Playpen actions:

  • If avatar doesn’t have action → LLM generates asset, stored in Avatars table.

  • If avatar already has action → user experience references stored asset.

  • User table tracks whether they have “unlocked” the action (boolean).

Security & Privacy

  • No PII collected.

  • User hashes = UUID or salted hash (timestamp + choices + random).

  • Hash must be unguessable to prevent brute-force enumeration.

  • Images stored in private buckets → accessed via signed CDN URLs.

  • Cookies store only user_id hash, no sensitive data.

Deployment & Infra

  • Netlify handles build + deploy (Next.js SSR where needed).

  • Supabase (DB + storage) = single source of truth.

  • CDN caching for images.

  • Monitoring/observability: Netlify Analytics + Supabase logs.

Initial Dev Tasks

  1. Scaffolding

    • Next.js project setup in Mozilla GitHub.

    • Sanity CMS integration for homepage cards.

    • Tailwind + HeroUI baseline setup.

  2. Core Components

    • Header (nav, logo, social links).

    • Footer.

    • Bento grid + ticker.

    • Card wrapper component (consistent styling).

  3. Avatar Flow

    • Modal for 7-question quiz.

    • API call to LLM + Supabase insert.

    • Hash + cookie handling.

  4. Playpen Actions

    • Selfie + TikTok endpoints.

    • DB + storage logic for memoization.

    • UI for unlocking actions.

  5. Routing & Persistence

    • /a/{hash} pages.

    • Cookie-based return logic.

  6. Performance & Testing

    • CDN image caching.

    • Accessibility (clickable CTAs, keyboard nav).

    • QA on infinite scaling design.

3. Open Questions

  • N value for memoization (10? 20?).

  • CDN choice: Supabase’s built-in vs Netlify Blob.

  • Easter egg unlocks (Data War cards) → DB design needed.

  • Sunset plan for 2026: archive vs ongoing maintenance.

Clone this wiki locally