Responses by Martina Pozielli, producer, MONOGRID.
Background: Dolce&Gabbana Beauty wanted to celebrate its new perfume Dolce Blue Jasmine perfume and previously released perfume Dolce Violet with a memorable digital experience that would showcase the products and boost brand engagement by capturing the audience’s imagination. Drawing inspiration from the No Plan Just Dolce campaign for Dolce Blue Jasmine—shot in Rome and starring model Chiara Scelsi—we envisioned an interactive adventure that invited users to discover and engage with the fragrances across Italy’s Eternal City while traveling on top of an old-school scooter.
Design core: We reimagined the Dolce Blue Jasmine campaign into an immersive, interactive motorcycle journey through Rome. Using an avatar, users can move on their virtual two wheels on a map to explore four of the city’s most iconic landmarks—the Trevi Fountain, the Spanish Steps, Gianicolo and the Fountain of the Four Rivers—in 3-D. At each stop, they can either learn more about one of the Dolce fragrances or have fun with additional related activities, like enjoying curated playlists and trying an Instagram filter that turns their adventure through Rome’s signature views into personalized, shareable instant snapshots.
Process: Our design process always begins with a crucial question: “What story do we want to tell our users, and what emotions do we wish to evoke?” We envisioned the nostalgic feeling of returning home after a holiday, reminiscing while looking at a map of the city we visited, the photos of interesting landmarks and the cherished memories we created during our travels. From this inspiration, the concept for the website emerged. We wanted our users to traverse a map of Rome on a classic Italian scooter, recalling the narrow “vie,” the stunning “fontane” and the magnificent “piazze” they saw on their last visit to the Eternal City.
Navigation structure: The website captivates users with a delightful experience that evokes the sensation of wandering through Rome while connecting with the Dolce&Gabbana brand. Knowing that the main interaction would involve users driving a scooter around the city, we thoroughly tested and fine-tuned its behavior to ensure it was as responsive and enjoyable as possible.
Next, we focused on striking the perfect balance between free exploration and guided navigation through the city. After extensive testing, we decided to incorporate handwritten arrows and notes on the map, ensuring users could move freely without ever feeling lost.
Technology: We developed the website using the Vue3 frontend framework and GSAP for animations. To create the 3-D components, we utilized WebGL technology and exported them from Unity using our custom Unity-WebGL framework.
The most complex part was creating the 3-D city layout. To handle this, Unity’s authoring environment provided the ideal platform for our developers to develop the 3-D assets made by our art team. Once the city layout was complete, our Unity-WebGL framework ensured that the exported scene in the browser matched our Unity construction perfectly, while also allowing the 3-D scene to communicate seamlessly with the HTML elements.