Client: Sheldrick Wildlife Trust | Company: whiteGREY
Background
Hello in Elephant is a collaborative effort between the Sheldrick Wildlife Trust and Elephant Voices, leveraging voice recognition technology, text input, and emoji to translate human messages into the Elephant Language.
These translations are based on real elephant sounds recorded in Africa, offering a rare opportunity for people to experience the complex communication of these magnificent animals through their digital devices.
Originally launched in 2017, this campaign aimed to raise awareness and drive donations for African elephants, making their voice heard around the world.
Brief
After seven years, it's time to refresh the Hello in Elephant experience to make it FUN, MEMORABLE, and CUTE.
Approach
I began by assessing the existing experience from a UX perspective finding ways to optimise the flow and understanding the new creative sandbox, considering factors like the technology available for rendering moving images and the resources we had for illustration and animation.
I proposed several art direction styles, ranging from whimsical and cute to realistic, and explored various animation techniques, including hand-made and digital puppets, 3D animation, and Lottie animation. Through prototyping and testing, we realized that continuing with video would not support our goal of a seamless user experience. Instead, I shifted to Lottie animations, which allowed for smooth playback in web browsers. I then focused on illustrating and animating elephant responses that aligned with our objectives.
An elephant translator
The redesigned Hello in Elephant experience focused on creating an intuitive and engaging elephant translator.
The art direction featured a realistic illustration, inspired by the unique visual characteristic of elephants in Kenya taking terracotta-colored dust baths.
To bring the elephant to life, I turned the elephant illustration into a digital puppet using After Effects and the DUIK plugin. This approach allowed for creative and expressive trunk choreography that complemented the audio and conveyed the emotive intent of the elephant’s responses. The animations were then rendered as JSON files using the Bodymovin plugin, which enabled the Lottie player to encode, render, and play the animations smoothly within the web browser.
The UX flow was simplified, reducing the number of steps to see a translation from 5 to just 2, making the interaction more seamless, similar to a messaging app.
Designing the visual aesthetic of the UI combined elements of the original concept in retaining the 'hello in elephant lock-up, the colour tones from the Sheldrick Wild Life Trust branding paired with the red sands of Kenya.
The design layout emphasized minimal distractions, allowing users to focus on the hero of the experience: the African Elephant.
Results
This combination of realistic illustration and dynamic animation ensured that the user experience was both visually engaging and technically seamless. By reducing the number of clicks and streamlining the process, the time to translation was significantly accelerated. The shift from video to Lottie animations not only decreased file size and load times but also allowed for a more fluid, interactive experience, making it feel as though the elephant was engaging in a real-time chat with the user.
Through the effective use of my creative skills in illustration and animation, I was able to optimize resources and reduce the need for external talent, ultimately lowering head hours and project costs. Additionally, the donation experience was extended to seamlessly accommodate two organizations, simplifying the process and reducing the effort required for manual donation splitting.
