Back to Home
Web Design
Rebranding

Bad Robot Productions

A cinematic web experience for J.J. Abrams' production company, focusing on the philosophy of the "Mystery Box" and immersive storytelling.

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

badrobot.com

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

2016

Star Wars: The Force Awakens

Film

2015

Cloverfield

Film

2008

Lost

Series

2004

Super 8

Film

2011

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.