In collaboration with our long-time partner Atlantic Re:think—The Atlantic's in-house creative marketing group—we built a monumental interactive experience for Facebook. The virtual experience, Create Your Own Main Street, lets users see how personalized ads on Facebook and Instagram can actually help them discover and fall in love with small businesses they would have never encountered otherwise.
The Project
Our directive was to create an interactive experience that felt friendly, local, and personalized. The end goal was to help The Atlantic communicate how sharing your personal information with Facebook can not only give users a groundbreaking shopping experience but also help small local businesses.
We determined that the best approach to Atlantic Re:think’s goal was to introduce visitors to an interactive small town setting with small businesses—a Main Street—they would find approachable and compelling. So we built an immersive 3D experience for mobile and desktop that gives users the feeling of augmented reality without any of the hustle and bustle of a real Main Street. This project is not unlike the City in the Cloud we designed for Microsoft, just on a smaller, more personal and interactive scale.
The Process
Triptych was involved at every stage of the process. We began with an exhaustive creative discovery phase by analyzing communities that embody small business followed by strategizing and mapping out our main street based on inspiration we gathered for the challenge. Our design team sketched multiple layouts before proceeding to build the scene from scratch.
Through a series of prompts, the user needed to feel as though their decisions influenced the look and feel of their own personal Main Street. To accomplish this, our designers utilized Facebook's color palette as a jumping off point. The design and dev teams worked closely to extract color variables attached to primary and secondary palettes which would correlate with the user's choices at the onset of the experience. Due to the varying nature of the available color schemes, additional skyboxes were illustrated to tie the world together and create a pleasant experience, no matter the color combination.
Our biggest challenge was integrating the Facebook and Instagram ads in a way that felt natural and intuitive to the experience. We overcame the issue by presenting the ads as cards adjacent to some of the storefronts to help users make the connection.
Since launching the experience, the main street has gone through several iterations to reflect the changing seasons in real time. The initial launch showed a vibrant main street in midsummer lined with flowers. With the onset of fall, we decorated the square with pumpkins, hay bales, and drifting leaves by accommodating the new geometry with the existing 3D. Our latest update shows a festive main street covered in falling snow and strung with lights.
The Tech
We used the following unique stack to pull it all together:
- Blender / Cinema 4D
- Figma
- Three.js
- Nuxt and Vue JS
The Result
Create Your Own Main Street is the most engaging campaign The Atlantic has run all year. The user time spent on the page has averaged 5:02—vastly outperforming your average interactive campaign.
Interested in planning an above-average digital campaign? Let us know — hello@triptych.co
