News

How Media Monks built Jack Daniel’s Stories from the bar

The eternal tongue-loosener Jack Daniel’s and its friends reveal tales of mischief, revelry and occasionally whiskey

stories01

The eternal tongue-loosener Jack Daniel’s and its friends reveal tales of mischief, revelry and occasionally whiskey

stories01

Project: Jack Daniel’s: The Few and Far Between | Web: barstories.jackdaniels.com | Agency: Arnold Worldwide – arn.com – MediaMonks – mediamonks.com


A good tale is often told once a few drinks have passed the lips, and there is no better setting than a bar for an outlandish story. Bars are where the seeds of a story are sown and tales transpire. It is the perfect combination of alcohol and location that forms the Jack Daniel’s digital offering, ‘The Few and Far Between’. Taking its cue from the endless anecdotes offered by a universal community of bar folk, the captivating online campaign features “tales of mischief, revelry and occasionally whiskey” as regaled by bartenders, bouncers and barflies across the USA.

Told through a mix of film, photography, audio and cinemagraph, stories are brought together in an animated scrolling collage, compiling diverse content into a single online space. With a story to tell it was a matter of bringing the concept to life. This is where the award-winning creative agency Arnold Worldwide stepped in. They teamed up with another digital wonderkid MediaMonks, a creative digital production company that works with and for advertising agencies to craft high-end digital work for global brands. You may have seen their work before, their projects are so good they made it into Web Designer 222 with the impressive GMC project Incredible Thinking.

Creatives may need to absorb the surroundings of a project to get a true feeling for the finished article. But, as you might expect hitting a host of bars may hinder the process. As interactive director Jouke Vuurmans pointed out, “As a devoted club of digital artisans, the only type of bar we frequent is the space bar.”
Keeping a clear head is the ideal start to any project, perhaps even more so when working with a world-famous brand. Interactive director Jouke Vuurmans reveals how they quickly settled on celebrating bar stories and looked to bring film to the fore: “We had to make sure the effort paid homage to the age-old whiskey whilst appealing to millennials. Our initial thoughts for the pitch were that the campaign should celebrate authentic bar stories in an original yet unmistakably Jack Daniel’s style.

“We imagined the feeling of stepping into an actual bar and being surrounded by individuals with riveting personal stories. This is where the idea for the animated collage came from, which would bring all content together in one lively space. Using rollover animations, visitors would be able to get a sneak peak at the stories in the collage, making clear that there’s a story behind everything and everyone. Filling the website with gripping and entertaining tales would be one of the main challenges for this project, which is why we put forward MediaMonk’s films director, Joe Roberts to help to tackle this concept. Joe’s background in documentaries made him the perfect director for this project. We proposed to put together a dedicated content/film production team that would travel the whole of the USA in pursuit of stories that deserved a stage bigger than a barstool.

“Whilst essential, collecting the stories would be of later concern. First, we needed something that would help us win the pitch and push the project into gear. We proposed a beautiful transition effect that actually ended up being used throughout the site, which is a testament of our craft from the get-go.
“Jack Daniel’s was already excited about the potential of the campaign Arnold conceived, so there was no back and forth regarding the concept itself when we came in. Elaborating on the premise of documenting The Few and Far Between, we fleshed out potential avenues of design that would testify Jack Daniel’s historical relevance to these venues. With Arnold content with the design and animation mock-ups we presented, we formed a solid foundation to build on. We started thinking about how we can make this into an authentic experience. The people in the campaign were real and so were their stories, and we wanted the digital experience to reflect this… Joe spent time ensuring each story fit the right content type, resulting in stories with different lengths and modes of storytelling including film, audio and short written extracts. With the stories categorised, we chose to combine a collage style with a subtle grading that was present on each piece of footage. The resulting collage form allows users to go from story to story, all from a single interface, creating an experience that was analogous to the act of visiting a real dive bar and probing its patrons about their stories.


stories03
Each story is uniquely illustrated and can be viewed read or listened to


“Great storytellers make an effort to pull listeners into the story, and so we wanted to make the website do just this. It needed to be something that triggers and captures the user’s attention from the get-go, avoiding a design that is reminiscent of a DVD selection menu. Instead, we opted for living cover stories and contextual sounds that invite users to enjoy the content of the tale by providing a sneak preview, both visually and audibly.”

There is no doubt that the visual is critical for any great-looking project. But, how did MediaMonks make sure that they fulfilled the desired effect? Combining great design minds adds an extra edge as senior designer Kjegwan Leihitu reveals: “The design process started by presenting a series of mock-ups that pertained to a true dive-bar style. Opting for a visual collage made up of the bar stories we set to collect, the site took shape as a tribute to the venues themselves. In our pursuit of perfection, I teamed up with Arnold Worldwide’s Daran Brossard – a master of handmade typography. Combining the eloquence of handwritten text with the true-story collage, I think the design reflects both the nature of the content as well as the craft we brought to this project.

“While we had captured some fantastic footage, we knew it wouldn’t hold its own when implemented within a standard content site,” Vuurmans interjected. “The creative team wanted the site to go beyond a click-and-play experience. We imagined the site to have a palpable impact that emulated the venture of going to a bar; not necessarily glamorous but stimulating.”
“Before we started building this project, scepticism was high,” front-end developer Victor Garrido Aguilar announced. “When I first saw the animation prototype showing the effects we envisioned for the site I was convinced this had to be a Flash site. This wouldn’t be possible in HTML. However, we did some research and came up with some solutions in order to achieve those animations in the desired format.
“The site is entirely HTML, JavaScript and CSS. The main issue we faced was ‘double masking’, where the text is animated independently from the background. We achieved this using canvas-masking and experimenting with CSS-masking animations in order to synchronise them. We used a combination of techniques together with some libraries like EaselJS.”


stories02
The stories are cocktalied with an animated background and noisy chatter for a sense of realism


“The site’s back-end wasn’t difficult for us to manage. We mainly used PHP and the Silex framework, with MySQL as a database management system,” Vuurmans explained, “But of course there were a few technical challenges to overcome. Our ambitious animation direction, for example, was taken without a definite guarantee that it was going to work as promised in HTML. This was a prerequisite for building an experience that would excite people across devices. Not designed for HTML initially, the site’s heavy animations raised a few red flags internally – but it was nothing we weren’t prepared to take on. We love a good challenge and building sites like these also means building expertise which we’ll use for future projects.”

The Few and Far Between is no one-story-pony, it had a lot to tell and deliver. As Vuurmans succinctly put it, “great content markets itself”. But it undoubtedly needs a helping hand as Vuurmans explains, “The experience contains a lot of stories. While this makes a rich and diverse digital experience, the amount of work that went into the project as a whole created challenges to get it completed within the deadline. Each film, audio recording and cinemagraph had to be tailored to the stories’ content, and therefore each story deserved the same amount of attention to detail. Another tricky element was the story overview page. This was a time-consuming effort as its positioning and design were laid out by hand. We made it hard for ourselves because we couldn’t use a grid to layout the story footage and accomplish the style we’re aiming for, but with a little graft and dedication we pulled it off.

“The campaign is a milestone of the speed, quality and scale MediaMonks is now producing at. It’s a project that pooled together a variety of our resources, from film and artistic direction to design and development, rolling out a final product in only three months. The social media buzz surrounding the campaign’s release has been positive with users and critics praising the work’s presentation and content. The campaign is also getting acclaim from our peers in digital design and development. As of writing, it’s only been a month since the effort was realised to the public but The Few and Far Between has already racked up three industry awards.”

stories04

The final piece in a grand project is the aftercare, but how does this work when a project is created by the hands of more than one? The final word goes to interactive director Jouke Vuurmans: “We typically preview our site builds in a staging environment, allowing for tests and reviews before the finished production goes live. We push all our changes into the client repository which gets deployed on staging automatically. Once we have signed off on staging, the project is sent to production. As this process is crucial to the smooth launch of the campaign, it is a manual task that is appointed to the end-client’s IT department.
“One of the merits of in-house production is that every asset required can be produced and worked on from the moment the pitch is won, to the hours running up to the deadline. Designers and animators can exchange views with developers without any communicative downtime, allowing challenges (like the HTML in this production) to be overcome, rather than passed on. Moreover, it ensures that we can deliver the best possible work within the time available.

“With regards to aftercare, we’re building a second wave for the site that will contain new stories, set to go live on 17 November. In the early weeks of next year there will also be a third wave, regrouping older stories amongst the new ones on the overview page, ensuring every tale gains enough exposure. This will keep the experience fresh throughout the campaign period, allowing the opportunity to relaunch the site to users who have already visited.”

×