Responses by Brian Cicero, executive producer; Anthony Dupon, lead developer; and Maxime Rimbert, lead designer, Dogstudio.

Background: We started our partnership with Zoox while its team was still under what they described as “stealth mode.” They had worked in complete secrecy for six years, painstakingly developing a technology that would transform the future of transportation, the first autonomous vehicle designed from the ground up. While its competitors were still retrofitting existing vehicles to be autonomous, Zoox had already built a fully functional vehicle that was unlike anything on the road. It was time to break their silence and reveal Zoox to the world, and the team approached us to help them do it. We designed an immersive website that would excite the public and firmly distinguish Zoox apart from other autonomous vehicle companies on the market. We also needed the site to educate users about a brand new, very complex technology in an approachable way.

Design core: Early on, Zoox made it clear that high-res assets of the vehicle were an absolute necessity. In addition, the site needed fine-tuned motion that showed the vehicle from multiple angles. This led us to explore a combination of short videos that would seamlessly blend into a scroll-controlled image sequence, which enabled us to use extremely high-quality assets while preserving site performance. You’ll see this technique used throughout the site but most prominently on the Vehicle and Autonomy pages.

The design direction needed to be sleek, simple and approachable, with just enough mystery and intrigue to encourage the user to explore the site. To achieve this, we went to the source of inspiration: the vehicle itself. The Zoox vehicle is perfectly symmetrical: no front or back, no left or right side. It is delightfully rounded with the edges of the vehicle itself, the windows and the interior details welcoming the passenger with smooth curves. Finally, the vehicle is playful and different; it took the rules of what a car “should” be and threw them out to imagine what a vehicle in the future could be. You’ll see this influence throughout the site in our use of center alignment on page layouts, the rounded corners on images and UI elements, and the playfulness of the footer.

Challenges: We started our collaboration with Zoox while the team was still defining the visual direction and producing 3-D assets. This quickly implied we would be doing a lot of back and forth with the creative team to develop the best approaches, whether it be for overall concepts or the site’s art direction. 3-D assets were still being changed and updated a week before launch, forcing us to create a strong relationship with the client and improve our communication.

Navigation structure: We wanted new users to feel like the site was a single page, seamlessly getting the full story. Therefore, the site was conceived as a metaphorical book: one story divided into chapters. Every page ends with a panel that triggers on click to load the next chapter.

The three main pages tell a different part of the story. The landing page is all about the reveal and generates excitement. The Vehicle page offers a more detailed approach to the vehicle, showing both its interior and exterior. Finally, the Technology page explains how the vehicle works and how reliable it is.

Technology: Zoox’s site was developed using WordPress as a CMS. For the front end, we used a templating language called Twig to deal with the pages’ HTML. All the styling was done using SCSS.

The key element on Zoox is the scroll animations. We wrote scripts to generate PNG sequences from videos. Using FFmpeg, we defined the framerate and the level of optimization we wanted for these sequences. We chose PNG sequences over videos, as we felt it was the best option to create smooth animations based on the scroll position.

Speaking of scroll animations, most of the UI is animated as users scroll (except for PNG sequences.) We used CSS Animations for some, but the most complex ones rely on GSAP.