Collaborators
Project Management : Sabrina Madiar
Product Design : Lee Merricks
Developer - Micheal Duffy
Introduction
In collaboration with Vogue, Samsung launched a OOH ad campaign titled "The Greatest Gift," featuring AJ Tracey, Jess Alexander, and a lineup of Vogue talent using Samsung's physics-defying phone, the Z Flip 5G, to create a special video gift for a prominent figure.
This partnership aimed to showcase the innovative features of Samsung's Fold and Flip devices. I was tasked with creating a tech-focused web page to complement the Vogue campaign, highlighting the new devices' capabilities.
Main Objectives
Samsung envisioned a digital experience that would be on par with the technology of these flagship devices, aid in online product discovery and increase engagement. The wanted to show the flexibility of the devices as well as highlight key feature.
3D WEB DESIGN USING WEB GL
Drawing inspiration from luxury brands, we opted for a minimalist approach, rendering product hero images in 3D and animating them on the website. Leveraging WebGL technology, the devices came to life, offering users an immersive and interactive browsing experience.
The 3D scenes, created in Cinema 4D and exported as GLTF files, were programmed to animate seamlessly as users scrolled down the page, enhancing engagement and showcasing the devices' flexibility and features.
Technical Prototype
Following initial animation and technical testing, the first version of the website was designed. Utilizing visuals from the Vogue campaign, we crafted a dynamic sequence of phones, highlighting key features as users scrolled through the page. Navigation links smoothly guided users through the content, synchronizing with the timeline of the 3D scenes to provide a cohesive and engaging experience.
The 3D scenes, created in Cinema 4D and exported as GLTF files, were programmed to animate seamlessly as users scrolled down the page, enhancing engagement and showcasing the devices' flexibility and features. Before that we renderd. a test scene to test hohow te movement could flow between transitions.
Technical Challenge
Our motion capabilities were initially constrained to scale, rotation, and position adjustments. While we experimented with displaying content emerging from the phones during our initial test, the results fell short of our expectations. Subsequently, we devised an innovative workaround for simulating screen switches.
By scaling different screens from 0% to 100% while the devices were not directly facing the camera, we effectively avoided any artifacting issues that might have arisen during transitions. This approach ensured smooth and seamless visual transitions without compromising on quality or user experience. We added a short MP4 prelaoder video to helped to mask the loading time of the website.
Feature-led Design:
Upon completion of the initial tech demo site, Samsung expressed interest in expanding it into a fully-fledged Web GL experience.
The focus shifted from being a companion website for the Vogue campaign to showcasing the features of Samsung's new foldable range, the Galaxy Z series. The design was refined to highlight standout features of the devices, emphasizing their unique capabilities and versatility.
Final Animated Devices
The 3D scenes were reanimated to spotlight specific features requested by Samsung, showcasing how the devices could be utilized in various scenarios. Additionally, feature videos were integrated to provide users with detailed insights into the new Fold and Z Flip devices.
The website's performance across devices was optimized, with the final GLTF file used for motion weighing under 3MB, ensuring seamless functionality and fast loading times. Below you can see the final timeline animations without the page pauses. If the user used the naviagtion to visit a seperate part of the page we faded to blac or white to hide the potantially jarring sped up animation as the scroll was linked to the animation timeline.
Final Website
The culmination of our efforts resulted in a visually stunning and highly interactive website that effectively showcased Samsung's Fold and Flip devices. With captivating animations, informative feature videos, and intuitive navigation, the website provided users with an immersive experience, driving engagement and interest in Samsung's innovative products.
Results
AWWWARDS Winner
Site of the day
Beat UK sales targets
Figures under NDA
Skilled up internal team
Thisproject led to us being able to take on more AR and 3D web work