Responses by Matthijs Horsman, executive interactive producer; Simon Jullien, creative director; and Justus Smith, marketing and communications manager, Resn.

Background: The current version of the site is only a small part of what we’ve created in partnership with our clients, the Dutch e-bike company VanMoof. We built the site as a live launch platform for VanMoof’s new models: the S3 and X3.

When it first went online, the site featured only a sign up and a timer counting down to the big launch. VanMoof had originally planned a traditional product launch, but the COVID-19 pandemic meant a live audience was out of the question. Our clients needed another plan, and that’s where we provided a solution: taking the essential elements of a traditional launch and bringing them online.

Design core: The website had to serve a dual purpose. First, it had to function as a live, launch-event platform. Second, it had to serve as an interactive product exploration site. The launch itself was more than simply an unveiling: it was an extended program of personalized interaction for fans, influencers and press. We used the brand’s visual identity in combination with real-time, 3-D web technology to design an experience that engaged attendees in a completely new way.

The program kicked off with a talk by VanMoof’s founders, brothers Taco and Ties Carlier who joined from Amsterdam and Taipei respectively via live-streamed video. After the founders revealed the new S3 and X3, guests were able to freely explore and interact with the bike in real-time 3-D, discovering it at their own pace. This was followed by a walkthrough of the bikes’ key features, bringing video, audio and interactive elements together into a seamless experience. Fans could react, chat with each other and ask questions with the click of a button. The founders answered some of the 2,000 questions submitted by fans in a live Q&A session. At the end, fans were given an exclusive opportunity to preorder the new e-bikes. After the launch, the site transformed into the post-event version you see today, where users can shop, explore features and view the bikes in AR at home.

Time constraints: During the initial phase of the project, we had to work quickly in a short space of time to produce a concept and design solution for the client. Resn has built its reputation on conceiving innovative solutions quickly and delivering premium digital experiences with fast production timelines, but because COVID-19 interrupted VanMoof’s original plans, the turnaround for the project was even shorter than we’re used to. We had to prioritize the most important aspects of the launch and website. That meant shelving all the nice-to-haves and putting all of our efforts into ensuring that the core aspects of the experience were as polished as possible. With a live event, there are no do-overs, and a smooth launch was mission-critical. In the end, all of our hard work and preparation paid off, and the launch went off without a hitch.

Navigation structure: We use a breadcrumb-style navigation structure to guide users through the key features of the e-bikes. We chose this structure because it’s simple and intuitive, and users are already familiar with the navigation cues. The transitions seamlessly transport users from one step to the next, in a fluid, natural way. At each step, our interactive 3-D e-bikes are paired with explanatory videos from Ties Carlier, who explains some of the exciting features and technologies of the S3 and X3.

Technology: VanMoof marked the debut of Resn’s live digital launch framework, Toast. We developed Toast to help our clients unveil and celebrate their new products in this time of physical distancing. The system lets us create and manage live online product launches using a combination of video, audio, real-time 3-D and live audience participation.

We created the real-time 3-D versions of the S3 and X3 e-bikes using our Web3D pipeline, Jelly. Jelly lets us create 3-D models with interactive elements for web browsers without forcing users to endure long load times—crucial during a live event where timing is all-important. Jelly employs multiple optimization strategies for enhanced render-speeds. For instance, we minimize render passes and draw calls by combining low-poly 3-D assets with baked-in visual effects. This enables us to produce high-quality results that are essential for a premium brand experience.