.
The Mad Men Experience, Site of the Day, 4th June 2015

What did you want to accomplish with the site?


With respect for the artistic integrity and partnership with Mad Men, the Google team looked at this like a digital art exhibition that could be appreciated by newcomers and aficionados alike.

In a physical art gallery, you can walk in and follow a linear and curated path, or you can bounce to the back of the exhibit hall if you want to find your favorite piece. It’s up to you. Maybe you come across something you knew, but forgot you loved. As you poke around, common themes and characteristics of the artist come to light, and one thing sort of leads you to the next depending on what piques your interest.

Then ­ if there’s something you really love, like a particular season or episode ­ you can buy it in the “gift shop.” That’s basically how the site works, from interacting with content to being able to then purchase what you love on Google Play.

The timeline gives a subtle nod to the iconic carousel scene. It’s linear, elegant and intuitive to users, with deep dives into the show’s themes.


What technical challenges did you encounter and how did you solve them?

Because of the aggressive timeline (We had roughly 6 weeks for design and development), the biggest obstacle was laying out the foundation of the content/photo libraries and constructing the framework we would use.

We knew the interactions we wanted to create and the scale of data we were going to be working with, so we had to make choices early on of how we were going to build this without running into any surprises.

One of these was choosing canvas as a way of rendering the timeline/season component. We knew the scale of how much needed to be shown, and how fluid the effects here had to work, so right away we worked around making this section of the site almost entirely animated in canvas.

As a result frame rates are super smooth across devices. Just using the DOM/HTML would have resulted in dropped frames.


What did winning the FWA award mean to you?

It means a lot to us. We are very proud of the project and are honored to be given such recognition.


Tools used

The technology stack was run on top of the very easy to use App Engine platform.

Without using Google’s App Engine platform our development time would have been substantially longer.

In terms of deployment and structure the platform allows developers to get up and running in seconds, and there are a lot of rich features automatically in place to manage a high amount of traffic.

We built the backend in python, and templates were built in mustache. The frontend was built using stylus for css, backbone, underscore, pixi, tweenMax, and Zepto for javascript.


Three hot facts

- Close to 3,000 image assets for the site

- We are pre­rendering every single page, which makes the website accessible and SEO friendly, and faster on the first loading

- When traveling through time you are also traveling along a cityscape inspired by the cityscape used in the original Mad Men poster. We kept the cityscape very abstract in order for the user to get into the right 60s and 70s psychedelic feeling.

Credits:

Stinkdigital & The Zoo [Google]

By:
Eugene Buono, Creative Director, The Zoo [Google]
Erik Herrstrom, Art Director, Stinkdigital
JP Gary, Creative Technologist, Stinkdigital

Links

hr













All rights reserved © 2000 - 2015 Favourite Website Awards (FWA) -  Terms & Conditions -  Privacy statement -  Cookie Policy -  Advertise -  About FWA -  Contact