Neil
Carpenter

Design & front-end development

Three Calendar Me

The skinny

Create a calendar all about you, as a gift. You’re so thoughtful.

Visit site

The not-so-skinny

Project overview

Production company - UNIT9. Agency - Wieden+Kennedy London. Client - Three UK. We were tasked with building Three's Christmas 2014 campaign, which allows users to upload / take a photo of themselves, and create an annual calendar, which they can then share, or download as a PDF. They also had chance to enter daily competition to have a printed version delivered to them. You can see a full run-through of the site here

Responsibilities

I was tech lead on the project at UNIT9, responsible for managing team of up to 9 developers, guiding technical decisions and liaising internally and with client throughout the course of the tight-timeline project (5 week production).

Technical deets

The site is fully responsive, working across desktop, mobile, tablet. Front end is a Backbone app based on UNIT9's coffee-bone boilerplate, which uses Backbone, Underscore, jQuery, TweenLite, Modernizr, CoffeeScript, Sass, Gulp, Browserify. The FE also uses some JS plugins such as Fabric image editor, and slick.js carousel. I also wrote a node script to integrate with our gulp build process that automated deployment and versioning of static assets to S3, as well as interpolating static asset references throughout the front end codebase to use S3-hosted assets in production. The backend is Python + Django on AWS, using EC2, S3 and ELB. The backend image processing is handled by dedicated instances running OpenCV 2 on Python, with ReportLab to generate PDFs. The entire backend is configured to auto-scale based on user traffic to keep response times low (full calendar - 12 months + 1 cover, would be generated and uploaded to S3 in under 5s on average) which was an essential prerequisite of the build as it was the target of a high-profile media drive.

Outcome

  • Three Calendar Me
  • Three Calendar Me
  • Three Calendar Me
  • Three Calendar Me
  • Three Calendar Me
  • Three Calendar Me
  • Three Calendar Me
  • Three Calendar Me
  • Three Calendar Me

Share this