Motion design and logo animation

Understanding the

Background

idonate provides tools for both charities and fundraisers to help them raise vital funds. idonate operates primarily as an online fundraising platform, where users can create their own page to promote their fundraising event, allowing family and friends to donate directly to their chosen charities.

idonate also provides a number of SaaS products and hosted fundraising solutions, such as their Virtual Fundraising Events that became so important during the COVID-19 lockdown and an Online Raffle Creator. Idonate allows charities to collect fundraising revenue through the idonate platform or directly through their own websites also.

I was approached by the founders of idonate to help them to conduct a UX redesign of their web platform, which would also involve incorporating motion design and animation into the new designs.

I was also tasked with creating a new logo and brand identity for idonate, which also included creating some motion graphics to announce the brand refresh and main concept behind idonate.

iDonate

View related work for this project:

The part I played

My Role

Motion graphics

Animation

Illustration

I worked as the sole animator and motion graphics designer on this project. I identified the areas that would benefit from motion design as part of the UX research process. The visual design and animation style was conceived by and designed by me.

The logo animation, from the concept through to execution was completed by me as the sole animator and designer.

Motion graphics

Logo Animation

As part of the logo redesign process, I devised a simple solution to incorporate a logomark within the wordmark, which could also work as a standalone icon. Two overlapping circles signifying fundraisers and charities and a heart symbol where they come together: on idonate. This logomark replaced the “o” of idonate, and the new visual idendity of idonate was born.

To effectively communitcate the new brand identity to existing fundraisers and charities, while also producing interest from new customers, I decided to create a short animation of the logo, explaining the concept visually.

The animation was created using Adobe After Effects and was used by idonate in various social media outreach projects. 

Motion Design

Animated visual icons

It was discovered during user testing and depth interviews that joy, celebration and visual interest was greatly missing throughout the site.

This was especially the case during the process of creation of a new fundraising project. UX research showed the biggest pain points were around the cognitive overload involved in the complex process of creating a fundraiser.

To combat this issue, I created a number of animations to add visual interest and visual representation of each step of the process. These icons were created in Adobe Illustrator, imported to After Effects as shape layers, where they were animated. They were then exported to the Lottie format, using the Bodymovin’ plugin and integrated into the site as lightweight, efficient and effective animated graphics, helping to improve the overall user experience.