CNN Booming Bangladesh - Pushing creative boundaries with Lottie
CNN Create
The animations enhanced the storytelling experience and made complex information and concepts more approachable, resulting in a captivating digital experience.
Create is CNN International’s in-house brand studio. Producing premium content for global brands, Create offers end-to-end creative services from campaign development to optimization.
In partnership with FBCCI, CNN Create Brand Studio produced ‘Booming Bangladesh’, a three-part thematic series hosted in an integrated hub. The content series sought to showcase how Bangladesh is embracing industry diversification and building an investment friendly landscape to fuel growth as one of the fastest-growing economies in the world. Core to the digital storytelling was the integration of LottieFiles which brought to life the dynamic animations featured throughout the site.
‘Booming Bangladesh’ creates a vibrant and bustling landscape through a vast, animated illustration. The artwork paints a picture of Bangladesh as an economic powerhouse with great investment potential, illustrating the country’s commitment to a greener future and a skilled workforce with an improved quality of life. Animations were used to make the site immersive, encouraging viewers to imagine themselves amidst the economic boom in Bangladesh.
LottieFiles allowed Create to bring an ambitious illustration to life, spanning a long vertical scroll. This approach was designed to capture users’ attention and increase engagement. The enhanced visual appeal encouraged users to explore the site. Using LottieFiles enabled Create to capture minute details that bring together the entire illustration without compromising on file size or load time.
Articles used simple animations to complement the narratives. Ensuring a seamless user experience, LottieFiles animations were utilized for transitions between different sections of the website. These smooth, subtle animations help guide users through the narrative without causing distraction or breaks in engagement.
How is LottieFiles incorporated into your workflow?
The illustrations were created in Adobe Illustrator and then broken down into separate layers for animation in Adobe After Effects. They were subsequently exported as JSON files via the LottieFiles plugin and reassembled in the development stage. LottieFiles also made it easy to test and preview animation within the web layout in Figma before development began. The LottieFiles plugin on Figma allowed Create to conveniently access and integrate animations into its design, facilitating smooth iterations. Create developers were then able position the LottieFiles according to the design, ensuring a cohesive final product.
Why use Lottie?
Integrating LottieFiles into ‘Booming Bangladesh’ played a crucial role in achieving Create’s goals of producing an engaging, informative, and visually appealing website. The animations enhanced the storytelling experience and made complex information and concepts more approachable, resulting in a captivating digital experience.
LottieFiles’ ability to optimize the website’s performance with minimal loading time was key to minimizing bounce rates. Integrating animation allowed the website to be more captivating, resulting in an average time spent on site of two and a half minutes across 30,000 unique visitors.
By leveraging the capabilities of LottieFiles, Create was able to efficiently pursue an ambitious idea. ‘Booming Bangladesh’ exemplifies how animations can transform a static web page into a dynamic and engaging storytelling platform.
