DonateLife's Kin Quiz

with Think HQ

The challenge

The DonateLife Network is a non-profit agency run by the Australian Organ and Tissue Authority. Their primary goal is to increase awareness about organ and tissue donation.

To promote DonateLife Week 2014, they commissioned the Kin Quiz–an interactive way for friends and family to learn about their loved one's end of life donation wishes.

My role

Think HQ, the public relations agency for DonateLife, came to me and asked to help them through the whole development process. This meant concepting exactly what the app would be and what it would do.

Next came a sitemap, wireframes and a design. I took a mobile-first approach to the application layout as it was determined to be the way most users would be interacting with the application. After several rounds of design revisions, I was ready to start building.

To power the application I constructed a REST API in PHP on top of the Laravel framework. Using its built-in routing and Eloquent ORM was a treat after having constructed similar systems without the niceties Laravel provides.

Because of the social nature of the Kin Quiz, I used the Facebook API to authenticate users and deliver the quiz to their friends and family. Backend integration of the Facebook SDK allowed me to aggregate and cache user data to speed up rendering times.

The frontend is powered by a combination of Javascript libraries: Backbone.js for routing and structure, Backbone.Epoxy for two-way data binding, Handlebars for templating and a custom implementation of nested data models for Backbone. Far from a Frankenstein, all the pieces played together very nicely and were tied in with the REST API via AJAX.

To give another layer of polish, I added an array of animations powered by CSS transitions. They took the static-feeling web application and made it feel more native. Using CSS for the animations also made them incredibly smooth on mobile devices.

Year: 2013
Role: Development, Design