Airbnb - Same sex marriage in Australia

UX Engineer

Frontend Engineer

CTO

HTML5

JavaScript

Vue.js

Airbnb

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 “Belong Anywhere”. To bring these core beliefs to life not just by saying it, but through real world action, Australians were asked to wear a uniquely designed black ring, to publicly show their acceptance of marriage equality.

A creative online experience enabled Australians to receive their ring, pledge their support to marriage equality, and understand the same sex marriage political debate.

My role

As Technical Lead, my role involved to:

Liaise with internal and external stakeholders to help with creative, scoping, prototyping and initial client pitches for the creative web experience.

Lead a small team of x2 developers and a tester to build the rich web experience, with a tight creative integration and a short 6 weeks timeframe.

Prototype solutions the most complex parts of the build. In total, three JavaScript libraries were developed to create unique interactions and animations.

Key results

Earned multiple awards including a Cannes Silver Lion, Webby Awards, Developer Awwwards, and CSS Design Awards.

Within 3 days, Airbnb became the most talked about brand in the same sex marriage debate, globally. 200,000 acceptance rings claimed over Australia.

Qantas, Google, ANZ, eBay, Foxtel and other major corporates quickly rallied Airbnb in their fight for marriage equality. Over 110,000,000+ media impressions, later turned the campaign into the biggest corporate push for any LGBTIQ issue in history.

Same-sex marriage became legal in Australia from December 2017, about 8 months after the Until We All Belong campaign launch.

Technology

Throughout the online pledge process, people could select a matching hand and a statement. Based on the selection, a unique social image was generated to share on social. We had a total of 1,476 unique hands/pledge combinations possibles.

The client-side interface was built using Vue.js and engineered around AA accessibility requirements, making the experience fully accessible for auditive, cognitive, physical or visual disabilities.

To accomodate with complex animations and assets, I developed a bespoke JavaScript library able to animate large memory intensive Sprites. The library was later released as an open-source package: https://github.com/maoosi/spritz.js