the challenge
Quickly design and build a digital campaign that communicates how Allstate helps consumers in tough economic times — and, perhaps most importantly, engage consumers with unique visuals and navigation.
why?
For some of us, even those of us who lived and worked through the dotcom fiasco, this is the first time we’ve ever experienced such a severe economic crisis. It affects everyone, regardless of personal situation. Allstate has a unique value proposition — it was founded during the Great Depression. Allstate has more than just a superficial understanding of what it’s like to live through tough times; the very concept is a core part of the brand’s DNA.
how?
We went into this knowing that collaboration was the key to success; with such a tight timeline, doing the traditional work/review/revise/repeat between our team and the client team would have been a recipe for disaster. Key personnel from the client spent a week with us on-site in San Francisco. Out of those meetings, we refined the creative concept and finalized a basic look and feel.
A key part of the concept was the simultaneous display of lots of information. How can we show the breadth of Allstate’s insurance offerings in an engaging way, but still allow the user to consume that infomation in small, easy-to-understand bites? We decided to create a fairly non-traditional navigation structure. All the content is present on the page, but only summaries of that content are visible. When a user mouses over the summary, all other content repositions itself to allow the focused content to expand, displaying the entire story, article, video, or image.
This was accomplished via creation of a grid system. Each content box — and there are different types — has coordinates stored in XML. Upon mouseover, the system recalculates the focused box’s coordinates and scale, and determines how the surrounding boxes should move out of the way. All of this is figured out and rendered on the screen without a noticeable delay to the user.
The dynamic nature of this system allows us to swap out content without restructuring all other content.
key technologies
Front-end constructed with Flash AS3. Content stored in external SWFs and XML. PHP, MySQL for sharing functionality. Code repository via subversion.
team
- Stephen Goldblatt, Executive Creative Director
- Steven Knodel, Senior Designer
- Husani Oakley, Director of Technology
- Brad Griffin, Technical Lead
- Tim Kautz, Flash Programmer
- Jason Jobe, Motion Designer
- Matthew Newell, Senior Producer
- Mike Merit, Account Director
Wow Husani… Looks a lot like http://www.adidas.com...