We at driftlab were thrilled when Godfather Studios approached us to create an online experience for their BACARDI Mojito Cocktail promotion.
The subject offered much to play with: the Caribbean vacation feel, the process of mixing the recipe, and the use of the ingredients as visual site elements.
Comps signed off
Because we already had a fairly accurate vision for the site, comps were created and signed off on quickly. The emphasis here is on "signed off” - a process whose importance we cannot stress enough.
If there's one thing we've learned from years of doing this innerweb stuff, it's that you get clients to sign off as much as you possibly can.
They LOVE to change their minds, once they see what is possible, and none of us designers, whether it’s the international agency or you by yourself in the basement, can afford scope creep (a beautiful project management expression referring to the growth of the client’s expectations without the growth of his budget).
Into Phase 2
So BACARDI liked the comps we presented and we were off to phase 2:
- Defining the content
- Establishing the technical details
- Setting a timeline
- Taking all of that and comparing it to the budget and ensuring that it made sense for all parties to move forward
- And lastly (and yes, most importantly), having everyone sign off on everything
Now that we felt like we had minimized the element of surprise, we were ready to move forward. Once our usual 50% upfront had arrived, we went into production.
Time to get moody
Barely into it, we knew our friend Marc Preston needed to give us a heartfelt Barry White style "Mojito" to get the viewer in the mood. We’ve used him for a variety of projects and found time and time again that the use of a professional voice talent adds much to driftlab projects.
The site build
Next came the creation of the site build and the intro, which per BACARDI’s request, consisted of a Mojito mixing “tutorial.”
We went through a process that we have pretty much perfected at this point: finding usable stock imagery and image assets provided by the client, treating them in Photoshop, and exporting transparent PNGs for use in Flash.
During the animation process we also created the sound design, giving the clip more depth and making it more tangible to further enhance the experience.
Making life simple
When building a sliding menu, or really, _any_ menu that requires movement, do yourself a favor and learn how to work with easing equations. They’re simple to implement, extremely processor friendly, and always there for you.
The video player for the “Mojito TV” section was coded for streaming playback and progressive download, skinned and added to the site, in order to reliably play the clip provided by the client.
That clip is fairly long, but thanks to the appropriate code and optimized FLV compression, it plays almost instantly on most Internet connections.
“Evites,” “Downloads,” and “Bars” sections – pretty straight forward. It took some code (powered by .NET) to make the evites actually arrive, but most of our time went into the design of these (and we grew quite fond of #5CC63E and #387E2C in the process).
Even the not-so-keen observer will recognize the animation for the “Recipe” section came straight from the intro – only this time with interactivity. Behold the awe-inspiring power of Flash!
Human Guinea Pigs
Of course we used ourselves as Guinea Pigs to test whether our little tutorial would actually work, and we can claim with confidence that at this point each of us can pour one mean Mojito.
Here’s to making the web more fun and saving the universe, one drink at a time. Cheers!
About the author, Scott Cook
Scott Cook is Director of driftlab,llc, an interactive collective based in Atlanta, GA.. Scott lives in Atlanta with his wife and 2 children. He enjoys Pena Coladas and getting caught in the rain.
Article Credits: Scott Cook and Moritz Bosselmann