Neil
Carpenter

Design & front-end development

Social Effort Scale

The skinny

How hard are you trying on social media? Too hard? Not hard enough? Or are you one of the few effortlessly cool? The social effort scale will analyse your activity on Facebook, Twitter and Instagram and make that judgement for you.

Visit site

The not-so-skinny

Project overview

Production company - UNIT9. Agency - Barton F Graf 9000. Client - Axe (Unilever). The site's primary function is to take your recent activity from either Twitter, Facebook or Instagram and determine how "hard" you have been trying, visualising this data on interactive graphs. You can also compare your data to that of your friends on these networks. There is also an infographic of global social effort, and a map of processed tweets across the US and UK, all updated in realtime. It also allows you to generate a custom graphical summary of your score, on the fly, and post this image directly to Twitter or Facebook via their respective APIs. You can see a full site run through here

Responsibilities

My role on the project was Lead Front end developer at UNIT9, in a team of 7 developers. I was charged with created an algorithm that took cms-editable keywords, phrases, emoticons and alike, in addition to variable, cms-controlled criteria weightings, and generated a set of "ranked" posts when combined with a users' social media data. This algorithm is also used to process tweets in realtime, via a websocket connection to the Twitter streaming API. All of this computation was done asynchronously, entirely on the front end via webworkers. I was also responsible for all front end data management of users / friends scores across the three networks, and scaffolding the entire site architecture, as well as specific UI features such as the location based data and global stats.

Technical deets

The site is a fully responsive single page web-app, built on Backbone, jQuery, Underscore, CoffeeScript, Sass, PHP (symphony 2) and Grunt. It makes use of lots of HTML5 goodness, including websockets, webworkers, localStorage and canvas 2D. It is dependent on a lot of third party APIs for data, including Twitter API, Twitter Streaming API, Facebook API, Instagram API and Google Maps API. It also uses plenty of additional JS libraries, such as Easel JS, Tween JS, Box2D, Tween Lite, Select2, Moment JS, Spin JS, iScroll, minEmoji, Fuse JS, amongst others...

Outcome

  • Axe - Social Effort Scale
  • Axe - Social Effort Scale
  • Axe - Social Effort Scale
  • Axe - Social Effort Scale
  • Axe - Social Effort Scale
  • Axe - Social Effort Scale
  • Axe - Social Effort Scale
  • Axe - Social Effort Scale
  • Axe - Social Effort Scale
  • Axe - Social Effort Scale

Share this