At Creative Science Labs we take a lot of pride in the work we do. One of my favorites is the Save Tigers Now site, which we completed on behalf of World Wildlife Fund and Leonardo DiCaprio Foundation. The challenge with campaign sites such as these is establishing an emotional connection with visitors in a matter of seconds. After all, if the visitor does not feel a connection to the cause, then he/she is highly unlikely to support it.
When users land on a website, they often make a number of subconscious judgments within just a few seconds.
First, they decide if the content is relevant to them — this is usually done with minimal reading.
Then, if they decide the content is relevant, they will decide if and why they should care.
And third, if they still have yet to leave the site, they will decide if they should take action.
With a flagship site for a business, the goal is to quickly and clearly convey the problem that a company is solving. Establishing an emotional connection to the organization is not as vital compared to a campaign site.
However, with a campaign site such as Save Tigers Now, the challenge is much harder. You are not providing a solution for a customer nor providing a product or service in exchange for their donation. You are attempting to connect with them on an emotional level with the goal of getting them to take action. In these instances, the use of large imagery and video can be quite powerful if used correctly.
Background Video
With the advancement of internet browsers, specifically with the introduction of HTML5, the ability to run videos as a background image has become easier than ever. Please note that if you visit the site on a mobile device, you’ll see an image rather than a video as mobile browsers don’t render HTML5 videos.
My team and I borrowed this idea from Airbnb. On the Airbnb site, it is difficult to discern that the background is even a video at all. The movement is so subtle that for a few moments you’re convinced it’s an image. With the use of a video we were able to show the tiger in its natural habitat.
On a subconscious level, this quickly communicates to the visitor that these animals are not that much different than you and I. Our goal here was to show that your donation is affecting the life of a living animal. The subtle yawning movements of the tiger connect with the audience, communicating to them that this is a beautiful, vibrant and peaceful creature. It is not the predatory or violent animal that some may believe it to be.
The key to ensuring the effectiveness of this type of video is twofold. First, the video should not be so animated that it feels like a movie. The movement needs to be subtle enough such that it connects with the visitor, but not too animated to the point that it is distracting. Second, the video should not interrupt the normal user flow. It should run in the background automatically without sound and should not be in a pop-up or require the user to push “play” to activate the video.
Parallax Scrolling
Another technique we integrated is known as parallax scrolling. This allows the background images to stay fixed while the foreground content slides over it. This creates a 3D effect for visitors and offers a nice touch while keeping imagery prominent but keeps it from becoming a distraction.
I hope you enjoy the site as much as we enjoyed building it and working with World Wildlife Fund.
