Merrell dGBC Website
Boxed in opportunities
Twice a year, Merrell features its upcoming products in the Global Brand Conference. Each brand uses the same platform to build a site for vendors to gather info and place their orders. However, this platform is extremely limited and caters to static image based "tile" building process. Merrell's seasonal product campaign needed to be bold, confident, vibrant and amplified...sooo jpegs?
I was brought in to look at the existing platform and see what opportunities might be had within these "boxes". What to do? I rebuilt the structure of the platform on my local machine, identified opportunities and proposed designs, motion and animation to amplify the product campaign.
Accepting the tile size limitations (1600x640px widest / 800x800 tallest), I found that the best solution available would be iFrames...yes iFrames. Though I couldn't access the parent from inside the iFrame, I could control timing and animation with CSS/JS. This approach allowed me to bring the pages to life with CSS animation and a design system that embraced the size limitations while offering vibrance and color from textural nature photography. It was a hit at the show and a great example of finding opportunity in an otherwise stifling, boxed in creative situation.
Frame it In
A short walkthrough of some of the moderntechniques used within a rigid platform. Judicious use of iFrames throughout meant every element was in essence its own tiny site. The homepage featured into animation and a video element pouring texture into the product, this was the initial introduction to the non-static approach.
Bold Nature
Merrell has a clean aesthetic throughout its branding, so photography of vibrant natural textures was used to amplify the campaign look. I wanted to find a way to emphasize depth within the art and found that meticulous SVG masks would allow elements of the textures to interact with the typography.
In Motion
A consistent animation system was developed for user interactions that were previously static. Creative use of CSS, JS and SVG were fundamental to bringing elements to life.
A Whole lottie Love
Hotspots. We all know them, we all know how to use them. How do you pull it off when the platform "responds" to the browser like a shrinking PDF?? Lottie to the rescue. In order to keep page weight down, the Lottie files didn't include the product art. Ratio based containers and SVG elements were combined to keep things sized appropriately.
Email Sequence
The campaign look was carried through to the email communications as well. Extending from the current designs in use by the brand, this look had to bridge into the texture, vibrance and confidence of the dGBC campaign.
Zoom
Zoom backgrounds were available for users of the site and they served as an opportunity to lean in to the explosive natural colors.
