The Challenge
Self-Challenge Bad Robot is synonymous with mystery, high-concept sci-fi, and emotional storytelling. Their existing web presence, while functional, lacked the immersive quality of their films. The goal was to create a digital experience that feels less like a corporate portfolio and more like an extension of their cinematic universe—a "Mystery Box" that users can open.
The Solution
We designed a dark, atmospheric interface that utilizes WebGL interactions, subtle sound design, and a "classified" aesthetic. The navigation mimics a film archive, and the interactions are deliberate and tactile, rewarding user curiosity.
Role
UI/UX Design, Art Direction (Concept)
Timeline
4 Weeks
Tools
Figma, Astro, WebGL
Design System
Color Palette
#E31D2B
Robot Red
#0A0A0A
Void Black
#F5F5F5
Script White
Typography
Bad Robot
Inter Display / Bold / -0.02em
CLASSIFIED INFORMATION
JetBrains Mono / Regular / 0.05em
The quick brown fox jumps over the lazy dog. A cinematic approach to typography ensures readability while maintaining atmosphere.
Inter / Regular / 1.6
Homepage Concept
BAD ROBOT
Productions • Games • Music
EST. 2001
SANTA MONICA, CA
SCROLL TO EXPLORE
The homepage features a minimalist "hero" moment with subtle parallax effects and ambient sound.
Project Archive
Selected Works
Westworld
Series
Star Wars: The Force Awakens
Film
Cloverfield
Film
Lost
Series
Super 8
Film
The archive view uses a data-grid layout inspired by classified documents.
Interactive Menu
Navigation
- Films
- Television
- Games
- About
The full-screen menu floods the screen with the brand's signature red, creating a bold visual statement.
The Result
The redesign successfully captures the essence of Bad Robot—mysterious, premium, and innovative. Early user testing suggests a 40% increase in engagement time on the "About" and "Projects" pages.