Client: Bates Smart
URL: http://www.batessmart.com.au/

Launched: 29 June 2009
Agency: Flint Interactive & Fabio Ongarato
Project: Website

Major Features:

• Unique Content Transitions
• Smart Data Load Practices
• Full-browser Page Viewer
• Deeplinking

The Story:

This was my nightmare. I don’t think I should share so much negative opinions publicly, so I won’t.

On a positive note, the client wanted to work with us directly, opening the floodgates to unfiltered communication. The outcome was a smoother, sharper, functional execution, and understanding the project’s history, the outcome was something to be proud of.

Technology Analysis:

• Flash w/ Actionscript 3
• PHP w/ MySQL for UGC and CMS
• Deeplinking

The Team:

• Designer - Fabio Ongarato
• Backend Developer - Cameron Manderson
• Flash Developer - Neil Nand

Screenshots:

Client: Mercy Breastmilk Bank
URL: http://www.mercybreastmilkbank.com.au/

Launched: 10 September 2009
Agency: Flint Interactive
Project: Website

Major Features:

• UGC
• Low Budget

The Story:

It must be hard being a charity and have the budget for the perfect website. Lucky for them, we had a clever designer and technical director on the case. Cam, the tech, devised a plan on limiting the functionality of the CMS, to cut down the budget. The result was the client had to do a bit more work, but the user wouldn’t be able to tell the difference. The freelance designer’s design allowed for simple animations and transitions, which also aided the low budget execution.

The designer and I never got to jam on the execution, but he definitely “got” the situation and played his part very well. I only have praise for him, as he must have thoroughly understood the brief. This only really comes from digital design experience.

There are still too many designers that think they “get” the brief and design something that needs double the budget to develop. This is why I’m a strong believer of solid meetings between the developers and designers involved to plan the solution together, over the current linear designer first, developer later methodology. The outcome of this meeting should be then approved by the creative director. Benefits of this include:

• better understanding of each other’s abilities
• stronger teamwork
• the CD’s involvement is strictly directional
• discussion for a combined optimum solution

Technology Analysis:

• Flash w/ Actionscript 3
• PHP w/ MySQL for UGC and CMS
• Deeplinking

The Team:

• Designer - Unknown
• Backend Developer - Cameron Manderson
• Flash Developer - Neil Nand

Screenshots:

Client: Lovable
URL: http://apps.facebook.com/confess_your_sin/

Launched: 21 September 2009
Agency: Flint Interactive & K inc
Project: Facebook Application

Major Features:

• Questionnaire
• Send to Facebook Friend List
• Appears on Newsfeed and Profile Wall

The Story:

This was my first application in Facebook’s new framework. Once you get your head around XFBML and FBJS, its easy-peasy. There were a few dramas with general PHP sessions and Facebook sessions colliding, and during that launch, Facebook were having some website problems, but it didn’t take too may days to get rectified.

It was a simple small “get out there on Facebook” project, with little thought and planning. The concept wasn’t able to take off, as it was a little offensive, and the question structure didn’t have much substance.

I am only including this, because it broke the ice for me in terms of Facebook development, which has opened doors to more ideas to flow in my head… and it’s Jen Hawkin’s lingerie label.

Technology Analysis:

• Flash w/ Actionscript 3
• PHP w/ MySQL
• FBJS
• XFBML

The Team:

• Strategy - K inc
• Designer - Sacha Jerrems
• Copy Writer - K inc
• Illustrations - Buzz Swarbrick
• Flash Developer - Neil Nand
• Backend Developer - Neil Nand
• Facebook Developer - Neil Nand

Screenshots:

Client: City of Port Phillip (CoPP)
URL: http://susmakeover.enviroehub.com.au/

Launched: 10 August 2009
Agency: Flint Interactive
Project: Microsite

Major Features:

• Lively Interaction
• Site-wide Voice Over
• Unique Section Look & Feel
• UGC Idea Submissions
• Send to Friend Feature

The Story:

This would have to have been one of my favourite projects at Flint. I played a big role in this project from start to finish.

At the quoting stage I was able to increase the scope by offering additions of user-generated-content (UGC) and other functionality. We won the quote and the additions.

The brief was to portray the lifestyles of 3 different typical City of Port Phillip stereotypes, identify where wastage is generated and offer ideas on how it can be reduced. The UGC element was brought in here, where the user can get involved and submit their own ideas to the site. Sacha and I jammed up an idea where all 3 contestants live next door to each other in the same apartment, to introduce the whole “one goal” mentality. Their living rooms act as the presentation ground for the different sections, with all overlooking the iconic CoPP suburb, St Kilda.

At the completion of the project I got involved with the CoPP team to populate the UGC with their own ideas to get the ball rolling. I thought it was a good way of raising awareness amongst the entire office of what the marketing team were up to. I came up with the minor website related copy, eg, Send to Friend copy.

I hope you enjoy using it as much as I enjoyed building it!

Technology Analysis:

• Flash w/ Actionscript 3
• Displacement Bitmap Effects
• PHP w/ MySQL for UGC and Mailing

The Team:

• Designer - Sacha Jerrems
• UGC Backend Developer - Jarrod Monk
• Mailing - Anthony Mikrou
• Flash Developer - Neil Nand

Screenshots:

Client: Mt Franklin
URL: http://www.thewellofpositivity.com/nbcf/

Launched: 25 August 2008
Agency: The White Agency
Project: User Generated Content, Viral Campaign, Blog and Facebook Widget

Recognition:

• B & T

Major Features:

• Extensive Deeplinking for key sections and sub-sections.
• Deeplinking support for user generated content (UGC).
• Clever math equations and infrastructure techniques to allow the “Well” to work in such a unique way to handle the dataflow of the dynamic content.
• Complete custom User Interaction elements to fit design and user errors.
• Search facility for UGC with deeplinking support.
• Clever bitmap effects to allow a liquid effect for the widget.
• The website was re-structured and reused to suite a widget framework.
• Widget utilises website content, and filters UGC to the widget.
• Comprehensive technical SEO strategy to fill the void in Flash. (To be implemented)

The Story:

The lifestyle surrounding this project was an experience on its own. I’m based in the satellite office in Melbourne, but this was a large scale project with a tight deadline – so the best solution was to base me in Sydney for a month.

I was able to deal with the rest of the creative and production team face to face. I couldn’t believe how much I missed that element – phone conversations really take out the vibe and excitement in creative discussions.

When I saw the designs, the Well in particular, and how that was to work – I took a deep gulp! At first I had no clue how to tackle it. There were many variable and possible complications surrounding it. As per usual, after I slept on it, my mind did its thing and broke down the complications into something that can be worked with much easier. Once you get the ball rolling in these games of Tetris, all the pieces start falling into place on its own, and the scary part is not so scary anymore.

The rest of the site wasn’t anything I hadn’t done before. The only thing to be done is improve in development from my previous techniques ways of attacking these styles of projects. The biggest development in this area was improving on my AS3 skills and the XML infrastructure to allow multi-developer simultaneous development easy.

Areas I still did struggle with has time-management, but as any Flash developer knows, when you’re making feature projects, you can’t put hours against creativity, especially with the variables of meeting the design (which was usually still pending client approval), functionality and an abundance of effects. Sacrifices of weeknights and weekends are unquestionable.

During the aftermath of this project, I was thinking about what just happened. I realised we had the ingredients for doing something ground breaking.

The topic of Flash SEO has been floating around for a while now, and Google is able to seep inside the Flash and index the content. Although this doesn’t help our situation as Google can’t seep into Flash’s dynamic content.

The manual way of providing SEO content to Google for a Flash website is putting the content behind the Flash interface, in the non-Flash area. The problem with this is, it will always be the same content over and over, even though you have a comprehensive content heavy website.

Given our ingredients; dynamic content and deeplinking of dynamic content; we can filter search optimised content in the non-Flash area to the specific URL. Now with deeplinking, we can point Flash to specific sections within the site, when the website is initially loaded. In the non-Flash content we can have specially formatted internal links that will provide Google with the section relevant content and allow users to see the specific content in the Flash.

The plan’s been made and will be implemented in the near future to this website.

I will do a full development report on this dynamic Flash SEO topic in the near future with diagrams.

Technology Analysis:

• Flash w/ Actionscript 3
• ASP.NET CMS
• XML
• Javascript

The Team:

• Strategy - Katie Chatfield
• Creative Director - Matt Grogan
• Producer - Jeff Gougeon
• Copy Writer - Luke Sandral
• Designer - Mike Barry, Penn Lee and Greg Miller
• ASP.NET Developer - David Carson & Duncan Ion
• HTML Developer - Kevin Jarvis
• Flash Developer - Neil Nand

Screenshots:

Client: Coke Zero
URL: http://www.cokezero.com.au/

Launched: 4 August 2008
Agency: The White Agency
Project: Microsite, Game, Screensavers, Ringtones & Wallpaper Downloads

Recognition:

• The FWA Featured Mention (10 Nov 2008)
• Adverblog

Major Features:

• Rich 3D in-game cut-scenes.
• Heavy use of FLVs.

The Story:

I can pretty much do anything in Flash. Make applications, RIAs, handle video, heavy database processing and more … but when it comes to games, I’m a lost cause. It’s a whole new ball game, that is better left with an expert. There is plenty of optimisation and physics that need to be taken into consideration.

My role in the project was the initial website development, setting up the site infrastructure and interaction and animation between the sections. Mark Fennell later came on to lead this project and looked after the gaming aspects of it. He changed the way some parts of the site worked, to optimise the performance of the processor intensive game. I became one of the support developers, where I made some in-game elements, and helped out where I could.

It was great meeting and working with Mark, and being able to query him on why he did certains in certain ways.

Props need to go to Jennings for design and Aiden for his spectacular 3D work.

Technology Analysis:

• Flash w/ Actionscript 3
• XML
• Javascript

The Team:

• Concepts - Alister McCann, Fabian Hupfauf
• Designer - Jennings
• Lead Flash Developer - Mark Fennell
• 3D & Video - Aiden Weatherby
• Support Flash Developers - Neil Nand & Aiden Weatherby

Screenshots:

Client: Carsales.com.au
URL: Banner Landing Page

Launched: 7 July 2008
Agency: The White Agency
Project: Medium Rectangle Banner, Skyscraper Banner, Leaderboard Banner & Full Banner

Recognition:

• Banner Blog

Major Features:

• Manual interaction and automated interaction modes.
• Automated interaction is scripted, so it can go to manual interation mid-animation.
• Eye positions are based on equations in relation to the car position.

The Story:

I’ve been a Flash Developer for about 3 years now, and this is probably my first real banner project. I guess starting at a new company, they didn’t want to throw me too far into the deep end, just incase I drown.

I’m so used to making complex interactive internet applications, that I had to really restrain myself with this project. And I really did have to, because with banners, all the content needs to be embedded into the flash and keep the output file under a certian filesize.

I did enjoy making this banner, as I’d never done one before, but I don’t think I want to make another .. ever again. I love pushing the boundaries of the digital medium, and banners are confined to a maximum security prison.

Technology Analysis:

• Flash w/ Actionscript 2

The Team:

• Account Manager - Ben Howden
• Art Direction - Fabian Hupfauf
• Flash Developer - Neil Nand

Screenshots:

Client: Diet Coca-Cola
URL: http://www.dietcoca-cola.com.au/feelthebrightness/

Launched: 30 June 2008
Agency: The White Agency
Project: TVC Landing Page

Major Features:

• Video Player
• Google Analytics on video playhead positions

The Story:

This is just a simple landing page for Diet Coke, to sit the TVC somewhere on the internet.

I don’t understand why the simpler Diet Coke URLs (eg, dietcoke.com.au, dietcoca-cola.com.au) all don’t go to this page. It may be because the coke.com.au site that it gets redirected to holds actual product information about the Diet Coke softdrink. Oh well, these decisions aren’t my call.

Irrelevant to that, I enjoy the way the background environment changes upon play and stop of the video playback.

A neat feature on this page is the measurement of how far the user has viewed the video. This information is relayed to Google Analytics, where extra measurement information is collected and presented.

Technology Analysis:

• Flash w/ Actionscript 3
• Flash FLV
• Google Analytics

The Team:

• Account Manager - Lauren Boyce
• Art Direction - Paul Jeffress
• Flash Developer - Neil Nand

Screenshots:

Details

Client: Triumph Lingerie
URL: http://www.youarewonderful.com.au/
Backlink: http://triumph.crudigital.com.au/

Launched: 25 February 2008
Agency: Cru Digital & BCM
Project: Microsite, User Generated Content, Product Catalogue, Compatibility Test, Viral Campaign

Recognition:

• W3 Gold x 2 (Fashion, Consumer Goods)
• Nine MSN Article
• Fcukstar Featured Sites of March 2008
• The Daily Slurp (24 March 2008)
• Web Design File
• pages.sccnn.com - Website Appreciation (China)
• 51epsj - Website Appreciation (China)
• Designaside - Website Appreciation (Italy)
• QBN - Forum
• Most Inspired
• Body Collector (Artwork Repository)

Major Features:

• Strategic loading techniques to handle the large amount of content.
• Site rescaling and repositioning to suite the browser size and ratio.
• Homepage has live fed up-to-date content.
• Flash History and Deeplinking
• Many forms with custom input boxes, dropdowns, checkbox, etc.
• Input fields have a memory system, where the user doesn’t have to always retype in the fields.
• 2 person compability test, where the 2nd user returns to a specific section in Flash with their details prefilled out.
• Users are able to upload a photo of themselves and their bestfriend, which gets approved and added to the “Happy Snaps” wall. Users are able to put in a caption and a message when polaroid is flipped. Users are also able to add some shapes (resize and rotate it) to their polaroids.
• Product Catalogue has multiple categories and users are able to “Drop A Hint” to family, friends or partners on what products they want. No ecommerce was part of this site as they are the product suppliers.

The Story:

This campaign needed to really engage women and get them involved. So the winning theme idea was the “coffee shop” where the menu items were elements on the table. The background audio and video was added to bring some life to the site. The inner content pages focused on the elements of the homepage.

There was a heavy amount of forms in the site, so to ease the user’s experience, an input form memory system was created, so similar items were prefilled out. From a development angle, a core class system was created to handling the prefilled data, post variable names for server-side integration, appearance, error checking and creation for forms could be done faster. Because as all developers know, forms are a pain in the arse! No matter what language you’re programming in!

I had my usual flash history system part of the site, which is usually just top level, and passes some sublevel item parameters for sections like; Compability Test and Polaroids.

The Vox Pops section had a neat display sequence. When the initial XML was loaded for the content, a class-level Array was created with all the 72 videos added in a random sequence. Each instance of the voxpop player had an instance-level copy of the class level Array made. The player went through the instance level sequence with the each item dropping off the array, eventually leading to an empty Array. When the Array was empty, it resliced a copy of the class-level Array sequence. This led to a completely random sequence with no repeats, until the entire set had been played through.

To help the site jump out at the user, some fake 3D concepts were used for polaroids and product details cards to flip. This was inspired from Papervision.

After the initial rollout of the site, a few areas of the site went through a performance optimising phase as the rich content got some users’ CPU’s to work overtime.

Technology Analysis:

• Flash w/ Actionscript 3
• PHP5 w/ MySQL CMS
• XML
• Javascript

The Team:

• Specifications - Mitch Bain, Garth Sykes & Neil Nand
• Designer - Garth Sykes
• Backend Developer - Steven Miles
• Sound Engineer - Matthew Daniels
• Layout Photography - Berg & West
• Homepage Video - Taxi Films
• Flash Developer - Neil Nand

Screenshots

Details

Client: Ice Break
URL: http://www.icebreak.com.au/
Backlink: http://icebreak07.crudigital.com.au/

Launched: 1 October 2007
Agency: Cru Digital & De Pasquale
Project: Microsite, Game & Banner Campaign

Recognition:

• W3 Gold (Food and Beverage)
• Horizon Interactive Awards (Silver)
• Interactive Media Awards (Outstanding Achievement)
• Design Charts (Debut: 31; Peak: 31)
• Design Licks (Site of the Day - 3 November 2007)
• sj63.com - Website Appreciation (South Korea)
• 68design.net - Website Appreciation (South Korea)
• zcool.com.cn - Website Appreciation (China)
• chinaz.com - Website Appreciation (China)
• cwd.52design.com - Website Appreciation (China)
• Fcukstar Featured Sites of 2007
• Rookie Net Web Gallery Collection
• pages.sccnn.com - Website Appreciation (China)

Major Features:

• Very Fluid Interactivity
• Television Commercials (TVC)
• Weekly Survey
• Weekly, Monthly & All Time Scoreboard
• Send to a Friend and Challenge a Friend Viral Components
• Game

The Story:

With the design Garth had presented me, I knew exactly how I wanted the site to present itself. The first thing that came to my mind was Jerry Bruckheimer logo video. I wanted to do something a little similar to that.

The next trick was to come up with a development strategy on how the different sections of the microsite were to appear and disappear. As you can see, a few sections “pop-out” on top of the remaining content. The fastest way I thought to pull that off was to use a mixture of traditional animation and actionscripted animation with depth control.

Integrating the game into the full flash microsite didn’t work to plan, as the Flash ontop of Flash just chewed up the system resources. Plan B was to provide the game with a HTML infrastructure and hide the original Flash component. After the game was over, the main Flash component was revealed and had javascript was used as the means of communication between both Flash components.

The banners that were launched for the promotion of this website had connectivity to the main database so the highest scores could be retrieved to entice users to beat it.

Inspiration

Technology Analysis:

• Flash w/ Actionscript 2
• PHP w/ MySQL CMS
• XML
• Javascript

The Team:

• Specifications - Ben Stokes, Mitch Bain, Garth Sykes & Tim Jensen
• Designer - Garth Sykes
• Game Developer - Tim Jensen
• Backend Developer - Steven Miles
• Banner Developers - Matthew Daniels & Karel Van Cromvoirt
• Flash Developer - Neil Nand

Screenshots