Bates Motel Microsite

Bypass the binge with an animated microsite

To bring new viewers up to speed we designed an animated microsite for the season four premiere of A&E’s sinister series Bates Motel.

We were given a two-pronged goal: give viewers an interesting way to catch up on the story (without having to binge-watch anything) and offer die-hard fans a special experience.


Client
A&E / Bates Motel
Scope

UX Design

UI Design

Storyboards

Motion Design

After Effects Animation

Video Editing

Web Design

Front End Development

Role
Creative Director
Mockup of an Apple iMac with the Bates Motel microsite on screen. The computer is lit from behind and above, creating a dark and dramatic image.m

A&E’s brief called for an animated, horizontally scrolling timeline of seasons one through three. They gave us copies of every episode and ample freedom to explore the experience design.

The result was a rich, visual tapestry of the entire Bates Motel narrative. Using sequence design, animation, and inline video clips, users cautiously scrolled their way through the tumultuous timeline of the Bates family. As they advanced the story, a new vignette would bleed (like ink) onto screen, further revealing the dark underbelly of White Pine Bay.


Screen mockup of the Bates Motel loading screen featuring a high contrast painterly image of Norman Bates' house with blood smeared copy that reads: Welcome to Bates Motel
Screen mockup of six onbarding icons used on the Bates Motel microsite. The icons are paired with text that call things like loading, navigation, and mobile prompts to swipe.

Outside of efficiently loading lots of PNG sequences, onboarding the viewer was our second biggest challenge. These are a few onboarding and way-pointing designs to help guide viewers through the experience.

A set of three super wide, seamless images from the Bates Motel microsite. Each image strip represents one of the three featured seasons.

We started the design process by binge-watching seasons one through three and making note of narrative highlights. These vignettes were paired with a brief line of dialogue and a video clip that served as the visual roadmap for each season. We worked with the Bates Motel showrunner to ensure each vignette moved the story forward in a clear way.

Each narrative sequence donned its own visual treatment. As the timeline of the show progressed through seasons (and as Norman’s psyche gradually unraveled) the visual contrast and stylization increased.

Wide image of a few season one vignettes featuring the start of the series.
Close up crop of a single season one vignette featuring Norma defending her motel.
Wide image of a few season two vignettes featuring Norma reading about a recent murder in their town.
Close up of a single season two vignette featuring Norman at his teacher's funeral.
Wide image of a few season three vignettes featuring Norman Bates mentally unraveling and turning into his mother.
Close up image of a single season three vignette featuring Norman as the motel manager.
Mockup image of a triptych of poster designs for each of the three Bates Motel seasons.

We also design limited edition promotional posters for each season that were provided to Bates Motel’s biggest fans.

Credits

Client

A&E / Bates Motel

Creative Directors

Greg Gunn, Marissa Grasso (A&E)

Production Company

Blind

Executive Producer

Tobin Kirk

Producer

Scott Rothstein

Design

Belinda Rodriguez, Meir Lee, Paul Kim, Rachelle Moon, Ram Bhat

Development

Rishabh Aggarwal

Storyboards

Ben Kendall, Karen Wang

Animation

Daniel Zhang, Pablo Robleto, Wu Hyun Lew, Yosh Bolivar

Video Edit

Ryan Dahlman

Producer

Scott Rothstein

Music

Adam Sanborne