Date:
November 2015
Client:
FitBit
Collaborated with:
The Vacuum
Links:
fitforgood.fitbit.com (U.S. only)
Standalone demo of leaderboard
The good people at The Vacuum asked me to work on this interesting, challenging project with them. FitBit had a short campaign during November 2015 called “Fit For Good” where FitBit users would choose one of three charities to “step” for. Each user’s step-counts would go towards deciding how much FitBit would donate to each of the charities.
Sadly, only U.S. residents were able to see the site and participate in the campaign, but you can see screenshots and some demos of some of its functionality below.
The main challenge I was tasked with solving was the interactive, animated leaderboard at the top of the site. Not too long ago this would have been accomplished fairly easily using Flash, but given that we wanted this to work on mobile devices as well, we had to find another option. We could have opted to use the HTML5 Canvas element, but in the end decided SVG and a good deal of JavaScript was the way to go.
The site was built using Backbone for the JS framework and Node for the server-side processing.
Since the campaign was so short-lived and was visible only to U.S. residents, I’ve included an interactive demo of the leaderboard below.
Click on the hands or logos to see a more detailed breakdown of the data per charity.
