Loading ...

Responses by Hedy Magroun, creative director, Brewster Studio.

Background: To mark its 60th anniversary, Dr. Martens created an interactive game in partnership with Parisian-based design firm Brewster Studio and illustration duo Førtifem, playfully taking visitors through six decades of Dr. Martens. The aim of the game was for visitors to find all 60 clues and test their brand knowledge with a quiz. Sixty players would win Dr. Martens products—if they could find all 60 clues.

Favorite details: To write the story of Dr. Martens in 60 clues took a huge amount of copywriting. The Dr. Martens team did an amazing job finding and translating them.

Challenges: Adapting the pictures and make them parallax. We chose to manage the position of each element, and adapt the depth and speed. Some parts had to be drawn with a hide zone.

The mobile version proved to be a challenge as well. At the start of the project, we hoped to make a cross platform website, but it ended up being too complex. The parallax was too heavy for mobile memories, so we had to reduce the animations too.

New lessons: It’s really too difficult to control the result on mobile. The comportment is too different by browser, operating system, screen size and zoom.

Navigation structure: The site is a point-and-click game. Really simple. Anyone must be able to play easily and access the quiz at any time.

The quiz displays random questions from a master list of 60 in three levels of difficulty. The first and second question are easy, the third and fourth are of medium difficulty, and the last is always hard.

Technology: We used a very old software, Adobe Edge Animate (on the Creative Cloud), because it enables us to mix CSS and JavaScript with animation timeline work. We used jQuery, GreenSock and programming on our own.

Anything else? If you roll over some elements, a rollercoaster-like launch plays. The footprint on the floor is managed in CSS 3D. And on the desktop version, you can turn on the amp to play music from Mixcloud’s Dr. Martens playlist—we connected it with an iframe.

drmartens-unlaced.com

Browse Projects

Click on an image to view more from each project
X

With a free Commarts account, you can enjoy 50% more free content
Create an Account
Get a subscription and have unlimited access
Subscribe
Already a subscriber or have a Commarts account?
Sign In
X

Get a subscription and have unlimited access
Subscribe
Already a subscriber?
Sign In