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.

An isometric digital illustration in a design software workspace showing batteries, a capacitor, a circuit board, and a grid, all in wireframe style.

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

Illustration of three steps of different processes: Projects, Boosters, and Lessons. Each has three states: Locked, Current, and Completed, showing different colors and icons.

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.

A technical 3D wireframe drawing of cylindrical and square mechanical components arranged on a grid with labels indicating project statuses.

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.

Screenshot of a mobile app interface showing course progress and lesson modules for web development, including icons, progress bar, and illustrations of electronic components.

Screenshot of a GitHub repository containing various JSON files related to booster and lesson statuses, such as completed, current, locked, skipped, and inactive, organized by file names.

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.