Emergency funds explainer video(The process)
Ever since I began working with Cowrywise, my goal was to use motion and animation to improve the user’s experience of the product. This isn’t limited to in-app animations like the ones you find on the success pages after you complete an action. One of the things I wanted to accomplish was to make it easier for the user to understand the features on the app. An explainer video detailing the features on the app was a great idea.
Earlier this year, I took a course on School of Motion that helped me understand the process of motion design and this helped me greatly in tackling this project.
https://www.youtube.com/watch?v=4O7DL75Iwv0
The task
Cowrywise was about to launch a new product feature called the Emergency Plan. The feature is meant to help the user create an emergency fund that helps them manage a situation where the user loses their primary source of income or they encounter unforeseen circumstances. A one minute video that describes and fully explains the feature to people was needed.
Assets
With this in mind, there’s a process to creating an explainer piece that works. These are some of the steps I took:
- Script
- Storyboard
- Styleframes
- Voice over
- Music
- Foley sounds
- Brand assets
- Rough draft
- Final animation
- Final details
The script was written by my very talented colleague and shared with me. Once I got it, I started researching styles for references and created a Pinterest moodboard that helped me visualize what I wanted. I jumped straight to the storyboard phase and sketched out my ideas.
I tried not to hold back on my imagination on how the piece would be and that included 3D exploration which I wasn’t too familiar with.
After the storyboard was ready, I worked on the voice over. This was an enjoyable part of the process too. Once I was done with recording the voiceover I searched for the best music I could find that would fit the tone I was trying to project with the video. As soon as I found the right sound, I pieced both the voice over and the music in Adobe Audition.
The Animatics
I never understood how important animatics was in the process of animation before I started using it. I usually felt it was a waste of time but boy was I wrong. What the animatics helped me do was establish timing in the animation. It helped in giving a rough view of what the final piece would look like. If there was something missing, I would easily be able to adjust and accommodate it in the animatics without worrying too much about the work of a complicated final animated piece.
Incorporating 3d objects
Like I said earlier, I wasn’t familiar with using 3D objects in my animation so it was a bit of an uncharted territory for me. There were two elements in this piece that needed 3D treatment. The phone and the flipping calendar. I had an idea of how the phone would work but not for the calendar. I had two options for both, the easy way (look for 3D models online for both) or the hard way — model both phone and calendar. I took the easy which I found shortly after was more complicated than actually creating my own models.
I found a few phone models online that were really detailed but later realized that I really didn’t need those details. I wanted a brick with a screen and an ugly notch. So I jumped into illustrator and created a base to work with.
I imported my illustrator file into C4D and began modelling. One thing to note is that you should save your illustrator file as an Illustrator 8 format. Cinema 4D would be able to read this file.
It didn’t take long before I came up with a cool 3D model for animation in Adobe After Effects. Another thing to note about saving your files when it comes to screens you plan to animate on, you need to have an external compositing and compositing tags turned on. That screen would then have a null that would be used in After Effects to help parent your composition to. It’s a bit complicated but this tutorial really helped me understand how it works. I also saved my files as .exr files. This makes the file light and easy to render in After Effects. This is similar to saving your file as a png sequence. This was a huge help as I kept tweaking the animation until I was satisfied with the result. Imagine having to render a C4D file in After Effects. Yikes.
I did a similar thing with the calendar animation.
As soon as I was done with this part of the project I moved on to gathering screen assets for animation. There’s a helpful extension in After Effects called AEUX. It helps extract Figma and Sketch files to After Effects layers. It preserves the shapes, fonts, colours and format of your design. It saves you a lot of time and effort. I highly recommend it for every designer and motion designer out there.
As soon as all elements were ready, I created a rough draft animation and laid basic keyframes for each scene. I shared the result with the team and they gave their feedback. Thankfully, the changes that were made weren’t as much or as complicated so I made those changes and added final details with extra folly sounds to give the piece more effect.
Conclusion
One thing I took away from creating this motion piece is that I need to dive into more uncharted territory and this doesn’t mean just exploring different formats of animation but by allowing my imagination flow without worrying too much about the execution during the ideation stage. I’ll be sharing more as I continue on this journey. Hopefully this helps one motion designer who is struggling to get his ideas out.
If you want to talk to me about motion design, animation or illustration, you can hit me up on Twitter or Instagram.
Till next time, let’s keep things moving. ✌️
