Prior to joining Mogo Inc., there was a lack of illustrations as well as animations. There were only a handful of loader animations in product experience.

MoneyClass was a new section of the product that offers customers mini bite sized lessons on how to master their spending, credit score, loans, etc. These in-app features require animations to complement the content within each product MoneyClass. In addition, a series of onboarding animations were in the pipeline as well for MogoSpend.

Finance is a sensitive topic for many. I wanted to ensure the animations were playful with a sense of seriousness at the same time by using realistic movements and rhythm.

Complimenting the first illustration library, the first generation of animations evoked elegant and smooth transitions. Subtle and minimal animations were used to focus the viewer on the main objective of the paired content.

Motion 2.0

The rebrand of Mogo (MoneyUp campaign) took a turn for a more bold approach. The new direction was focused on empowering Canadians to master and take control of their finances. 

To mirror the new rebrand, the animation style was evolved into high-energy, punchy transitions with quicker tempo and beat. The various use of font weights and the stacked MoneyUp lockup allowed for fun and dynamic kinetic typography.

Motion was also used for marketing content, which included display ads, social media video ads, brand intiatives, and emails.

The animations are created in After Effects, and output into JSON via BodyMotion (Lottie). Because Lottie is constantly evolving, the process of creating these animations required iterations with the development team to hone in on the animations that work best across multiple browswer platforms.

One of the main challenges faced when creating these animations were communicating the complex content across in a simple, understandable manner.