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
- Scott Swabey
- Matt Stone
- Jamie Hayman
- Mitermayer Reis
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