Kia HTML5 banner

< >
{{project.url_text}}

HTML5, JavaScript, Ajax, Less/CSS3, Grunt, data modelling, Python

The Kia HTML5 ad banner is part of a wider cross platform campaign (digital, TV and print), managed by award winning advertising agency VCCP, to launch the new 2015 range of car manufacturer Kia. This banner was used in a digital campaign running on both the YouTube and AutoTrader.co.uk websites and basically consists of a web app offering search functionality. The ad populates an image gallery/carousel of vehicles from the new range based on what keywords (from two search fields) the user searches.

I was brought in on to this project to develop the banner by VCCP just the day after the concept was agreed by themselves and the (Kia). The aim was to develop the banner within two weeks ensure that it worked in the latest version of modern desktop web browsers (Chrome, Firefox, IE). As you can imagine, with the concept still being quite young when I started work, there were many iterations of both the functionality and look and of the banner.

The project was setup using the Yeoman/Grunt webapp generator using the Less pre-processor to compile cross-browser (prefixed) CSS and Bower.js to manage client-side dependencies (jQuery and Twitter typeahead).

The first main task I had was to organise all of the data connected to the project ( product descriptions, keywords, testimonials etc ) in a shared GoogleDocs spreadsheet and write a Python script to parse the data into a JSON file for use in the app.

Once I had the data in a usable format I began writing the search functionality and after several iterations on the search constraint parameters (i.e. return cars matching just one keyword, both keywords or a 2 pass search combining both methods) I was ready to work on the look and feel of the banner.

I worked alongside a designer (Andrea Tamborini) who provided a mockup and image assets. These assets had to changed a few times, as did the image carousel which started out as a 3d carousel but after some back and forth between our designer and the client it was decided that a simple 2d transition in/out effect on the carousel would work best.

One of the final tasks were to integrate the DoubleClick studio (Google ad network platform) SDK into the app (so that some analytics data could be extracted from the campaign by the agency’s data team) and then to upload the complete banner assets to DoubleClick for QA approval from Google.

Also there is the ghost writer/auto search functionality which enables the banner to automatically run a search if the user doesn't interact with the banner within a certain time period (5 seconds). this feature was on the list of “nice to have” features and written just an hour before the DoubleClick submission deadline(!).

All in all an eventful assignment!

kia_html5banner