# 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) - `` wraps one split section. - `` holds the narrative area (sticky column). - `` holds the scrollable/revealed media panels. - `` 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.