Case Study: IDEO Automobility

In the Summer of 2014, IDEO approached us to build a highly interactive, parallax scrolling microsite to showcase their work in the area of automotive innovation, a discipline they had dubbed “Automobility.” IDEO’s goal for this new site was ambitious, as it needed to effectively communicate their complex and elegant vision for the future of the automotive industry while using inventive new forms and formats for featuring and demonstrating IDEO’s world-class capabilities. The bar was set very high for Solspace, but there was some precedent to guide our approach. Previously, IDEO had created a site that showcased work they’d done with the San Francisco Unified School District’s school lunch program in a very engaging way, using an immersive storytelling experience that provided ideas and functional elements that could form the basis for this new site.

IDEO provided the design for the Automobility site, and it was Solspace’s role to take an inventive approach to development and implementation, using existing Javascript libraries and focusing on exceptional user experience, engagement, and site responsiveness. We quickly learned that the available JS libraries were inadequate, and didn’t contain what we needed to create the innovative interactions that IDEO had envisioned. Not to be deterred by the lack of existing scripts, we envisioned and built our own animation configuration library called Drive JS.

Drive JS offers developers the ability to build a standard HTML DOM website composed of pages – typical website structure - but with the addition of a JS configuration file that defines and drives how the pages and HTML elements interact with one another on a timeline. With simple configuration settings, it was now possible to control a wide variety of scroll-based interactions and animations like those you now see on the Automobility site.

Aside from the technical challenges of coaxing a modern desktop web browser into ingenious feats of UX acrobatics, there were also challenges of performance and scale to address. IDEO wanted to tell a completely immersive and compelling story, and they wanted the technology to stay out of the way and provide a seamless and elegant experience for their users. They wanted to serve the largest, highest resolution image files possible, and serve them without hiccup or delay. We opted to run the site from an AWS instance backed by the CloudFront CDN, with some additional help from Amazon S3. This collateral was additionally preloaded using some innovative techniques in anticipating user behavior in order to optimize performance while not sacrificing experience. The nature of a site like Automobility is that it receives massive traffic spikes during press events, but is mostly quiet during the intervening periods. A cloud infrastructure was ideal for managing these irregular spikes in traffic. Since the pages did not need to be dynamically built from a database, they were well-suited to being served through a global CDN that could scale up or down to meet demand.

The Automobility site has been extremely successful since its launch. It won two Webby Awards - the Judge’s Award and the People’s Choice Award in the category of Car Sites & Car Culture - and was also honored in the category of Best User Interface.

Solspace is extraordinarily proud of the impact this dynamic partnership has achieved, and the recognition of this achievement by the public as well as our peers in the technology industry. The Automobility concepts have been featured in multiple publications since launch, including the following:

Let's begin our conversation

Contact us now.