Building a Virtual Community

Picture a typical small town main street but in 3D — a vibrant, procedurally-generated tableau where each user is introduced to the familiar and the unexpected.

Meta Main Street
Meta
Strategy, 3D, UX / UI Design, and Front-End Development
162,565 page views in 3 months. 5:02 average time on site.

The digital small town life

To initiate the experience, you encounter two multiple-choice questions tailored to customize the journey according to your preferences. Your input serves as vital support for small businesses, enabling personalized ads to reach the right audience.

After answering the questions, a bespoke town square unfolds that has been crafted to your liking. Main Street, meticulously optimized for every device and bandwidth, invites you to meander or engage with businesses in the digital environment.

Meta's Main Street custom view
Mobile view of the Main Street intro UI
Mobile view of the Main Street 3D view intro
Mobile view of the Main Street customized add experience
Mobile view of the Main Street ad description

Silicon Valley meets Mayberry

Our Meta Main Street is interactive but also exceptionally cozy. We engaged in strategic planning, sketching, and debates to encapsulate the fusion of the tech world and a timeless human environment within a 3D experience. In the end, we believe we nailed it. Though not literally (no hard hats, remember?).

Concept sketches for the Meta Main Street block plan
Concept sketches for the AR user path experience
Additional sketches for Main Street planning and ad placement

Same block, different feel

To give users the best experience, we designed Main Street to be dynamic, evolving with the ebb and flow of time and seasons. This transformation, not without meticulous planning, involved intricate overhead street layouts and diverse small-town studies, ensuring every detail seamlessly adapted to various circumstances while maintaining a recognizable charm.

3D Blocks vary depending on user choices

Load it over and over again

To maintain a fresh Main Street experience for users, we devised and implemented a sophisticated matrix of unique visual outcomes. These outcomes were dynamically generated based on users' responses to preference questions. Our collaborative effort between the 3D and front-end teams resulted in a diverse range of color palettes, each tied to specific user profiles. These palettes were procedurally applied within the Main Street experience to dynamically recolor the geometry, ensuring a personalized and engaging visual journey for each user.

3D elements can be reused and rearranged to customize the Main Street experience
Mockup of the Main St experience - each season presents users with a 3D scene to fit match