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.