AirbnbUntil We All Belong

In 2017, Australia was the last Western country in the world not to recognise same sex marriage, while Airbnb’s core mission statement at the heart of the brand is to help create a world where anyone can belong anywhere, to foster openness and inclusivity and to share these values on with the world.

To bring these core beliefs to life not just by saying it, but by bringing it to life through real world action, Clemenger BBDO asked Australians to “wear this ring and show your acceptance of marriage equality”. Our idea was to take one of the oldest symbols of marriage – the wedding ring – and turn it into a symbol for marriage inequality, the Acceptance Ring.

Clemenger BBDO Melbourne
2017
Vue.js, Webpack, Html5, Sass, ES6 JavaScript, Spritz.js, Node.js, Contentful CMS

My involvement into the project started at its early stage, with concepts and research work across the different parts of the web experience, along with technical scoping and solution engineering for the serverless architecture. I also had to deliver early stage prototypes to present and sell the idea to the client.

During the production phase, I had to lead a small team to build the high-end Front-end experience, with a tight creative integration and a short 6 weeks timeframe.

Winner of a Silver Lion at Cannes, plus awarded on Awwwards, and CssDesignAwards, the project allowed over 100,000 equality rings to be claimed by Australians.

Technical Breakdown

The website is WCAG 2.0 AA compliant, and fully accessible for auditive, cognitive, physical or visual disabilities.

We’ve developed 3 different Vanilla JS libraries for the project – one for the x/y hand selector, one for the pledge selector, and one for the homepage interactive tiles.

There is a total of 1,476 different hands/pledge combinations that you can pick from during the acceptance process.

By using WebP format capabilities, we’ve reduced by up to 4 times the size of the different image assets. This drastically helped reducing the loading times across the whole experience.

The ring animation has been brought to life using Spritz.js – an Open-Source library that I’ve built to easily animate sprites with JavaScript.