biohazard-vfx/docs/brainstorming-session-results.md

# Biohazard VFX Website — Brainstorming Session Results

Session Topic: Finishing the Biohazard VFX website by adding core features and unifying UX/UI

Context
- Project type: Brownfield
- Ideation breadth: A few ideas (focused)
- Document capture: Yes

Approach Selected
- Option 2: Analyst recommends techniques
- Planned technique flow: Five Whys → SCAMPER → Mind Mapping → Role Playing

---

## Executive Summary
- To be completed after session.

---

## Technique 1: Five Whys (Root Cause Discovery)
Description: Ask “why” iteratively to uncover root causes of UX/UI fragmentation.

Prompts & Responses
- Why #1: Fonts and styling are inconsistent across the site, and the top navigation doesn’t align with the site’s ideology; overall, the site lacks a clear identity and feels unsatisfying.
- Why #2: Brand direction is unclear; after a year+ of development, none of the explored directions felt right/satisfying.
- Why #3: Decisions haven’t landed due to very high personal quality bar/perfectionism; the brand intent is clear (great VFX powered by pipeline/infrastructure; artist-first; strong ally to directors; long-term partnerships) but hasn’t been distilled into a concise direction.
 - Why #4: Because there were no decision criteria or timeboxed cycles to force commitment; moodboards existed but were hard to translate into shippable UI; perfectionism raised the bar beyond launchable.
 - Why #5: Underlying fears: misrepresenting brand/work quality, accumulating tech debt if committing prematurely, and too many plausible directions to compare objectively.

Insights (emerging)
- Early signals: Missing design system or tokens; conflicting component libraries or ad-hoc overrides; unclear brand/positioning guiding visual hierarchy and nav model.
- Foundation gap: No finalized brand brief (audience, promise, attributes, tone, visual language) to anchor consistent UI and navigation model.
- Brand pillars (emerging): Artist-first ethos; pipeline/infrastructure excellence; director partnership & reliability; premium cinematic craft; tech-enabled artistry.
 - Selected causes: No decision criteria; no timeboxed decision cycles; moodboards exist but are hard to implement; perfectionism blocking commitment.
 - Brand words (chosen): Meticulous, Robust, Collaborative, Artist-first.

---

## Technique 2: SCAMPER (Feature Refinement)
Description: Substitute, Combine, Adapt, Modify/Magnify/Minify, Put to another use, Eliminate, Reverse.
Targets: Core features to be identified post-Five Whys.

Notes
- [to be filled]

Focus Targets (selected)
- T1: Global typography + color tokens (design system)
- T2: Top navigation + IA (structure & labels)

SCAMPER — T1: Global Typography + Color Tokens
- Substitute
  - Typography: Choose 1 display/headline + 1 body font; remove others. Candidates from repo: Rajdhani, Kanit, Share (globals also reference Bentham, DM Serif). Proposed default: H: Rajdhani 600/700; Body: Kanit 400/500. Agree? If not, specify pair and weights.
  - Color tokens: Establish base surface (Dark vs Light), primary brand, accent, neutrals scale. Preference?
  - Decision: [awaiting]
  - Decision (finalized): Headings Rajdhani 600/700; Body Kanit 400/500; Dark-first UI; palette direction: black + orange; standardize on shadcn/ui CSS component patterns.
- Combine
  - Unify to a single type scale (e.g., 12–72 with 8px step), map to tokens `--font-size-{xs..6xl}` and Tailwind `theme.extend.fontFamily` + `fontSize`.
  - Combine color usage into tokens: `--color-bg`, `--color-fg`, `--brand.primary`, `--brand.accent`, `--muted`, `--border`.
  - Decision (finalized): Type scale Cinematic = 12, 16, 20, 24, 32, 40, 48, 60, 72, 96. Colors = bg #0b0b0b; surfaces #121212, #181818; fg #e6e6e6; muted #a3a3a3; border #2a2a2a; brand.primary #cc3a00; brand.accent #d97706.
- Adapt
  - Adapt from existing asset `Biohazard Stylesheet rev01.jpg` and current `newfonts/` to finalize specimens and usage.
  - Decision: [awaiting]
- Modify/Magnify/Minify
  - Tighten letter-spacing on headings; reduce palette to 3–5 core colors; ensure WCAG AA on text.
  - Decision: [awaiting]
- Put to another use
  - Extend tokens to spacing, radii, shadows, motion durations for full system consistency.
  - Decision: [awaiting]
- Eliminate
  - Remove ad-hoc CSS overrides, unused fonts (Bentham/DM Serif) if not in final pair; consolidate Tailwind font config.
  - Decision: [awaiting]
- Reverse
  - Consider “dark-first” UI (bio-industrial feel), with occasional light surfaces for case study readability.
  - Decision: [awaiting]

SCAMPER — T2: Top Navigation + IA
- Substitute
  - Replace labels to better reflect brand goals. Options: [Work] [Pipeline] [Studio] [Contact] or [Projects] [Process] [About] [Contact]. Choose 4.
  - Decision (finalized): Top-level = Projects, Process, Studio, Contact. Sub-items = Projects: Reel, Case Studies; Process: Pipeline, Tools, Infrastructure; Studio: About, Team, Values; Contact: Smart Form.
- Combine
  - Merge Reel into Projects (hero CTA to reel within Projects); merge Capabilities under Process (Pipeline, Tools, Infrastructure).
  - Combine nav structure with layout: Left-aligned persistent sidebar paired with main content area; keep top bar minimal (logo + hamburger on mobile only).
  - Decision (finalized): Use a vertical, left sidebar as the primary site navigation across internal pages; homepage may show the same sidebar after the hero (or collapsed to icon-only).
- Adapt
  - Adapt IA to director mental model: Primary tasks = view reel, skim case studies, understand pipeline reliability, contact quickly.
  - Use shadcn/ui primitives: Accordion (for expandable sections), ScrollArea (for overflow), Tooltip (for collapsed icon-only state), Sheet (mobile drawer), Command (palette shortcut).
  - Decision (finalized): Sidebar groups expand/collapse on click (not hover). Persist open state per section during route changes.
- Modify/Magnify/Minify
  - Keep to 4 top-level items; emphasize Projects and Contact visually.
  - Styling: ALL CAPS labels, rectangular buttons, high-contrast black/orange/white palette. Use Rajdhani (caps) for nav text with slight letter-spacing for readability.
  - Visual affordances: Active item has left border 2px in brand.primary (#cc3a00) and subtle bg (#121212). Hover uses brand.accent/copper (#d97706) for underline or icon tint.
  - Layout: Sidebar width 240px desktop (collapsible to 72px icon-only); sticky full viewport height; content area has max-width container and grid offset.
  - Decision (finalized): Click-to-expand subnav; active state with orange border; sidebar sticky; collapsed mode optional for case study focus.
- Put to another use
  - Use subnav descriptions sparingly for credibility (e.g., Tools: Houdini, Nuke, Unreal, custom pipeline) within the Process section; avoid clutter.
  - Add a persistent Contact CTA at bottom of sidebar using accent style; optional social icons minimal.
  - Decision (finalized): Contact CTA pinned to bottom of sidebar; Process sub-items may include concise toolchain references.
- Eliminate
  - Drop low-value or not-ready sections from nav; no Blog until active; avoid mega menus.
  - Remove hover-to-expand patterns (reduce accidental opens); keep interactions deliberate.
  - Decision (finalized): No Blog for now; no hover expansion; no mega menus.
- Reverse
  - Consider icon-only collapsed sidebar with tooltips as an alternate focused mode; full-screen command palette as secondary nav.
  - Decision (finalized): Provide Command palette (⌘K/CTRL+K) for power users; allow toggling between expanded/collapsed sidebar.

---

## Technique 3: Mind Mapping (IA/Flow Unification)
Description: Map central concept → primary sections → flows → components.

Branches
- Central concept: Biohazard VFX — cinematic craft, pipeline excellence, artist-first collaboration

- Projects
  - Reel (landing CTA; also accessible within Projects)
  - Case Studies (index grid/list, filters: type/tool/year)
  - Case Study Detail `/projects/[slug]` (hero video/stills → problem → approach → pipeline highlights → results → credits → CTA)
  - Components: media player, gallery, tag badges, stats, tech stack icons, CTA block

- Process
  - Pipeline (overview: ingest → tracking → FX → lighting → comp → review; reliability, versioning, QC)
  - Tools (Houdini/Nuke/Unreal/custom pipeline; show capability badges succinctly)
  - Infrastructure (render, storage, automation, CI/CD for assets)
  - Components: stepper/timeline, badge list, icon grid, diagram, code/CLI snippets optional

- Studio
  - About (mission, ethos: meticulous, robust, collaborative, artist-first)
  - Team (select bios, lightweight)
  - Values (principles; client partnership focus)
  - Components: text sections, avatars, quote/testimonial, logo wall (if any)

- Contact
  - Smart Form (brief intake: project type, timeline, budget range, references/links)
  - Confirmation page (what happens next, SLA)
  - Components: form fields, file/url inputs, privacy note, success state

- Global
  - Sidebar Nav (left, persistent 240px; collapsible 72px; click-expand groups)
  - Command Palette (⌘K/Ctrl+K) for quick navigation
  - Footer (copyright, minimal links)
  - Theme tokens (dark-first; black/orange; type scale)

Primary user journeys (directors/producers)
- J1: Home → Watch Reel → Scan 2–3 Case Studies → Contact via Smart Form
- J2: Home → Process (Pipeline reliability) → Contact → Follow-up reel/case study as validation
- J3: Google/Bing → Deep link to Case Study → Explore Process → Contact

Success signals and CTAs
- Reel completion or 50% watch → suggestion: view Case Studies
- Case Study end → CTA: Contact / See Process
- Process page → CTA: Contact / View Projects

Information architecture → suggested routes
- `/projects` (index) → `/projects/reel`, `/projects/case-studies`, `/projects/[slug]`
- `/process` → `/process/pipeline`, `/process/tools`, `/process/infrastructure`
- `/studio` → `/studio/about`, `/studio/team`, `/studio/values`
- `/contact`

Shadcn/ui primitives to standardize
- Navigation: `Accordion`, `ScrollArea`, `Tooltip`, `Sheet`, `Command`
- Content: `Tabs`, `Card`, `Badge`, `Separator`, `Table`, `Breadcrumb`
- Forms: `Form`, `Input`, `Textarea`, `Select`, `Button`, `Checkbox`, `RadioGroup`, `Toast`
- Media: custom player wrapper for consistency (poster overlays, controls)

---

## Scrolling Behavior Standardization (Sticky Split Pattern)
Goal: Consistent split‑screen, sticky scrolling interactions site‑wide (inspired by Basement Foundry) without scroll‑jacking, with graceful fallbacks.

Pattern: Sticky Split Section
- Layout
  - Desktop: Two columns. Left = sticky narrative (copy, headings, CTAs). Right = scroll track that reveals media/panels as the user scrolls each section. Optionally invert sides.
  - Mobile: Stack vertically. Narrative above media. Sticky reduced or disabled to avoid awkward behavior; use reveal-on-view.
- Mechanics
  - Each section height: 150–250vh (tunable by content). The narrative column is `position: sticky; top: clamp(64px, 8vh, 96px)`.
  - The media track contains panels (1..N). As scroll progresses through the section, panels transition (fade/scale/translate) or pin/unpin.
  - Implementation: use native sticky + `IntersectionObserver` for entering/leaving + `framer-motion` for progress interpolation. Optional `lenis` for smoothing, with reduced‑motion disabling.
  - Fallbacks: if reduced motion is enabled or JS disabled, show panels as a static vertical stack.
- Tokens/Vars
  - `--sticky-top`: sticky offset; `--panel-gap`: spacing; `--reveal-ease`: cubic‑bezier; `--reveal-duration`.
  - Color tokens from brand palette apply to active states and progress indicators.
- Accessibility
  - Respect `prefers-reduced-motion`; maintain keyboard focus order; ensure content is reachable without scrolling effects; provide visible focus rings.
  - Avoid scroll‑jacking; use passive listeners; do not block native wheel/touch.
- Performance
  - Avoid large `position: fixed` layers; prefer `will-change: transform` on animating elements; lazy‑load media; compress images/video.

Suggested Component API (no code yet)
- `<StickySplit.Section id height="200vh" side="left|right" className>` wraps one split section.
- `<StickySplit.Sticky>` holds the narrative area (sticky column).
- `<StickySplit.Track>` holds the scrollable/revealed media panels.
- `<StickySplit.Panel index in|out variants>` one panel within the track; reveals based on section progress.
- Hook: `useSectionProgress(id)` returns 0..1 progress for motion transforms.

Where to Apply
- Home hero (narrative left, brand reel teaser right) → CTA to Reel.
- Case Studies (problem → approach → pipeline highlights → results) with per‑phase panels.
- Process (pipeline steps) with stepper timeline and panel per step.
- Studio (values/ethos) with subtle reveals rather than heavy motion.

Adoption Steps
1) Define CSS vars and Tailwind utilities for sticky offsets, spacing, and motion tokens.
2) Build `StickySplit` primitives using shadcn/ui conventions and `framer-motion`.
3) Integrate on Home, Projects index/detail, and Process pages first.
4) QA across breakpoints; verify reduced-motion and keyboard navigation.

Acceptance Criteria
- All major pages use the same Sticky Split interaction pattern where applicable.
- No scroll‑jacking; reduced‑motion mode provides static content with reveals on view.
- FPS remains smooth on desktop and mobile; LCP unaffected significantly on hero.
- Visuals adhere to dark‑first palette with orange accents for active/progress.

---

## Technique 4: Role Playing (Stakeholder Perspectives)
Perspectives: Producer, Client, Artist

Findings
- Producer: [to be filled]
- Client: [to be filled]
- Artist: [to be filled]

---

## Idea Categorization
- Immediate Opportunities: [to be filled]
- Future Innovations: [to be filled]
- Moonshots: [to be filled]
- Insights & Learnings: [to be filled]

---

## Action Planning
- Top 3 Priorities: [to be filled]
- Next Steps: [to be filled]
- Resources/Research Needed: [to be filled]
- Timeline Considerations: [to be filled]

---

## Reflection & Follow-up
- What worked well: [to be filled]
- Further exploration areas: [to be filled]
- Recommended follow-up techniques: [to be filled]
- Open questions: [to be filled]

---

## Brand Brief (Draft)
Audience
- Primary: Film/TV directors and producers seeking dependable, cinematic VFX partners
- Secondary: Studio/agency partners evaluating technical reliability and collaboration fit

Positioning Statement
- Biohazard VFX delivers meticulous, robust, artist-first visual effects—engineered by a modern pipeline and infrastructure—to help directors realize their vision with confidence and speed.

Value Proposition
- Cinematic craft × engineered pipeline = predictable excellence. You get elite artistry backed by systems that scale, version, and quality‑check the work end‑to‑end.

Brand Attributes (must read in the experience)
- Meticulous • Robust • Collaborative • Artist‑first • Trusted • Cinematic

Voice & Tone
- Precise, confident, minimal. Show more than tell. Avoid hype; be specific.

Visual Language
- Dark‑first UI; high contrast (black/orange/white). Primary #cc3a00, accent #d97706.
- Typography: Rajdhani (caps) for headings; Kanit for body; tight spacing, clean rhythm.
- Motion: purposeful; conveys process and transitions; honors reduced‑motion.

Interaction Principles
- Sticky Split sections to reveal depth as you scroll; no scroll‑jacking.
- Clear CTAs; frictionless paths to reel, case studies, and contact.

Information Architecture Priorities
- Projects first (Reel, Case Studies) → Process (Pipeline, Tools, Infrastructure) → Contact.
- Studio (About, Team, Values) supports credibility; keep it concise.

Trust Signals
- Pipeline/infra highlights; selected logos/quotes; toolchain badges used sparingly.

Content Priorities
- What we did (case studies), how we work (pipeline), how to start (contact).

---

## Decision Checklist (Ship Gate)
Mark Pass/Fail for each before merging a change.

1) Brand Alignment
- Does the page communicate Meticulous, Robust, Collaborative, Artist‑first within 5 seconds (type, color, layout, copy)?

2) IA & CTA Clarity
- Is the primary CTA obvious (Reel/Projects/Contact) with 1 clear next step per view?

3) Design System Compliance
- Uses tokens (type scale, colors), Rajdhani/Kanit pairing, shadcn/ui patterns. No ad‑hoc inline styles unless justified.

4) Accessibility & Motion
- Contrast AA+, keyboard navigation, focus states, alt text, reduced‑motion fallbacks.

5) Performance Budget
- Hero media optimized; LCP < 2.5s (desktop), CLS < 0.1; defer non‑critical JS; lazy‑load galleries/video.

6) Decision Discipline
- Work was timeboxed; options compared against this checklist; decision recorded and committed.

Ship Threshold
- Ship when all 6 Pass, or 5 Pass with one Minor Waived (documented) and a follow‑up task scheduled.

Recommended Cadence
- Explore (≤45m) → Decide (≤15m) → Implement (≤2h) → Review (≤30m) with this checklist.