How LottieFiles have supercharged their landing pages with Framer.

LottieFiles takes away the complexity of motion design. It lets designers create, edit, test, collaborate and ship a Lottie the easiest way possible. A Lottie is a JSON-based animation file format that enables you to ship animations on various platforms with static assets as quickly as possible. Because it’s vector-based, you can scale the size of your Lottie up or down, and it never loses quality – like you often see with .gifs and .mp4s. Lottie works seamlessly with Framer, and you can insert a Lottie directly into your designs.

Taking enineering resources from the product

Before using Framer the design team at at LottieFiles heavily depended on their engineering team. Pages were custom-coded, and engineers needed to be involved whenever an update was made to the site, or a new landing page was ready to be built.

Design to implementation took too long to be effective, and there were just too many steps. LottieFiles wanted to bridge the gap between design and development, giving their design team the autonomy to build new pages without pulling developers away from vital product work.

Choosing the ideal solution

Nattu, the Co-Founder and CTO at LottieFiles, introduced the team to Framer. He recognised the importance of the design team's autonomy to design and ship the updates they needed to make to the site. LottieFiles’ aim with Framer was to streamline their process and workflow – to make shipping new pages faster and making any copy or design changes to existing pages.

LottieFiles' current process with Framer is abundantly faster than their workflow was before – the design team can now design and publish pages with minimal involvement from the dev team, and their turnaround time is faster and more efficient.

The combination of Framer’s dedicated enterprise support and the fact that Framer has a similar interface to other popular design tools – like Figma – meant that the Lottiefiles team could start testing and iterating on smaller landing pages while learning how to use the tool. After a few weeks, the designers were confident they could transform their more impactful landing pages with Framer.

Optimising landing pages 10x faster

LottieFiles is a high-growth company, and with this comes the need to quickly test and iterate messaging, copy, and layout of their landing pages. The team use GrowthBook to manage and track their A/B tests. GrowthBook is an open-source platform that allows users to deploy new features, target rollouts, and deploy new A/B tests from an easy-to-use platform.

Using GrowthBook with Framer is straightforward and can be equally impactful. If Lottiefiles wants different messaging on their pricing page, the design team makes multiple variations of the same landing page and inputs these into Growthbook. The team at LottieFiles can then assess the performance of their variations and ultimately select the best performers.

Localisation in Framer

Localisation has been a huge focus area for LottieFiles in the past several months and will continue for the next year. Before native localisation was available in Framer, the team at LottieFiles utilised Framer’s CMS to translate most of their high-performance landing pages – like their pricing page –  into multiple languages. They worked with translators to ensure that all of their translations on the site were correct and used custom code to show a different locale depending on the location of their site visitor.

What’s next for LottieFiles?

One thing’s for certain – LottieFiles will continue growing in popularity among designers as the best way to add custom animations to their sites.

Data-driven testing, facilitated by Framer, steers the design team's decisions. With Framer, they can make sure that the highest-performing content is being presented to different site visitors – committing to constant improvement and velocity.