The Challenge
As the Vectorform design team developed the user experience, our goal was to create not just an engaging, interactive, and elegant iOS app for Chrysler's unveiling of the 200, but to create a seamless journey throughout the experience; moving fluidly from chapter to chapter and feature to feature.
Chapter Navigation
As part of the visual language definition, I designed and created a number of possible approaches to transition from one chapter to the next. Though the final solution was simple—a photography inspired bokeh blur—the implementation required a little more work. Few if any apps at the time were rendering full screen image effects in realtime. Because retaining 100% interactivity at all times was of utmost importance (along with keeping application size minimal), we didn't want to use pre-rendered videos or image sequences. This necessitated the development of a fully dynamic blur computed dynamically as the user swiped between chapters.
Working in Quartz Composer, I prototyped a multi-layered hash pattern with pixel interference and false linear light rendering that met our requirements. This was then further optimised by the lead developer who combined it with dynamic resolution adjustments to ensure smooth frame rates on limited iOS hardware.
Demonstrating Safety
Though most sections were built from animated panels of text and imagery, the safety section posed a new challenge. How to create a seamless experience that reacted to user input and was duration independent, while retaining the necessary features of an animated video? We needed to show multiple driving scenarios, vehicle recognition of and reaction to road hazards, and even parallel parking assistance. Based on the user experience paradigm of seamlessness, I directed the development team in creating a procedurally animated system that would allow for continuous animation, triggering events based on user input and individual pacing. I created rough animatics for the experience in order to communicate the concepts with the client and development teams.
I also worked closely with the Chrysler visualisation team, providing art direction, animation details, and asset delivery requirements for the vehicle elements. All of the environmental assets I created myself, from seamlessly repeating roads and grasses, to shrubs, trees, and oil slick elements. These were all created and processed at 4k then downsampled to the resolutions needed for various devices.
The Results
Though it wasn't possible to port the more advanced visual effects to Android (the platform's hardware and software simply were not capable at the time), the iOS app stood out for it's visual effects and uniquely interactive interface, and was selected for The FWA's Mobile of the Day award.