Educational app from the scratch: UI, mascot, Rive animations

While working on the creation of this educational app, I took on a wide range of roles: UI/UX Designer, Mascot Character Creator, Vector Artist, Character Animator, UI Elements Animator, and Consultant for app development, gamification, and monetization.

I'm incredibly proud of the final result and sincerely hope this app helps students of all ages learn to play the piano and make steady, enjoyable progress.

The creative process began with designing the main character - a cute, chubby galago. Once he came to life, the next step was to build a world that would suit him perfectly.

To make learning more engaging, I incorporated gamified elements into the app.

As rewards and in-app currency, users collect the character’s favourite items: juicy apples and sweet orchid nectar (valuable treasures in his little world).

To make the learning experience more immersive, I designed a virtual journey where users travel alongside their virtual assistant.

I illustrated 50 iconic landmarks from around the world and placed them on an interactive travel map.

As part of the adventure, students can also visit various themed buildings: such as a music store, post office, library, and travel agency. Each building has three distinct color variations to keep the visual experience dynamic and engaging.

The app includes seven categories of lessons (e.g., Music Theory, Rhythm, Improvisation), each offering 15 diverse activity types.

These include playing a melody by ear, selecting the correct answer from multiple choices, or performing a musical piece (all guided by the galago character).

To bring the galago to life, I used Rive state machine to animate a range of expressive reactions: he can be cheerful or sad, jump with excitement, dance, sing, talk, and listen attentively. In their user profiles, students can choose from a selection of animated animal avatars, each with customizable clothing colors and backgrounds.

I also created micro-animations for various UI elements, as well as animations for the splash screen and onboarding experience, enhancing the app’s overall interactivity and visual appeal.

I created all vector graphics using the Sketch app, which I also used to design the user interface screens for the app.

All animations were created in Rive, allowing for smooth, interactive character and UI animations.