Notice: Undefined index: order_next_posts in /nas/content/live/gadgetmag/wp-content/plugins/smart-scroll-posts/smart-scroll-posts.php on line 194

Notice: Undefined index: post_link_target in /nas/content/live/gadgetmag/wp-content/plugins/smart-scroll-posts/smart-scroll-posts.php on line 195

Notice: Undefined index: posts_featured_size in /nas/content/live/gadgetmag/wp-content/plugins/smart-scroll-posts/smart-scroll-posts.php on line 196

GMC: The start of incredible thinking

When car maker GMC called for a heavenly digital campaign for the all-new 2014 Sierra, they happened upon a holy union. We discover how MediaMonks worked its magic for its new pickup partner…


Project: Incredible Thinking Starts Here | Web:
Agency: DigitasLBi/MediaMonks | Web:
Duration: 12 weeks | People involved: 32 Monks

This month’s Design Diary starts here. No really, it’s already started now. We reference of course, rather facetiously, our latest featured project – a triumph of ‘Incredible Thinking’ from one of the world’s hottest agencies. American pickup and utility vehicle manufacturer GMC worked with DigitasLBi and crucially MediaMonks to conjure a divine web experience for the 2014 Sierra.

Christened to signify the technological innovations being marketed, the project immediately demanded a new way of thinking. Flat, single pages filled with uninspiring lists of specifications and accessory options were rejected in favour of something much more ambitious. “Our design, animation and film departments set about creating a Hollywood-calibre CGI Sierra and 3D environments, entirely from scratch,” MediaMonks enthuses. “The result is a carefully sculpted video experience that can be explored in depth and detail as well as across devices thanks to HTML5.” The eventual solution would embrace bespoke mobile and tablet versions, scooping double FWA accolades for setting new standards across desktop and beyond.

MediaMonks is no stranger to industry awards however, with work recognised by the BIMA, Cannes Lions and Webbys to name just a few. Boasting an in-house team of 200 ‘Monks’ scattered across global offices, they work with leading advertising agencies to craft content for web, film, gaming and mobile. ‘When it came to the Incredible Thinking Starts Here campaign, the collaboration blossomed from a meeting of minds over the potential for digital innovation. “We pitched to work alongside DigitasLBi in their quest to push the boundaries of the scrolling website experience,” begins COO and co-founder Wesley ter Haar. “They felt we shared an affinity for their thinking and asked us to join them on the job.” More specifically, the two parties agreed that the traditional paradigm for a scrolling website needed shaking up a little bit. While doubtlessly useful for visual storytelling, the feeling was that they can seem lightweight, two-dimensional and thin. “Therefore, from the very beginning, Digitas and MediaMonks agreed that we needed to, literally, add a new dimension to HTML5 scrolling sites,” Wesley continues. “Using some clever 3D animation, the experience takes you in and around every element of the truck across six different environments and stories. Therefore, as opposed to a single, linear page – or even the currently trending, illusory parallax effect – the storyline for the GMC uses video scrubbing to scroll through the 3D-rendered truck and its environments, to tell its story from six entirely different angles.”


Of course before all this could be realised, the project would naturally require a high level of communication between all involved. MediaMonks, DigitasLBi and the client brand GMC would engage in a truly three-way dialogue continuously to arrive at a shared vision. “MediaMonks’ specialty is enhancing a Big Idea right from the initial concept stage, so we’re usually brought in to help very early on,” says producer Xander Amo. “In these instances we can be given quite a lot of freedom regarding direction, in exchange for being extremely flexible when it comes to feedback. As a production company, it’s important to understand that the goal posts can often move mid-game – it’s part and parcel of the work. The trick is to be as transparent as possible from the very beginning, so that you create opportunities for change well before the deadline!” In fact when it came to this particular project, MediaMonks and DigitasLBi opted to take these chats a stage further and bring the two together. A Digitas art director, creative director and head of production would fly over from Boston and stay at the Amsterdam HQ for a week to establish a smoother workflow. “This sort of close collaboration was extremely important, as the user interaction and interface went through some substantial changes and iterations as we discovered what worked and what didn’t.”

The chatter from the early stages wasn’t purely all talk, neatly enough. MediaMonks animators had in fact been building 3D models for emulating the potential paths for the story prior to the initial pitch. Not only did this help to practically describe engineering concepts from day zero, but also with testing the feel and functionality within the crossfire of constant innovation. “Taking UX into careful consideration in this way also allowed us to connect the action of scrolling to specific scene transitions,” elaborates Wesley. “We wanted to make the user’s actions feel purposeful when interacting with the story, so scrolling became a tool for submerging the user’s point of view underwater (to experience the truck’s submarine steel); a tool for replicating the motion of closing its window (to test the soundproof cabin against the blades of a chopper); and a tool for breaking through bedrock to experience the Sierra’s brakes, amongst other things. In other words, we wanted your interactions with the website to feel like their own forms of the functional, professional-grade thinking behind the GMC truck.”


Speaking of user interactions, the ways in which visitors would engage with the site was always of paramount consideration. The progressive, future-thinking ethos of GMC’s Sierra really demanded a matching outlook when it came to catering to modern web consumption: “Ensuring the experience accommodated all forms of user interaction was a primary concern of the project from the start,” confirms Arthur Dam, senior creative technologist. “We wanted to deliver an end product that excelled in each platform environment, tailored to the capabilities of each. To do this, we broke the entire site down into four categories: high-end desktop, low-end desktop, tablet and mobile. After some early prototyping, we made the decision to separate mobile from the rest of the build in order to maintain quality and consistency. We animated in Flash, exported via CreateJS and finally implemented in Canvas.”

This strategy, however, would not prevent the website from representing an enormous visual and graphical challenge. Anyone looking at it can appreciate that it is extremely front-end heavy, based largely around a continuous interactive film of CGI-based footage. The experience is really a journey through wild and varied environments, alongside cameos of the vehicles that are so essential to the Sierra story: “Everything was drawn and built from scratch by our visual designers, and made to move in three dimensions by our 3D animators,” reveals creative director Jouke Vuurmans. “This included a full 3D render of the truck, both inside and out, so we could tackle each of the six scenes from different perspectives. In order to improve the quality and realism of the final product, a few shots were filmed and then composited into a final render. For example, in the ‘Exterior’ story, the viewpoint of the user transitions underwater. MediaMonks Films department shot a live-action backplate of an immersion blender churning water bubbles through the clear walls of a fish tank. We then used this in composite for the realistic bubbles and fluid dynamics.”


From this you can appreciate how valuable the multi-disciplinary skill set that MediaMonks has at its disposal is. The ability to leverage such expertise for front- and back-end production would be pivotal from planning right up to final build. “From a design and film perspective it all started with sketching in Illustrator and moving into Photoshop for the end-quality, blockbuster-like graphics,” Arthur Dam explains. “Next to this, MediaMonks Films utilises a large array of tools for their work, the main ones being Maya (the V-Ray extension was used for production renders), Final Cut, Houdini, After Effects, Nuke and Da Vinci Resolve – pretty much implemented in that particular order. From a development perspective, we built the entire site with TypeScript (a superset of JavaScript), using an MVC engine we built in-house, which was quite heavily modified to accommodate the site’s unique structure. Alongside this, we leveraged JavaScript engines such as jQuery, RequireJS, TweenLite, PreloadJS to name a few – which helped save the development team a lot of time!”

With what only constituted a three-month project cycle, time was certainly of the essence with ‘Incredible Thinking’. Fortunately in the lead up to delivery MediaMonks knew that distribution and marketing would at least be handled by the agency partners, even if the mobile elements were invaluable tools here: “We obviously did make sure that the experience is available on all platforms, including a mobile version that really holds its own,” insists producer Xander Amo. “Consumers increasingly do their research on the move, so we wanted the mobile website to leave its own lasting impression, not just prompt you to make your way to the desktop version. We therefore carefully recreated all of the key animations specifically for mobile, to ensure that they ran as smoothly as possible on handheld devices.”

So what happened with the big, eventual handover? That three-way system of communication and workflow at the planning phases remains just as relevant during delivery. This really becomes as much a process of integration for everyone involved, moving into a period of iteration and content support.

“The way we operate means completed projects aren’t simply passed from agency to company client,” explains Wesley ter Haar. “Instead, there is an extremely integrated workflow process, where in this case strategy and concept from DigitasLBi is interfaced with design, development, animation and 3D elements produced by MediaMonks. Then when campaigns like GMC first go live, we like to employ a method known as a ‘tweak week’. Tweak weeks are an important aspect of the production process for projects of this size; after launch, we perform a stringent review and collate a list of feedback from all parties involved. This review and feedback is then used to polish the final product to perfection, and push out a second version. The great thing about this way of working is that it allows you to address any unforeseen issues in the first offering, while bringing the final product up to a level that often surpasses even the original, envisioned outcome.” With such unfaltering attention to detail, it’s no wonder that the site turned out so incredible.