Character animation (Rive) and UI design for mobile/web app

LearnWatchGo (mobile and web versions) was created for young children and their parents to combine watching cartoons and children's videos on the Internet with exciting educational activities.

The app also gives parental control over public content available to the child.

My client, an app creator, wanted to redesign their app, improving usability and making it even more child-friendly.

They also needed to add a lot of Rive animations and helping to make the app more interactive. I was very happy to be involved in working on such a useful project that cares about the education and safety of young children.

The main character, Leo, already existed. However, he was created in raster form. Therefore, my task was to recreate it in vector format and prepare it for animation by doing the necessary rigging.

Also in certain animations I needed to work on lip-synchronisation of the character (for example, in the animation of teaching children the alphabet).

Modifying existing animations and creating new ones required careful work on the storyboard, as well as creating additional vector objects.

In addition, it was necessary to create animated interface elements such as buttons and progress bar in such a way that working with the application looked like a game.

Since at the time I joined the project the application already existed and was actively used, it was extremely important to keep the general style of its previous version. In the text below I describe the process of working on the project, demonstrate the animations created and examples of the user interface.

Working on the creation of vector images and interface elements, I took into account the color scheme of the previous version of the application, as well as the lightness and airiness of the interface.

I added new colours with caution, using only simple and bright shades that harmonised well with the colours already existing in the application.

To work with vector objects and create the UI layout, I used the Sketch app.

For Leo, I created fun animations that clearly conveyed the idea that needed to be illustrated.

Most of these animations are implemented through the Rive state machine, as I needed to use multiple animation layers simultaneously to animate various objects in parallel. The Rive state machine is also an indispensable tool when creating interactive animations using listeners.

When creating the alphabet singing animation, I explored variations in the position of the speaker's lips to pronounce various sounds and created an animation of Leo's lips synchronising with the sung letters of the alphabet.

I also created animated interactive buttons for the app with reactions to the Hover and Pressed events. I animated not only "pressing the button", but even created small animations such as the flight of a paper airplane or the sparkling of a star. I illustrated the process of completing the learning tasks with an animated progress bar and a counter of the number of correct and incorrect answers.

I'm very proud of the work done and I sincerely hope that LearnWatchGo will benefit a lot of children :)

Here is a link to my client's project: https://learnwatchgo.com/