Inside CHANEL
A exploration of the history of CHANEL in 26 chapters told through video and animation.
I was Senior Art Director on the interaction Design of the experience which lives on chanel.com In order to get the interaction timing perfect and seamless for the viewer I created animated prototypes in Principal that covered every nuance of the smooth transitions from video to historical photo libraries from the CHANEL archives.
Responsive Prototypes
Below you can see the consideration given to three breakpoints with mobile of course functioning very differently than desktop.
Animated Navigation Menu
Upon landing the newest chapter of Inside Chanel appears as a short preview playing in the full background. Clicking on the menu icon pulls up all 26 chapters in thumbnail form for perusal. On hover, each video plays a mini-preview. On click, the menu pulls down and reveals the Chapter in full- in this case Marilyn Monroe and Chanel No 5.
Navigation Menu Stills
Mobile view stacks whereas desktop takes on a more editorial two column layout.
The design of the mobile experience takes into consideration how to move through the chapters smoothly and preview videos within the menu. Each video plays as it hits the center of the screen on scroll.
The mobile navigation was redesigned from the drawer menu of a text column on the left to the visual navigation with video auto playing as it hits the center of the screen on the right.
This shortened the number of taps to get to video content and gave this a much more beautiful editorial look and feel.
Chapter to Gallery
From the Chapter Page one can get to the Gallery and browse a library of historical photographs related to each chapter and zoom on each one. This gallery is accessed by a discreet menu on the right-hand side.
Mobile Chapter to Gallery
To get the timing of all interactions perfect, I developed an animated tappable prototype capable of video integration using a niche program- Principal. In this way we could share details as granular as how the menu will enter the screen, how the video will auto play as it hits the center of the screen, and how the copy will fade as it nears the top logo. This was the precision we were able to deliver to CHANEL for their site.
Photo Gallery
In the Photo Gallery one can browse through the photo archives of CHANEL as they relate to each chapter of the brand history.
Mobile Photo Gallery
Timeline
The above shows the transition from the Navigation to the timeline portion of the experience.