7 interactive techniques we used to improve WWF's storytelling

WWF like HLabs, believes in creating stories that matter. We look into the interactive and visual techniques we've introduced to their campaigns online to improve engagement and signups.
1st July 2023
7 min read
Written by Hannah Springett, HLabs Founder & CEO
WWF Blue Carbon
Blue Carbon in Canada Campaign for WWF made in VEV

In two years working with WWF we have used multiple techniques to improve their digital storytelling to raise awareness, promote campaigns and increase signups to petitions. We've used no-code technology such as Vev, Webflow, Juxtapose, Lottie Files as well as uplifting visuals with illustration, specific art direction and interactivity to enhance the media. This article looks at how techniques like 'scrolly-telling', data visualisation and animation increase engagement.

Technique 1: Use illustrated animations

Illustrations are crucial for nonprofit brands and campaigns as it can evoke unique emotions, reflects brand personality, and sets special initiatives apart when no photography is available. Illustration promotes inclusion and representation, particularly when sensitive or challenging subjects are involved. Using illustrations in content marketing offers clear benefits: they attract attention, increase brand recognition, engage audiences, simplify complex information, and cater to different learning styles.

Our in-house illustration team at HLabs has really enjoyed utilising illustration for almost all the WWF projects we've launched so far. See how Alexandru Savescu, our illustration director did it here.

Animation breathes life into digital stories instantly. It can be easily incorporated using no-code tools, such as embedding vector Lottie animations or adding custom animations to illustrations and text as autoplay MP4 files. Regardless of the method, movement effectively captures the audience's attention, emphasises key points, and maintains engagement. Animation adds a touch of magic to any story.

Technique 2: Embrace 'scrollytelling'

Scrollytelling video techniques refer to the use of interactive and dynamic videos that unfold as the user scrolls down a webpage. These techniques can significantly enhance engagement on a website by immersing users in a captivating visual narrative. By integrating compelling storytelling with seamless scrolling, scrollytelling videos create an immersive and interactive experience, holding users' attention and encouraging them to explore further. The fluid progression of content and the element of interactivity make scrollytelling videos a powerful tool for capturing and retaining user interest, leading to increased engagement and a memorable browsing experience. We used this technique to great effect on the Blue Carbon campaign showing the impact of seagrass.

View WWF's 'BlueCarbon' Campaign

Technique 3: Encourage users to 'tap that'

Hotspots, tabs, and clickable objects are interactive elements that greatly enhance website engagement. These features transform static objects into compelling interactive components, allowing users to explore and interact with the content. Hotspots enable users to click on specific areas, revealing additional information or images. Tabs organize content for easy navigation, while clickable objects like buttons provide instant access to actions or relevant information.

These interactive elements create a sense of control, encouraging users to stay longer, explore further, and actively engage, thereby enhancing the overall user experience and increasing engagement levels.

Technique 4: Introduce audio

Sound bites capture attention and convey information succinctly, while Spotify playlists create an atmosphere and cater to users' interests. Interactive audio elements enable active engagement and unique exploration. By incorporating these audio features, websites engage users on multiple sensory levels, resulting in enhanced enjoyment, memorability, and interaction, ultimately leading to increased engagement.

We used interactive sound components to compare whale recordings to juxtapose against the underwater noise pollution from boats and machinery to great effect in the following campaign. We encourage you to try it!

View WWF's 'Underwater Noise' campaign

"VEV & Webflow are enabling our creatives to craft and publish interactive and immersive stories, with parallax and scrollytelling techniques, without knowing any code."

Technique 5: Slide into success

Interactive image comparison sliders enhance engagement by presenting a "before vs after" scenario. When two static images are placed side by side, our eyes tend to focus on the second image, overlooking the first. However, with interactive sliders, both images receive equal attention, effectively conveying the core message and capturing users' engagement.

Technique 6: Map data to a location

Have some geographic or location-based data? An interactive map is a data visualization idea you need to try. It actively encourages users to explore and interact with geographical information, enabling them to zoom in, pan, and interact with various elements on the map. This hands-on approach promotes engagement and empowers users to discover personalized details or points of interest.

Data visualization on maps, such as heatmaps or thematic layers, presents complex information in a visually compelling and easy-to-understand manner. This not only enhances the aesthetic appeal but also enables users to grasp patterns, trends, and insights effectively.

In WWF's 'Restoration Analysis' and 'Underwater Noise' campaigns we used sticky maps to great effect.  

View WWF's 'Restoration Analysis' campaign

"Being part of WWF’s projects as an illustrator was creatively fulfilling and deeply meaningful. Contributing to the conservation of nature through visual storytelling was a privilege. Each brush stroke felt like an important step towards safeguarding our precious ecosystems." Alexandru, HLabs Illustration Director.

Technique 7 - Immerse your audience with parallax animation

Parallax scrolling websites play with space and depth, yet technically speaking this design technique is actually a lot simpler than it may seem. Most parallax scrolling websites simply move content in the foreground at a faster rate than content in the background. Through this juxtaposition of movement, parallax scrolling websites create the illusion of three-dimensional space. It can really enhance the overall user experience of a website, livening up a design with motion and enhancing its interactivity. When people see that scrolling doesn’t move everything in one fixed block, but rather touches multiple elements, they feel more in control over how they experience a website.

Need more?

How many of these techniques are you already using? Need some further advice on how to tailor these ideas to your content?