How OneSignal revolutionized user engagement with LottieFiles
By Catherine Supnet (Senior Visual Designer, OneSignal),
Lee Munroe (Head of Design, OneSignal)
“Lottie animations have helped us differentiate our site from that of our competitors, many of which continue to stick to static visuals to this day.”
OneSignal is a leading omnichannel customer engagement solution, powering personalized customer journeys across mobile and web push notifications, in-app messaging, SMS, and email. Our mission is to democratize engagement by helping businesses of all sizes better communicate with and engage with their customers.
Our platform enables over a million businesses to deliver 12 billion messages daily and 1 in 5 new apps launches using OneSignal. We support companies in 140 countries, including Zynga, USA Today, Bitcoin.com, Eventbrite, Tribune, and many more - from startups and small businesses just getting off the ground to established companies communicating with millions of customers.
How did you first learn about LottieFiles?
In 2021, our team started thinking more seriously about adding “delight” to our website and product. We started looking at animation and Lottie, and discovered LottieFiles in the process.
How did your team initially identify the need for an animation solution like LottieFiles?
Our team had a few requirements when it came to implementing an animation solution. First, we wanted to ensure that the introduction of animations wouldn't negatively impact the performance of our website and product. We aimed to find a lightweight solution that would keep our pages running smoothly. Additionally, we were keen on finding a solution that required minimal to no developer support. This meant seeking a tool that could be easily maintained by our Design Team.
Lastly, we prioritized a quick implementation process. In the past, we only displayed animations in formats like GIFs, WebM, or MP4 files. This approach required using multiple browser based file conversion tools and resulted in lengthy wait times to generate animations. We wanted a more efficient solution that would enable us to ship animations more swiftly and seamlessly.
What were the main objectives and goals of incorporating Lottie animations into your project, and how did they align with your brand and marketing strategy?
Incorporating Lottie animations into our website and product was not just about adding a touch of visual flair. It was a strategic decision aimed at improving engagement and overall user experience.
Our primary goal was to incorporate Lottie animations to improve engagement through motion. We recognized that engaging motion design can positively impact user behavior through a couple of ways:
Creating a Delightful and Memorable Experience
Motion design can create a memorable and enjoyable user experience. Sleek and unique animations can add a sense of delight, making our pages not only more engaging, but also more memorable and respectable. We can better entice users to explore more content, increasing the time users spend on our pages and lowering bounce rates. When it comes to our website, this in turn can help improve our website SEO ranking.
Improving Content Comprehension
Our Lotties serve as an effective tool for improving the clarity of our page content. By communicating our offerings through motion design, we made it easier for users to digest and understand page content. This is because users wouldn’t have to sift through lengthy bodies of text to grasp what we offer.
We’re already seeing some positive reception in pages we tested Lottie animations on. Some feedback from user testers on the Journeys page in our public website when asked, “What type(s) of content did you find engaging or useful?”
“Workflow automation chart is great. I could easily understand and found it pretty useful.”
“Visual explanation of personalized engagement journeys.”
“Seeing how the workflows look in terms of a flow chart.”
How did LottieFiles help you enhance your product or service's visual identity, user experience, and engagement?
Message Sent Lottie
After our customers send a message, we show them a Lottie animation to indicate success and that their message is sending. Sending a message can take a lot of back and forth, collaboration with stakeholders, testing and so forth, so we wanted to design more than just a green check that said success. Through our Lottie animation we celebrate the moment with our customers, adding a sense of joy to their workflow.
Dashboard Empty States (Journeys and Live Activities)
We wanted to enhance the empty states across our product to better show off the value of our features. Instead of just a static screenshot or icon, we started adding Lottie animations visualizing the product being used to better show off what it looks like once customers create something. This has helped us convert more users that land on these empty state pages.
Can you describe the creative process behind designing and implementing the animations using LottieFiles?
Our animation creation process begins with the static visual, which is crafted and maintained in Figma. We break down the static visual’s elements into individual parts, which will become the layers in our After Effects composition. Once the individual parts are set, they are exported @2x as high-resolution PNG files.
After obtaining these individual PNG files, we use the tool TinyPNG to reduce their file sizes, ensuring we preserve image quality. Once compressed, we bring the files into After Effects, where the actual animation development takes place. This phase involves refining and iterating on the animation until it aligns with our desired output.
To transform our animations into a web-friendly format, we use the Bodymovin plugin, which generates the JSON file for our animations. These JSON files are then stored in the animation library we’ve built out in LottieFiles. Our LottieFiles library serves as our repository for animations that can be deployed across our website and product.
From LottieFiles, we download the final versions of our animations as optimized Lottie JSON files then place them wherever relevant within our website or product.
What specific LottieFiles features and tools were most beneficial to your team in achieving the project goals?
One of the standout features that proved beneficial was the ability to optimize Lottie animations. This feature enables us to significantly reduce the file sizes of animations we implement across our website and product. Comparing original Lottie JSONs with optimized Lottie JSONs, we typically observe reductions in file size ranging from 50% to 80% with little to no impact on animation quality. Our optimized Lottie JSONs also rarely end up being over 100kb in size. They typically range from 45kb to 85kb.
How did your team optimize the animations for various platforms, devices, and screen sizes to ensure a seamless yet engaging user experience?
It’s typical for our team to go through 5-10 iterations for each animation to determine the optimal design approach. Our iteration process involves extensive testing and refinement in terms of layer quantity, raster image optimization, layer type, and keyframe quantity.
Layer Quantity
We examine how the number of layers used in an animation influences the final Lottie file size.
Raster File Optimization
We experiment with finding the sweet spot where we can reduce file sizes without compromising on image quality. In some cases, we discovered that breaking down complex raster images into smaller, separately optimized raster images can result in an overall reduced Lottie file size.
Layer Type
We experiment with the impact of using raster layers versus layers created within After Effects.
Keyframe Quantity
We fine-tune the number of keyframes within each animation, keeping only those which are essential to communicating the message of the visual. This way, we create animations that are optimized for easy loading while still being easy to understand, appealing, and engaging.
How did the Lottie animations impact key performance indicators (KPIs) such as user engagement, retention, conversion rates, or performance?
Website
After doing a deep dive into our page analytics and heatmaps, we have seen improved engagement rates and deeper scroll depth on every page we have implemented Lottie animations on.
We have also already seen some positive reception from pages we applied Lotties to. Feedback from user testers on our Journeys webpage when asked, “What type(s) of content did you find engaging or useful?” included:
“Workflow automation chart is great, I could easily understand and found it pretty useful.”
“Visual explanation of personalized engagement journeys.”
“Seeing how the workflows look in terms of a flow chart.”
Dashboard
By applying Lottie animations to our empty state pages, we were able to showcase the value of features and give customers a preview of what it looked like and did. By doing so we saw an increase in users engaging with those features.
Can you share any examples of animations created using LottieFiles that significantly contributed to your project's success?
Homepage hero
This animation visualizes the ability to build out customer messaging journeys from the many messaging channels we offer.
Feature pages (e.g. Journeys, Personalization, Intelligent Delivery, Localization, In-App Surveys, Permission Prompts)
These animations, typically placed within the hero or body, visualize what the feature is or how it works.
Dashboard Empty States (e.g. Journeys and Live Activities)
We try to recycle the Lottie animations applied to the website, which visualize what the feature is or how it works.
Were there any challenges or obstacles your team faced while implementing Lotties, and how were they addressed?
Our team faced challenges related to working around Lottie's list of feature limitations. We made good use of the Feature Support Checker tool that's available for each Lottie upload. This tool proved to be invaluable in identifying potential issues with our animations, enabling us to take action to make corrections. It continues to serve as a vital quality control step in our animation creation process.
To work around the Lottie limitations, we standardized over 25 different motion patterns that we identified as Lottie-friendly. Establishing these patterns was essential not only for our team to maintain consistency in terms of animation types and pacing, but also to ensure that the types of motion we apply across various projects remain Lottie compatible.
Have Lottie animations helped your brand standout from the crowd? If so, how?
In a competitive digital landscape, standing out is crucial. Our Lottie animations have helped us differentiate our site from that of our competitors, many of which continue to stick to static visuals to this day. Thanks to Lottie, we can display animations that are crisp in quality, visually distinct, delightful, and memorable.
How difficult or easy was it initially to convince your team to try Lottie animations? What was their feedback after it was implemented?
Our team was initially hesitant to consider Lottie animations primarily due to the feature constraints associated with Lottie. When it came to Lottie application across our website, for example, we thought we wouldn’t we wouldn’t be able to implement animations that visually align with our existing website visuals due to Lottie’s feature limitations. In addition to this, our team also had limited experience with After Effects to work around those constraints. There was a natural hesitancy to proceed given After Effects notorious learning curve.
After a couple of early Lottie implementations on our website were met with praise company-wide, our team made the commitment to proceed with Lottie. We dedicated time to establish basic Lottie-friendly motion patterns, which we follow and continue to build out to this day. This effort to standardize patterns proved instrumental in streamlining our animation production process, significantly reducing the turnaround time for producing lottie animations.
How do you see your company continuing to leverage LottieFiles in future projects or campaigns?
Up to this point, our main focus has been leveraging Lottie for our website and dashboard needs. Looking ahead, we'll explore utilizing LottieFiles to breathe new life into other projects such as our marketing and possibly transactional emails.
