Hero image

Virgin Voyages

unleashing the power of ai and jennifer lopez in a memorable virgin voyages project

Development
Get in touch

intro.

Our friends across the pond at Deeplocal approached us with a fun brief to collaborate on a project promoting Virgin Voyages, featuring none other than Jennifer Lopez. This would be a multi-agency effort, pulling together the best of the best across the globe to create something truly memorable.

the brief.

fast-loading, slick, easy to use and fun

Flaunt Digital were responsible for looking after everything front end web development. This primarily consisted of bringing the design and assets to life with a mobile-first website. The website would allow the user to enter details of themself, a friend, and what type of cruise they would like to embark on.

Featuring J Lo heavily was obviously a big part of the interface brief, and as the project title depicts, there is of course an artificial intelligence element. Throughout the user journey the entered details are sent via API to our partners to produce tailored audio and video elements to present back to the user. This happens in real-time!

The website had to be fast-loading, slick, easy to use and above all, fun!

challenges.

speed

Every website which has many high-resolution, pretty assets to show off will always need some thought here. 

multi-stakeholder

Any big budget project with Hollywood agencies involved is going to take some heavy project management.

solutions.

hosting

We researched a few CDNs and high-performance web hosts and settled on Netlify. Again something we’ve used and relied on before, but also something which fits the needs of the project very well. Asset storage and CDN was offloaded to Google Cloud Storage. This can then be easily managed by other stakeholders who are in charge of the final asset production.

our approach

After some team brainstorming we settled on a flat build approach using Assemble.io. Something we’ve used before and we are familiar with, tried and tested, so we knew we could get a prototype up and running in no time. We configured this through grunt.js and implemented browsersync to speed up the dev loop.

We got to work right away tackling the critical elements of the web build first, building out a custom framework capable of playing a video slideshow, with custom transition and user controls.

From here we could break out the custom components the design would require us to build, and start piecing together the components within the slideshow framework.

At this point, we had a functional prototype and we could begin to implement the various APIs into the flow to generate the generated audio and video elements.

Finally, we dropped the production assets in place and performed our meticulous QA process.

Final checks were performed across the product, including Google Analytics event specification checking – every meaningful user interaction is tracked to ensure reports can be provided later to indicate the success of the project.

launch

We launched the project on a bespoke domain name to mitigate some risk. (Rather than a subdirectory or subdomain of the main Virgin Voyages website.) This approach also allows us to stage the final project on the final URL, behind a password. Netlify allows us to manage authentication very easily through their impressive dashboard.

The project has been a huge success. Taking over the homepage of virginvoyages.com at launch and also being mailshot out to all of Virgin Voyages customers. So far we’ve seen thousands of bespoke AI videos generated and also many thousands of voyage invites sent.

As soon as the dev team got briefed on this project, we knew it was going to be a good one! It’s not every day you get to build a web frontend showcasing a celebrity AI model, that’s for sure. We quickly settled on a flat frontend, JavaScript-based framework and our tried-and-tested hosted platform, Netlify. This stack allowed us to iterate prototypes rapidly – getting a tight feedback loop was a top priority for this project. The biggest hurdle we encountered during the project was the quantity of high resolution assets; namely the surrounding problems such as load times, compression and caching. Nothing a short amount of R&D couldn’t solve!

Jamie Shields - CTO, Flaunt Digital

more like this.