Using Lottie and After Effects CC to create multi-branded animations from a single project
One of the challenges an app designer will face is how to engage a user with particular features of an app. These features seem so obvious and easy-to-use to you, but your audience may not have found them or even understand how to use them. The problem here is thinking that you are a “user”, which is not the case. The users of your product are very different to you, they may not be technical gifted, they may have visual impairments or physical ones, there are a whole range of things that make your users very different to you. So how do we educate our audience to help them find and understand how to use the features in our apps?
One method is onboarding. The first time the app is run, some screens can teach the user how to use it. This can be done in a number of ways, the trick is to keep it simple, short and ensure it doesn’t block a user from achieving their goals with the app.
The Reach apps have a number of features that our audience might find really useful, but users lack of awareness of some features is an issue. Our user research showed these features were liked, but a subset of users didn’t understand the full journey and needed more guidance to use them.
We decided to implement some simple onboarding screens and measure their success. We chose to highlight three main features:
- How to use the Tabbed Navigation
- How to find related content using Tags
- How to Edit your Tabbed Navigation
I wanted a way to engage with a user, that was playful but educational. My initial idea was to use short screen recordings that clearly showed how to interact with those features. They would be easy to make, simple to edit, and take very little time to implement from the development side. However, it became all too apparent this wasn’t the right solution. We have a single codebase for 42 apps, each with their own brand colours. If the recordings were created using the actual App it could only be used on that app because of its branding and colour styling.
A solution could be to create the same video on all our apps but a) this is time-consuming b) We’d require light and dark mode versions c) it would add a heavy payload to the apps, vastly increasing download size d) It’s just not sustainable as new apps are added to our portfolio regularly.
We needed a better solution, and as luck would have it, one of our iOS developers saw an application demonstrated by Airbnb that could potentially solve our problem. That application was Lottie and specifically its use with After Effects.
Lottie is a library for Android, iOS, Web, and Windows that parses Adobe After Effects animations exported as json with Bodymovin and renders them natively on mobile and on the web!
With Lottie, we could create an animation, export to a JSON file using the bodymovin plugin (which had been enhanced by Airbnb to support iOS/ Android), and colour the branded sections using our primary styles, this means that no matter which app runs the animation, it would display using its primary colour; Perfect!
I wanted to create the assets for the animation in vectors, to allow for objects that scaled without loss of resolution in the final animation, we have to handle a wide array of screen sizes so flexibility is paramount. The animations also needed to be generic…so no logos.
For the style of the animation I wanted to keep the imagery simple enough to make it obvious what you are looking at. One evening, I was sat with my daughter watching TV, and her favourite show came on - Hey Duggee
The show uses simple colours and shapes to make characters and animals instantly recognisable. For instance, a chicken is a yellow triangle, children know its a chicken, even if it doesn’t look like one in real life. It was the approach I had been looking for.
As it happens our apps already have a cartoon style for our “Error Screens” so it was simply a matter of expanding on those designs. I created the designs in Sketch being careful to layout the screen with minimal text and more focus on the animation.
Adobe Illustrator is my go-to tool for creating vector files, so I set about building out the assets for the animation. I even had some existing artwork created by one of the Reach designers that had never been used, it was perfect in keeping with our established style for our error messages.
Each asset was saved out as an .ai file and then imported into Adobe After Effects to be animated. Once the animation was complete, I had to create shapes from the vector layers in order for them to render correctly in the JSON file.
The initial JSON files from Bodymovin worked well, but there was a problem when playing them natively in the app. If you are familiar with illustrator, you’ll know there are a number of tricks designers employ with layers, slicing and masks to form parts or whole images from a number of objects, unfortunately, these masks don’t translate into JSON and the slices are revealed in the final animation. It made the whole sequence look really rough around the edges.
To solve this, I had to go back into each asset, make sure that no masks were used, all objects were expanded and any slices were joined together to give a clean vector shape. It did take some time, but the final JSON render really benefited from the cleanup and provided the polished look I wanted.
With the animations complete, our developers were able to import them into the project. Once imported, they were able to use the Lottie SDK to target specific animation layers and keyframes and set the colours to each publication’s primary brand colour, giving each app its own bespoke branded animation. Layers that needed to be coloured are easily found using the online Lottie Files Preview tool and selecting the “Edit Layers” button, which provides you with each group and layer name.
This is the swift code looks for the key path politics topic and the topic selector.
This is how we set the colour value in the Lottie Framework.
Here are the final animations in place, including the native swipe gesture. each animations is only around 500k is size, far smaller than anything we could have done using video.
Once everything was in place, it was time to A/B test our efforts to see whether our new onboarding would make a difference to the number of people personalising their app experience. We chose two regional papers and allowed 50% of their new users to see the onboarding experience for a period of three weeks.
We had Three Audience Categories:
- Completed the Tutorial. Which 39% of users did
- Skipped the Tutorial. Only 9% tapped the skip button
- Did Not See the Tutorial (52%)
After analysing the data we saw positive results. The data showed that users who complete the onboarding journey engaged with the app for longer and engaged with more content.
For uses that completed onboarding we saw:
0.43% increase in articles per user
5.20% increase in topics viewed per user (including Top Stories)
18.14% increase in topics viewed per user (not including Top Stories)
109.40% increase in users adding new topics to their topic navigation
138.80% removing topics from their topic navigation
The above stats are great, but why? We set out to educate our users to engage with features that helped them find more content and personalise their app experience. The results show that we were successful in those areas. Of the people who removed topics, which saw the greatest change, it shows our users focusing their app experience on the content they are really interested in, thus being able to find it faster. Of the users that added more topics, we were able to expose them to content that they have never found previously and moving them beyond just the Top Stories news feed. In each case the user has been able to personalise their experience, find and read more content than they normally would have.
Next Steps
Even though the results are very positive, especially after a short period of time, we wanted to go further and track a little more. One metric I didn’t have originally was knowing if a user just kept tapping the Next button to complete the tutorial or actually watched the full animations before tapping next. So for the next round of testing the devs added a dwell time to each animation sequence. Also the test grouped was increased from 2 to 6 titles of varying audience sizes. Again 50% of new users will see the tutorial, and 50% won’t. The six new publications chosen are larger, some new to the market and all are more customisable.
Also, I wanted to tweak the animations a bit to slow down each sequence, so a user had time to take in what was happening.
Conclusion
So far, using onboarding has had a positive result, we were able to educate a bunch of users of some key features and see an increase in their consumption of articles and topics. Without using Lottie and After Effects, we could have had a much worse experience and far more complicated deployment pipeline. If you haven’t used Lottie before, I would definitely recommend you take a look.
I’ll have the results of the new A/B test in a months time, and I’ll update in a follow-up post along with some more detail around how the Android implementation is done.
