At Mezzanine, we believe that creativity should be in service of something greater. When purpose-led organisations like Animals Asia bring bold ideas to life, we see the true magic of design, technology and heart working together to create meaningful change. The following piece was written by Karl, our Head of Development. It’s a behind-the-scenes look at the technical thinking that brought the ‘Let a Bear Sh!t in the Woods’ campaign to life — a campaign built to make people laugh, care and take action. The campaign tackles a confronting issue with a cheeky sense of humour, but beneath the clever creative is a serious mission: to end bear bile farming for good. It’s led by the visionary Jill Robinson, whose story you can read here.
Our brief for the ‘Let a Bear Sh!t in the Woods’ campaign was very clear and the creative solution was a walk in the park. However, the technical scope was open – it was up to us to find and recommend the right solution to achieve Animals Asia’s goals, a solution which was completely cross-browser and cross-device compatible.
My role as Developer was to enable the campaign to spread effortlessly across social media, maintaining the humour and charm of the creative concept and the animation as it did so. The project is intended to be the first step for Animals Asia supporters, they are not already engaged with the organisation, and therefore are unlikely to be tolerant of technical glitches or delays – we wanted to deliver maximum pledges and donations without any barriers to taking part.
Flash would at one time have been the language of choice for this kind of animation and would be more flexible and faster to program in some elements but it doesn’t deliver on the compatibility. The HTML5 stack on its own would be onerous to program a complex set of interactions like this. Our solution was a combination of HTML5 and external tools like Edge Animate. This also allowed us to cater for different browsers and their idiosyncrasies.
Close collaboration with our Designers made sure that the technical limitations of HTML5 weren’t visible to the end user – for example, the animation loops until you interact with the page – e.g. to donate – and with careful consideration to looping, timing and positioning we ensured that the graphics didn’t ‘jump’ when you transition between the two.
The animation is customised to the user’s name which also requires some thought, first in design to cope with any (feasible) name. To enable sharing of customised pages across social networks I would usually create a database token that referenced the customised data, then attach the token to the url when sharing it. The token could also be used to create short urls. However, these options couldn’t be supported by the clients’ CMS as we didn’t have a database to store the customised data in. Instead, we attached the data directly to the final URL.
The campaign is multilingual so the data was base64 encoded first to support international character sets. We then implemented internationalisation on all the text elements. The animation uses Javascript to pull in the relevant language on page load depending on the user’s browser language settings.
Our favourite part of the solution is that, even if Javascript or other parameters fail, the default page is still usable; the overall user experience of the page isn’t broken and users can still make a donation even if the animation isn’t fully loaded. This is a result of the structure of the page build and being mindful of the user and the brief from the start of the build.
This kind of work is what energises us at Mezzanine. It’s where technical precision meets big-hearted storytelling, where every detail is designed to support connection and contribution. We’re proud to partner with organisations like Animals Asia that are rewriting what compassion looks like in action.
Because when purpose drives the project, and people stay at the centre, the technology follows suit — and everyone wins.
