Skip navigation

Dettol’s Mission for Health initiative took a new direction by appointing a team of mom (and dad!) bloggers as Mission for Health Ambassadors. To assist the team of ambassadors with their publishing needs, and to improve the visibility of the campaign, the Mission for Health content was moved from the main Dettol website and into a new WordPress powered domain. The new domain contains all of the content that existed within the main site, plus all new content from the team of ambassadors. The site’s publisher is able to select key articles and categories for display on the homepage, promoting important and timely content as required.

Screenshots

Build Details

The site is built on a standard (although hardened) WordPress installation, with a number of custom built plugins and some custom functions to achieve specific functionality.

Homepage Manager

The main content areas of the homepage needed to be easily managed to allow key articles and categories to be highlighted. A plugin was developed that provided an administration screen to allow the publisher to search for and select articles/categories into the themes predefined locations. The plugin then generates custom content to display in each of the predefined areas on the homepage.

Blogger Sidebar

The list of ambassador bloggers was to be displayed in the sidebar of each page, with the list filtering on content pages to bloggers who had published articles in the related categories. The display would also change dependant on the on the type of page, e.g. category page, article page, archive page, etc. The plugin hooked into the User administration screen to provide additional bio details and images for each blogger.

Colour Coding

Each main category of the site is colour coded to enable easy category identification for each article. Custom functions were written to provide additional CSS class name to content elements where the colour scheme needed to be applied.

Build Team

 Backend Developers

  • Scott Swabey
  • Alex Joyce

Frontend Developers

  • Scott Swabey
  • Matt Stone

Build Tools

Backend

  • WordPress 3.5
  • PHP 5.3
  • MySQL 5

Frontend

  • HTML5
  • CSS3
  • LESS CSS

Tools

  • Sublime Text 2
  • Photoshop 5.5
  • Texture Packer

An end of year 20% project led by the Holler Sydney dev team for Christmas 2012. The concept was simple enough, invite visitors to the Naughty or Nice Test site to connect via Facebook. Once connected, analyse their activity throughout the year to determine whether they had been naughty or nice. Being led by the devs, we decided to use lots of CSS3, transitions and animation. It won’t work for everybody due to browser support, but it was good for us to cut loose and ride the edge of the wave!

Screenshots

Build Details

Built as a single page application with backbone.js. Once the visitor connects via Facebook their timeline is analysed for matches against a predefined set of good and bad words, phrases, and liked pages. The number of likes the visitor has given and received is also taken into account to determine the overall rating of naughtiness or niceness. While this backend process is happening the visitor is transferred from the entry screen to the machine screen by way of an interstitial screen with parallax items.

When the machine page is displayed a few minor animations are instantiated. The visitor is invited to pull a label to start the machine. Once pulled, the machine animations start. Animations are a combination of CSS transforms and animations, canvas animations, and canvas with physics for bouncing animation. The machine animations are custom for each visitor (profile image, timeline phrases, liked pages images, number of naughty/nice balls).

Once the animation has completed a certificate is displayed with the results of the assessment of their behaviour. There are 12 messages in all, covering the range from super bad to sickly sweet good!

Build Team

 Backend Developers

  • Adil Yaqoob

Frontend Developers

  • Scott Swabey
  • Matt Stone
  • Michael Hazell
  • Jamie Hayman

Designers

  • Fitz Fitzpatrick
  • Claus Stangl

Build Tools

Backend

  • PHP 5.3
  • MySQL 5
  • Zend

Frontend

  • HTML5
  • CSS3
  • LESS CSS
  • backbone.js
  • lodash.js
  • coffeescript
  • easel.js
  • box2dweb.js
  • grunt.js

Tools

  • Sublime Text 2
  • Photoshop 5.5
  • Texture Packer

 

Tourism Australia is the Australian Government agency responsible for attracting international visitors to Australia and encouraging Australians to travel domestically, both for leisure and business events. The Tourism Australia YouTube Channel was redeveloped to improve the way travellers use video to plan their Australian holiday.

In a world-first, the site provides customised content in nine languages for 16 key markets (including Australia) to enhance the trip-planning experience for potential visitors. Rich video content is now linked to an interactive Google map for users to see where the footage was filmed and in turn build their itinerary around the destinations they are considering in Australia. Another new feature of the updated Tourism Australia YouTube Channel is that videos can also be filtered by state and city, type of experience, popularity or via Tourism Australia selected videos so users can generate their own bespoke gallery of Australian tourism experiences.

Integration with popular social media sites has also been enhanced to provide users with a deeper, more personal experience. For example, a “Facebook connect” function matches users’ Facebook friend check-ins with the destinations on their playlist so they can see which of their friends have visited the locations shown in the videos. The Australia Channel has also been set-up so users can easily share their customised playlist with friends and family with Facebook.

Tourism Australia’s Instagram images, which match the destinations and experiences in the videos, also feature in the playlist.

 Screenshots

Build Details

From the very first prototypes for this project the use of Backbone.js was set in stone. All that was needed was a rapid climb up a steep learning curve to implement a large and complicated project in Backbone, along with integrating a Backbone frontend into a Symfony2 backend, and all the other API’s along the way. Oh, and internationalize it with 12 languages just for fun!

The site is a You Tube gadget, and so it’s design and content had to work within a fixed width, and to some degree fixed height, iframe within the main You Tube channel page. The issues with this restriction only became apparent once the i18n content was applied. Single word action buttons became multiple words in most other languages, requiring designs to be modified. Paragraphs of instruction, video titles and descriptions all became longer. Some changes were handled in the core design, others were handled by style adjustments attached to languages.

The splash page (yes, yes I know. But marketing!) employs masonry.js, a bunch of timing events and HTML5 video elements to introduce the visitor to the site. While the splash animation is running a custom built preloader, precook-backbone, is pulling in a bunch of images and other assets.

And so to the meat of the project, the builder screen, where visitors can search through all of Tourism Australia’s available content on You Tube, view the video content, and add the videos to a custom playlist. All videos are tagged to enable filtering by region and/or activity type, e.g. Western Australia, Food and Wine, Sightseeing. Two other filter options are available, Our Favourites and Most Popular, both of which are populated with lists specifically targeted for the origin location of the visitor. The filter process unloads any current content and loads in content from the new filter list.

The visitor can then scroll through the vertical list of filtered result videos, loading selected videos into the main player as required. Each video record is tagged with a geolocation, enabling display of a pin on the Google Map, which can be expanded to view the location in relation to all of Australia. The visitor can add the currently playing video to their playlist, and once more than 1 video is added to the playlist they can be reordered by drag and drop.  Videos can also be removed from the playlist, which is maintained in a backbone model and updates a session database record in real time. Once the visitor is happy with their selections they can save the playlist, optionally giving it a name, and the details of the playlist are stored in the database with a unique ID. All future references to the playlist use this ID, enabling it to be accessed directly and shared with others.

As items are added to the playlist on the builder screen additional meta content is added, such as images from the Tourism Australia Instagram feed, and profile pictures of the visitors Facebook friends who have tagged themselves in the location of each video.

Once the playlist is created, or if a visitor comes to the site via a playlists share link, the Postcard view of the playlist is displayed. The postcard is generated from multiple mini-clips associated with each video, and is displayed using four YouTube players and timing events. The full playlist can be viewed on the Playlist view, where the playlist videos are played in order and looped. The Google Map displays are marker for each location contained in the playlist, and pans to the location of the currently playing video, swapping out a custom marker as a highlight. Again, the map can be expanded to show all locations against the full map of Australia.

There were many challenges and hurdles that had to be overcome to get the project to production stage, and I am proud to be have been part of the team that was faced with and overcame those hurdles. Did we make the project harder by jumping into backbone as the frontend MVC platform? Undoubtedly. Do I regret that we made that decision? Unequivocally no. The scale and complexity of the project, and our inexperience with backbone no doubt led to sub-optimal implementation methods. But we were also pushed to investigate, implement, test and re-evaluate every step of the way. We learnt a lot, not least of which was the power of backbone, and MVC patterns for the front end in general. Still a lot to learn, but the foundations have been set and their are lots of shoulders to stand on!

Build Team

Backend Developers

Frontend Developers

Designers

  • Pete Chen
  • Maria Garcia
  • Thomas Fitzpatrick

Project Manager

  • Thomas Trenfield

Creative

  • John Gault
  • Ben Heath

Account Services

  • Noorjan Yaftali

Build Tools

Backend

  • PHP 5.3
  • Symfony 2
  • Apache 2.2
  • MySQL 5

Frontend

  • HTML5
  • CSS3
  • backbone.js
  • coffescript
  • jQuery
  • modernizr
  • masonry.js

Tools

  • Sublime Text 2
  • Photoshop CS5.5
  • Texture Packer

 

ESPN, Inc. is the world’s leading multinational, multimedia sports entertainment company featuring a portfolio of over 50 multimedia sports assets. The espn.com.au site was redesigned and rebuilt to position it as the premium source for information regarding ESPN programming and content for the Australasian region.

The main objective of the new site was to highlight the full range of sports and programming available, to make the programming data available in real-time, and to provide easy entry points for new subscribers to the service.

The site was built using the Silverstripe CMS platform, and integrated scheduling data from the ESPN API feed.

Screenshots

Build Details

By far the most complicated part of the project was integrating the forward planned programming data into an easy to use, visually pleasing display. To limit the load on the ESPN API we set up a scheduled task which would poll the API for new or changed programming data from the last poll interval. Each polling of the API would update the local programming schedule database.

The local programming schedule database was exposed through a custom API which was queried from the front end of the website to display scheduling data in various formats.

  • Quick View and Full SchedulesBoth schedules display a 2 hours window of programming across the three programming channels. The schedule contains data from the current time through to the end of the current day, then for the full 24 hours for the next 6 days. The programming can be scrolled though in 15 minute or  1 hour steps. The data for future days is only loaded in via AJAX once the end of the displayed day has been reached.
  • Program FinderThe program finder enables visitors to quickly search for current and future programming data for a particular sport. The search directly accesses the local programming schedule database to return results.
  • Up Next ScheduleThe sidebar Up Next Schedule was built to provide an instant view of the next scheduled programme for any sport. Changing the selected sport retrieves new data via an AJAX call to the local scheduling API. A modified version of the widget displays the currently airing and immediately following programmes so that visitors can quickly see what is on now, and what’s on next.

Build Team

Backend Developers

  • Scott Swabey
  • Paul Mcilwaine

Frontend Developers

  • Scott Swabey
  • Mitermayer Reis

Designers

  • Ben Thayer
  • Chris Jeffree

Project Manager

  • Jo Cooper

Creative

  • John Gault
  • Ben Heath

Account Services

  • Alexander Southwick

Build Tools

Backend

  • PHP 5.3
  • Silverstripe
  • Apache 2.2
  • MySQL 5

Frontend

  • HTML5
  • CSS3
  • jQuery
  • modernizr
  • jQuery UI

Tools

  • Netbeans
  • Notepad2
  • Photoshop CS5.5