"Visitors could create a wishlist of all products they saw while browsing the web, which would be connected to the standard e-commerce platform — making it not only a beautiful experience, but also a demonstration of how a branded experience can be commercial as well."DEPT®
Q: Tell us about your initial moodboard, wireframe, or prototype. How did things change throughout the process?
A: We went through many iterations, starting with moodboards, sketches with a digital illustrator and working our way up to a mockup 3D world that was translated into a detailed, lifelike 3D world step by step. Combining this with meticulously orchestrated photography in a screen studio, we were able to seamlessly integrate them into the digital domain. This grew organically from concept to reality.
Q: What influenced your chosen technical approach, and how did it go beyond past methods?
A: We considered how to mix commerce, brand and magic into a user-friendly story. We chose colors to add a surreal and magical touch to the forest. Like a real forest, we can see how the forest lives digitally. For example, leaves sway in response to cursor movement. The audio has also been considered; linking to the forest and movementWhen did you experience a breakthrough or an "a-ha" moment during this project?
The ten products chosen for the campaign have vibrant and reflective prints that stand out even in the woods. They are also not randomly placed in the forest, but flow into it and become a part of it, from a bush's dress to a butterfly's boots. Finally, we create a fairytale-like story with ten short sentences that always appear in the context of a new product.
Q: What web technologies, tools, and resources did you use to develop this?
A: The campaign's products were photographed in front of a green screen. An illustrator then cut them out and added light and contrast before placing them in digitally painted forest scenes. We created a 3D world with parallax scrolling by layering all of these 2D assets and using motion. This setup renders the bee in 3D, making it appear realistic from all angles. After loading Javascript, the 3D model is rendered using WebGL code.
Q: How did you balance your own creative ideas and technical capabilities with a fair representation of the client’s brand?
A: Regular check-ins, continuing to challenge one another, open communication and flexibility on all sides has resulted in the purest form of co-creation, transcending the traditional division of roles between clients and contractors.
Q: How did the final product meet or exceed your expectations?
A: The bee was used to emphasize the main e-commerce platform's experience. The visitor is transported to the magical experience by clicking on a bee flying around. Visitors could create a wishlist of all products they saw while browsing the web, which would be connected to the standard e-commerce platform — making it not only a beautiful experience, but also a demonstration of how a branded experience can be commercial as well.