Build compelling customer experiences with animations

1. Home
2. Insights
3. Build compelling customer experiences with...

Improve user experience and drive customer engagement with visual storytelling

Designing an engaging user experience is key to a successful brand positioning. In an attention-seeking digital eco-system, capturing and keeping the customers attention is crucial for an impactful marketing campaign.

Animated visualizations help to increase visibility and maintain the users interest. Market-leaders use rich animated experiences to build a strong identity of their brand or product and to increase digital conversions. But it is not just about user engagement or brand building, animated graphics also allow more visual storytelling. By the visualization of data, e.g., product benefits or animated information, companies have the chance to build trust with a potential client and increase the awareness.

For visual designers activating the full potential of animated user experiences could be an exhausting process. Visual design teams and developers need to work hand-in-hand to produce a fully integrated experience, which works seamlessly across all customer channels or platforms.

Aside of video content or regular web interactions there are many tools and new technologies which support the process of enabling smooth and well-performing animations on the web or mobile. A popular and free one is Lottie (developed by AirBnB). It is a simple and efficient animation framework that brings sophisticated and reliable animations to all relevant platforms, like websites or mobile apps. Lottie works with JSON-Files which contain all animation information that then could be rendered on any of the supported platforms. In the web in example, Lottie-JSON files are rendered to vector-based, responsible SVG-Graphics, scalable to any size or dimension.

Create your first Lottie-Animation

Start and create an animation with Adobe After Effects (or Figma)

The designer starts with placing vector shapes on separate layers and animating them (avoid too many groups or masks, read also our article about high-performing Lottie animations in web). It is important to know that not all the After Effects functionalities are fully supported in Lottie, therefore always consult the list of supported features before integrating them.

As a general rule of thumb, using keyframes and avoiding applying effects that rasterize the layers will have a better outcome on the final animation. Setting the number of frames per second to 60 is essential to have a smooth animation. This gives users viewing the animation a more natural and smooth animation effect.

Export your first Lottie Animation as a JSON-File

To export your animation project, download and install the Bodymovin-Plugin, an open-source extension to export animations from Adobe After Effects. It translates animations to shaped layers as a SVG and HTML and combines them in JSON-format. Once you downloaded the Plugin, open After Effects and you will find “Bodymovin” listed under “Window” > “Extensions“.

It will open a popup where you can select the composition you want to render and the destination folder where you want to place your Lottie animation file (JSON-File).

Once you are done with the settings you can click on “Render” and your animation will be exported to your selected folder.

Embedding the Lottie-Animation to your Website

To embed your produced Lottie JSON-File into a website need to install the Lottie Web Player (please also have a look at dotLottie). You can easily install the Lottie Web Player with NPM or Bower:

# with npm
npm install lottie-web

# with bower
bower install bodymovin

Embedding the Lottie Player should happen as part of your frontend build process. You can as well inject it manually and load the lottie.js file in the build/player directory of the node module:

<script src="js/lottie.js" type="text/javascript"></script>

After loading the Lottie Web Player you can easily render your animation to any DOM-element of your website by calling the loadAnimation function of the Lottie Player:

const myAnimation = document.getElementById("myanimation");

lottie.loadAnimation({
   container: myAnimation, // the dom element that will contain the animation
   renderer: 'svg',
   loop: true,
   autoplay: true,
   path: 'path/to/your/json-lottie-animation.json' // the path to the animation json
});

Add further interactivity to your Lottie-Animations

User engagement also goes through the users interaction with a website. Lottie-Interactivity offers an interaction library that helps build smooth animations which respond to the users activity or action. An user interactivity could be scrolling through a page with an animation while the animation is anticipating the movement, or responding to the cursor movement of the website visitor.

This adds gamification to any product presentation or content experience and leads to further engagement with your brand.

Integrating animation design into your design process

Lottie can also be easily integrated into Adobe XD, an interactive design tool that enables to create professional prototypes for web and mobile. Integrating Lottie into the Adobe XD design workflow helps to test and share animations with different teams for testing and development purpose, including the customization of playback options.

The Adobe XD artboard supports the Lottie file-format. Therefore, it is not needed to convert them to other animation formats. Simply download Lottie Plugin for Adobe XD and open the Lottie File Library.

Adobe XD also let you import Lottie JSON files stored locally on your computer or by inserting a Web-URL of your file.

About us

As a digital consultancy and marketing agency, 8awake supports leading enterprises with the successful strategic alignment, development and optimization of effective marketing campaigns and tactics. We are happy to get in touch with you to talk about your business targets and challenges.