Love By Numbers

To celebrate the 2017 Sydney Gay and Lesbian Mardi Gras festival, Google partnered with Australian Marriage Equality to ask people from all over Australia to share their thoughts and experiences about love – from what’s an acceptable public display of affection, to who we love and how deeply we feel it, to whether we believe in marriage equality.

Users can explore the key results of the survey through a beautiful interactive website. The website is comprised of two primary pieces - a WebGL component built using Pixi.js to drive the interface, and Vue.js components that power the interactivity, which I developed.

A single line threads the experience together, as the user moves through the survey results in 8 categories.

A single line threads the experience together, as the user moves through the survey results in 8 categories.

Fun & Playful Exploration

A playful and engaging interface, held together by the use of a single line drawing, invites the user in to explore the site. Each of the 8 categories of the survey has a distinct visual representation, and users can navigate backwards or forwards for a free-form exploration of the results.

love-by-numbers-mobile.png

Fully Responsive on Mobile

The experience is responsive and adapts gracefully to mobile devices.

Building with Components

Website elements were implemented, extended and re-used as Vue.js components. This includes the headers, swipe menus as well as landing and about pages. 

The app was packaged and built using webpack and babel, with optimisations to keep the website payload small and quick to load.

Development

HTML, CSS (Skeleton) and Javascript
Vue.js and Vue components
Pace.js
Node.js, Webpack and Babel for development and build