How we designed a feature film website delivering 567% more interactive engagement

Insights
We teamed up with the creators of the new documentary film 'Shaped by Water' to launch a creative hub that showcased their captivating approach to storytelling.
3rd July 2023
5 min read
Joe Batchelor, HLabs' Editorial Director
11th Hour Hero Dive
© 11th Hour Racing - Shaped by Water

HLabs was founded with the vision to create stories that matter and bring content to life through industry-leading interactive storytelling.

 

This exciting highly-visual brief enabled us to really explore our creativity and live out that very vision. By designing a website combining stunning moving imagery, photography and engaging editorial, we were able to deliver a project we’re really proud of.

 

And yes, we know the number 567% sounds sensationalist! Read on to see just how it was achieved.

What was the brief?

Shaped by Water is an artistic film exploring how water connects us all and shapes the world around us. Featuring three exceptional athletes in three incredible locations, the film was released on May 14, 2023, in Newport, Rhode Island with our Founder and CEO Han present to watch!

Our brief was to create a bespoke and fully responsive website that would eventually embed the final film and flow seamlessly between the various types of content it would be showcasing in the build up to the launch. 

A key part of the way we’d be introducing the team behind the film and key characters in it would be through editorial storytelling so this required the building of custom article pages alongside an immersive and engaging hub that was easily curated.

View 'shaped by water' microsite

What platforms and technology did we use?

Our team initially designed the wireframes and layouts in Figma before developing the website in Webflow, one of our no-code design platform partners. 

Webflow functionality we utilised:

  • Designing bespoke CMS article pages
  • Fully responsive framework with multiple breakpoints
  • Using micro animations and page transitions using Lottie files
  • Using a custom cursor to increase engagement
  • Dynamic gallery mode to allow readers to browse article by images


View 'shaped by water' microsite

Using Lottie Files and custom cursors on this piece just raised the bar. It's our favourite showcase of a full CMS driven microsite utilising so many of Webflow's features.

What did we deliver?


HLabs offers multiple specialism services within our team and they all combined for this project alongside the client to construct a fully responsive, functional and optimised website. 

We presented three distinct design routes before creating a sitemap which would allow everything to sit in a structured and navigable way. Each area of the CMS was designed to be simple to use, fast to load and easy to showcase the beautiful content we were provided with.

View 'shaped by water' microsite

"Thank YOU so much! You and your team really kicked ass to make this possible and I’m super grateful. Having you there throughout this process was beyond helpful not only as a sounding board but also as a creative cheerleader, so thank you so much. I’m really excited to see how we can keep working together!" Corinna Halloran - Senior Producer.

Did we learn anything from the project? What were the results?

We didn’t want to compromise on the editorial so we needed to design a streamlined article structure that fit all the different formats without constraining the content.

Also, designing, building and populating a new website from scratch requires adaptability and a solution-focussed mindset! Luckily, we have some of the best Webflow developers available and they found solutions within the platform to maximise our design features.

The website was heavily promoted by the client and in the weeks following its launch, click engagement around the upcoming film had risen by 567%.

  • Impressions on site rose 127.8%
  • Audience gained rose 68.4%
  • Engagements on site rose 156.7%

View 'shaped by water' microsite

Boost your website's engagement 500x over!

With our expert team of developers, writers, and designers at your service, we'll help you create a website with stunning visuals, captivating editorial content, seamless navigation, and lightning-fast speed, elevating user interaction and engagement to new heights!