Learn Tab Motion

With the redesigned UX of the main screen, there was a need for new UI elements, illustrations, and motion logic.

To increase user engagement and encourage lesson completion, I was tasked with creating a set of illustrations, animating them, and preparing motion documentation for the development team. I chose Lottie as the primary tool due to its compatibility with the product's existing code. As the LearnTab is a main homescreen of the app, I’ve put great effort in optimizing Lottie assets to ensure lightweight files and good performance even on low-tier Android devices.

For the developers hand-off I prepared a detailed specs that would include all the descriptions, choreography, durations and easing curves values.

Adopting a style of tech-inspired elements, I designed assets in three different states, considering both free and pro user journeys. My goal was for the motion to reinforce the sense of a journey, with elements activating along the way and culminating in the final element lighting up.

For modules exclusive to PRO users, I designed a state that evokes a sense of missing out, creating a new monetization point by highlighting the added value of the PRO experience.

And to ensure visibility and scalibility I prepared a dynamic library of assets tied to GitHub for swift versioning. All thanks to Lottie format versatility.