IT’S ALL ABOUT
THE WORK

Illustrator and art director Thadeus Rankin (a.k.a. Thadeus Maximus) is a long-time friend of One Pixel Off who asked for our help to bring his vision for a digital story book to life.

Our team worked side by side with Thadeus to devise a way of building the application that would most efficiently and faithfully allow us to convert the animations without sacrificing quality or performance. With the requirement of supporting the iPad, iPhone and iPod, we chose to render the animations out as video so that they could be played back on both old and new iOS devices using their built-in hardware. This helped to minimize CPU load and reduce battery usage, and also allow the animations to be played back at full retina resolutions at full frame rate.

The result is two vivid animated story books (one for iPad and one for iPhone/iPod) perfect for youngsters new to reading, as well as anyone who has a soft spot for all things cute and whimsical.

Using MP4 video posed a problem because we wanted to be able to produce a version of Big Zoo Fun that we have a download size smaller than Apple’s non-wifi download limit in order to allow people to download and run the application from anywhere. The difficulty with using MP4 video is that compression of video to smaller sizes results in a degradation of video quality and an increase in compression artifacts. In order to accommodate a high quality and a small download size we chose to produce two versions of the application: with an “HD” that was a bit larger than 50mb, as well as a less than 50mb non-“HD” version. The HD version included two additional video scenes, bonus content consisting of a sketch book of concept art for Big Zoo Fun, and a slightly higher bitrate version of the MP4 videos.

Check them out on the iTunes Store here:
Big Zoo Fun HD
Big Zoo Fun

With a proven track record of working together on complex Flash platform projects, Indusblue approached us to help with the development of a second screen component they were building for the Android and iOS version of NBC’s 2012 London Summer Olympics mobile application.

Working closely with our agency partner’s creative and technical team, we worked to implement the features of their proprietary second screen application in an entirely new design created specifically for NBC’s coverage. This included content synchronized to the NBC broadcast that included trivia questions and polls showing real-time results from other users as well as facts, videos, and photo galleries to supplement TV content. All content could be managed by NBC broadcast producers to allow for last-minute content creation and updates during the broadcast.

We also developed a panel within the application that accompanied the real-time companion – this allowed easy access to the official NBC twitter feed, tweets from other users that included the NBC olympics hashtag, and allowed the user to login to view their own twitter feed to tweet, retweet or favorite any tweets displayed.

Working closely with our NBC and Adobe partners, our team was instrumental to daily integration builds and testing. The final version of the application was launched in both the Apple iOS store and the Google Play stores and was available for both phone and tablet devices. The companion provided second screen content accompanying all NBC Olympic coverage broadcast offset for the five time zones of the continental US from the opening ceremonies of the 2012 London Olympics through to the closing ceremonies.

Working with our partners at Meldmedia, we were tasked with architecting two interactive experiences that would become part of the ROM’s Ultimate Dinosaurs: Giants of Gondwana Exhibit. This “Reactive Wall” experience consisted of two 40’ interactive walls of rear projected video, with each wall using three computers and three sensors to track the position of museum patrons. This allowed for movement to happen on the screens depending on the position of a patron in relation to the content. This included triggering animations of crocodilians pouncing on birds, falling pinecones, swarming bees, and having sauropods, crocodilians and triceratops dinosaurs track and follow the position of patrons with their heads.

As the content spanned large areas of the 40-foot walls (think of the long necked and tailed sauropods) it was necessary to have all of the computers driving the projection and sensing patrons to communicate with each other over a local wireless network in order to synchronize their animations. The two walls contained a multitude of animations that brought plants, dog-like running crocodilians, birds, sauropods, and a herd of Triceratops to life.

In order to simplify management and the configuration of the walls, we developed an iPad utility application that could remotely control each of the computers that were driving the animation on the walls.

Along with the 40-foot walls, we worked to develop a “Continental Drift” experience that consisted of another wall projection and 5 iPad stations. Patrons could use each of the iPads to explore an interactive timeline. This timeline allowed users to travel forward and back from the Permian, Triassic, Jurassic, Cretaceous, and Tertiary periods to the present day. Along with a real-time rendering of the continents during the period, touchable hotspots also appear on the rendering allowing patrons to reveal and explore educational content relevant to that location.

Ultimate Dinosaurs: Giants of Gondwana has since finished it’s run at the ROM, but the exhibit has since travelled to other cities in North America and is available through the ROM as a travelling exhibit for museums around the world. The modified version of the “Continental Drift” experience has also been made a permanent part of the California Academy of Science.

Our partners at BBDO Toronto asked us to help develop a Heineken digital campaign that tied into the release of the James Bond movie Skyfall. With a brief to create a spy themed “marble maze” game that allowed a user to move an attaché case through a replica of a booby-trapped train car, the resulting game was used on both the Heineken website and in a 10-day onsite installation in Union Station.

In the months leading up to the launch of the game we produced the user experience, game design documents, and also a proof of concept functional demo using Away3D and a 3D physics simulation engine. Our team was also responsible for the design and animation of the 3D models to be used in the game in collaboration with the BBDO creative team.

The installation at Union Station included a life sized plexi-glass locomotive that was built to house three game stations, each with two 60-inch TVs, a webcam, and an iPad. Users played the 3D game using an iPad which they would tilt to control the angle of the train car. A webcam in front of each player captured the player’s expressions while they played so that passersbys could see the player and game on a second TV mounted on the outside face side of the installation. There was also a separate vertically mounted 60-inch TV positioned off to the side and networked with the other stations so that it could display a leaderboard of the top 15 players from the current day at Union Station. Users who did well in the game were surprised with advance screening tickets for Skyfall as well as Heineken merchandise.

The end result for the online version of the experience was the same 3D game that players could play at home with their keyboard. Much like the installation, players with the fastest times could earn a spot on a leaderboard, and all users were afforded one contest ballot each calendar day for a chance to win the ultimate James Bond experience.

Our friends at Real Interactive engaged us as a technical partner for the development of the No Child for Sale microsite which was part of an integrated campaign for World Vision Canada. Launched mid-2013, the main goal of this site was to shed light on child slavery around the world. The microsite itself had an adaptive design with different desktop, tablet and mobile designs, and supported over 20 unique platforms and browsers. It included animated page transitions and allowed users to use swipe gestures to navigate through the pages of the site.

The microsite also included a “Social Soapbox” application that analyzed a user’s social reach to show how much impact they could have by sharing the message about child slavery. After sharing, users were shown an analysis of the reach of their most influential friends based on recent Facebook timeline activity, and – to further extend their impact – asked to have their friends also participate. In an attempt to keep users focused on the cause, any user of the application was sent a Facebook notification one week later that provided the details of how effective their share was, and asked them to consider engaging again.

We built a tool to display the live feeds of Facebook and Twitter activity resulting from the campaign as well as displaying current news about the site in the media. An administrative interface for the site allowed for adding news items, and allowed the vetting of Twitter and Facebook posts shown on the site. The microsite also included direct action allowing users to sign a petition asking the Canadian government and businesses leaders to do more to help the cause.

With lots of press anticipated (and eventually earned!), our team developed a comprehensive metrics tracking strategy using Google Analytics for the campaign, allowing real-time insights into the campaign’s performance.

Our friends at Meldmedia and John St. asked us to support a digital Facebook campaign by building a Facebook fan page tab and voting application that allowed users to vote for their favourite out of a group of firefighters. At the end of the campaign, the firefighters that had the most votes would become part of the Tetley Rescue Squad.

Launched with a live video stream of the 12 firefighters’ initial interviews, the voting was centered around seven head-to-head matchups with each matchup a day long where users could vote for the firefighter of their choice once every hour. The matchups were then followed by three days of “playoffs” where the winners of the previous 12 rounds were pitted against each other, with each winner securing a spot on the squad.

At the end of the voting week a “wildcard” round was held where all remaining firefighters competed against each other for votes all at once on one day, with the one firefighter that earned the most votes receiving a spot on the squad. Shortly after the final squad was announced, a video was posted of the final Rescue Squad surprising people at work and at the gym.

The most technically complex aspect of this project was the development of an automated time-based system that powered the round robin voting system. This application moved through the matches automatically with the system tabulating and determining match winners and assigning the next match for contestants based on their results. This allowed for hands-free operation of a complex contest that otherwise would’ve encountered multiple manual touchpoints.

Launched in Summer 2013, Kiktime was an animated HTML5 game that we developed with BBDO Toronto and their client Astro Yogurt. Taking a page from everyone’s love of zombies, the concept of Kiktime was for users to give their zombified Facebook friends a “kik” of energy by tapping on them as they walked across the screen. After logging in via Facebook, the goal of Kiktime was to tap on as many zombies as possible before too many zombies got across the screen. Letting too many zombies by ended the game.

A requirement of the project was that game play work on a desktop with a keyboard as well as on touch screens on tablets or mobile phones. We worked to ensure the game play area scaled dynamically to fit each screen screen size it was played on so that it would provide an optimal gameplay experience on any device.

Along with gameplay, a built-in contest gave users incentive to come back and play by awarding one ballot per day towards daily and grand prizes, with bonus ballots awarded for high scores and PINs that were printed on product packaging.

Kiktime was built using HTML5, the HTML5 Canvas and CreateJS, and included integration with Facebook so that zombie faces could include profile pictures from the user’s Facebook friends.

We worked with XM Radio Canada to design and build an online player that would allow subscribing users to stream live audio of any XM channel to their desktop computer. XM challenged us to devise the best user experience possible; accommodating ways to migrate the user’s favourite channels across multiple computers, automatic tuning to the last channel they were listening to on their last session, as well as a simplified login and authentication procedure to ensure compliance with DRM requirements and proper subscription validation.

The final online player, complete with a full-sized view and a “mini-player” mode, was built with a Adobe Flash based user interface and audio playback using Windows Media Player and allowed for the user to create favourites, filter by station genre, and the ability to see what was currently playing on any of the over 100 channels available.

Amnesty International supporters have traditionally advocated for social justice and human rights by using the proven and effective method of meeting regularly in regional groups of people to do research, discuss and debate current issues, and perhaps most importantly write letters and sign petitions to corporations and politicians. For the AI50.ca site we looked for a way to take this approach and translate it to work online and with social media. The result was a website that provided concise information about current issues and simple tools that allowed users who might not otherwise be able to participate in regular Amnesty meetings to support Amnesty regularly, quickly, and easily online.

The central feature of AI50.ca was a first of its kind tool called the "Social Media Action Centre.” This tool aggregated the social media activity of users into virtual events by collecting, storing and then later releasing user actions simultaneously. It integrated with Facebook and Twitter, allowed users to sign petitions, send emails to public figures, and even allowed users to check in to physical locations with Foursquare (check out the Foursquare location for Evin Prison in Iran!). By concentrating users’ social media activity and releasing it all at once, the “Social Media Action Centre” produced results that would not have otherwise been possible – including producing Twitter trending topics, and increased traction with the generated Facebook posts. Over the course of the year the “Social Media Action Center” was used to create 19 virtual events with participation in each virtual event steadily increasing as users returned for each new event and new users also joined.

The AI50.ca project also included a Virtual Rally where users could publicly show their support for Amnesty International – users were shown a swooping camera view through three dimentional space towards a distant field of a few thousand small points of light. As the camera zoomed in, the individual lights grew larger to reveal the faces of thousands of people holding candles. An individual supporter would be randomly featured and zoomed in on to show that supporter’s name and their personal reason for supporting Amnesty. Interested users could join this rally by uploading a photo of themselves to create an avatar which became a permanent participant in the Virtual Rally, helping the rally grow to a crowd of thousands.

We are particularly proud of this project because of its enormous and ambitious scope, the ground breaking tools that we built for it, and the fact it was for an institution we strongly value and believe in.