September, 2010

Sep 10

Audi A1 – one hell of a “microsite”

For the record: Audi A1 was the biggest microsite we ever did! Work started as soon as spring 2009 with the final version being released in spring 2010 (which is quite a short timespan for such an ambitioned project).

Just for the sake being – each content really was a major “wow factor” (at least for a geek). Here comes the shortlist:


This module might just be your standard threesixty. But: we did dynamic typo synchronized to the camera movement and with country-specific embedded fonts. No easy feat :)

Also a first-timer: we used MP4 as the overall video-format (when no alpha was required) with the industry-standard for subtitling – DFXP. Gone are the times of fiddling with timestamps and texts, at least for the developers. We did use a common movie subtitling/synchronization company which can deliver DFXP. Thanks to OSMF (which we did use from alpha status on).

Style advisor

Great module where the user could choose a personal style of car depending on a set of polaroids. The tricky part here? The alpha video had to be matched to the movements of the polaroids. Also all the logik for assigning cars is completely customizable for each market this site is rolled out for.

The movie

This module started as a plain chapter video player. But after a short while it became clear, that we had to give the user at least two spoken language versions and 12 languages for subtitles.

And the biggest feature was yet to come: from the ending-point of each chapter a transition was to be implemented to an interactive 360° of the the last frame. In this panoramic view hidden goodies could be discovered and won. We did learn a lot about projection, stitching and MP4 compression settings in this part of the site. And did i mention the movies had Justin in them? ;)


This module might be the most fun from a user perspective. The challenge here was to get all the layering and logical implications implemented correctly. And also for QA to get this tested ;) Circular UI elements are by the way an interesting exercise for any self-respecting developer …

The gallery gained at least 60.000 submissions over two runs, which could be voted upon – leading to one of the best-voted design to win a real A1. Also each of this customized design could be posted on facebook.

Each design was saved in full-size directly from flash to the backend. Also the user could download his custom wallpapers in the correct size. This required image-creation and -compression in the frontend – easy only at the first moment. In the end we did go for an optimized asynchronous solution – accelerated by custom native code (alchemy).

Community hub

This might look just like some RSS fetched into the site. But: we did build a custom backend for this, which crawls Facebook, Twitter, Flickr, Google Blogs and Youtube for the search term “Audi A1″ and keeps track of what changes are going on in the results. This felt a bit like building google sometimes. But performed far better than expected.


Might seem boring, eh? But is easily the biggest accomplishment of the site. We don’t save any data in our own backends nor do we define registration form layouts/field definitions for all the country specific versions. Instead we are talking to some clever webservices hosted directly in front of the Audi CRM, which deliver form definitions, userdata and also do all the necessary validation, storage and single-sign on. So in the end we had one cool form-rendering-engine, which was easy skinned by using ASwing.

The features you don’t see

  • 146 language versions
  • more than 2.5 GB assets, 3-4 hours of video
  • tons of language files
  • more than 180.000 lines of code
  • more than 1.500 jira issues
  • more than 14 releases until now, with up to 3 releases being in parallel development
  • a completely modular structure
  • build mechanisms using ANT and continuous integration (hudson) with automatic generation of config-files via XSLT and validation of each XML in the project
  • we did in fact bottom out the flex compiler at some points, you can do only so much by putting more ram into a machine
  • at least 20 moments of enlightenment

I’m not sure i would again want to do such a big microsite in the near future. But we learned so much in the process, that this was not only a success for the client, but also for us.

Thanks to the team (Aaron, Alex, Anja, Christian, Eva, Frank & Frank, Martin, Peyman, Philipp, Thien)- you rocked hard!