Preply App Animations

Role
Motion Designer · Concepting · Animation

Tools
After Effects · LottieFiles

The Preply app animations are a series of illustrated Lottie files designed to make the app experience more engaging and dynamic, with the goal of keeping the user engaged throughout it. These animations play a key role in the Matcher Flow project, where users are guided through a series of interactive questions to find the best tutor for their needs. The animations not only add visual appeal but also provide subtle cues that enhance the user journey, making the questions friendly and intuitive.

To maintain consistency and usability, all animations follow a structured set of rules inspired by best practices from design systems like Apple, Microsoft, and Google. Single animations are limited to 1000ms to ensure quick, responsive interactions, while sequential animations (such as a table moving before an apple falls) are capped at 1800ms, with a guideline to use no more than two sequential steps for conciseness. If additional interactions occur within the same illustration, follow-up animations should be shorter, ranging between 300ms and 600ms, keeping transitions smooth and efficient.

The biggest challenge while animating was reworking the illustrations to make them animation-ready. Most of them weren’t originally designed with animation in mind, so I had to tweak them or work with our illustrators to make sure we had all the necessary pieces for smooth motion. But once that was sorted, animating them was a delight: seeing how motion design can positively impact user experience is always rewarding.