Making our emails pop, bang and whiz, with motion

At TotallyMoney, we're on a mission to help everyone move their finances forward.

With a live credit report and score, we're putting customers in control of their own data, for free. We help them understand complex financial information and provide customers with the tools they need to improve their eligibility and find their best borrowing options. And here's how we're using motion to help communicate our message better. 

We use motion in our email hero banners, and they play an important role in the customer experience.

They break down complex financial topics, making them easier to understand, providing context and signposts to relevant app features. Using both copy and design, the structure and content of the animated hero images help explain the topic. Recently these have included: balance transfer, Best Match, pre-approval, purchase cards and guaranteed rates, among many others.

Here you can see an overview of some of the icons:

Over the past few years we have developed a great set of motion icons for all types of messaging. This means we have a catalogue that we can choose from, or edit to better suit our needs. 

Occasionally there will be a need for a new icon to be added to the set, in which case we look through our existing icon set to see if there's anything we can animate. If not we'll gather inspiration from sources such as Dribble, searching for examples of the topic in icon form and then start a mood board in Figma. This helps us narrow down possible directions to explore, and helps shape the new icon to fit the messaging we are working with. The final versions are always made in illustrator, to help us fit them into set sizing and styling. 

The process can take several days depending on if we're developing one from scratch, reworking an existing, one or re-purposing an icon that has been already created and fits the messaging well.

Since joining I've helped TotallyMoney develop our style of motion design. We initially took inspiration from Disney’s 12 principles for animation, which are widely held as the cornerstone for great animation. You can have a look through all of the principles Disney uses here.

For our needs we focused on areas such as timing, exaggeration, and a story arc, taking the principles and further developing them to suit us. We create a sense of realism in our motion icons by creating a good balance between smooth simple motion and real-life actions. We also use the same principles for our social posts and adverts.

We see motion design as a great way to enhance our messages, and we’re excited to start making even greater use of it as we continue to develop our brand further.