React Native Highly-Animated Music Learning Mobile App

The development path of all-rounder music learning app with 3-directed, 12-branched tree of Talents that gives the users an opportunity to unlock the unique music learning program and encourages them to become more engaged in the music theory learning process and weekly competitions.

Lena, Project Manager

PRIMARY PURPOSE

From the very beginning, the main goal for our team was to create a free-to-play music essentials learning app, that will turn the complex process of learning such a deep and multilateral discipline as solfeggio in the game process to facilitate the acquaintance with music for students of any age. We also created an application without any focus on the specific instrument, so that any performer could use it as a separate or additional learning tool. To maintain the game mood of the learning process, it was necessary to implement all kinds of animations, while creating an application based on React Native technology, which usually does not support such a content.

Technology stack used:

SYSTEM STRUCTURE

Web admin panel
Mobile app (IOS & Android)

SERVICES

Backend development
Front end development
Product design
Project management
QA

INDUSTRY

Education

TIMELINE

2+ years

Team composition:

Lena, Project Manager

Ilia, Software Engineer

Alexandr, Software Engineer

Shurik, Software Engineer

Pavel, Software Engineer

Daria, QA Team Lead

Anna, UX/UI Designer

CHALLENGES WE FACED WITH

The core task and difficulty for our development team was to construct the React Native mobile application that includes a big variety of complex and smooth animations.
One of the biggest and most complex tasks we had - creating a large and complex database of exercises, connected to the web-based administration panel for adding and moderating lessons in a convenient, universal builder.
The custom analysis of the admin panel was needed with integration of all analytic channels, which required a separate cycle in the development process.
For covering all the required types of music learning experience for forming more complex learning processes, we decided to include the universal exercise builder into our web admin panel. With this builder, admins can add a new one or edit the existing exercises without the need for developer involvement.
After the core development processes have been finished, we launched the custom A and B test cycles to understand which training practices have the best impact on learning experience.

Design

Anna, UX/UI Designer

Colours

Typography

Anna, UX/UI Designer

THE STRUCTURE OF OUR MUSIC LEARNING EXPERIENCE

To structure the exercises’ solving process and users’ progress tracking, we decided to use one of the most popular ways to group levels by difficulty and theme - units.
Each unit has 20 to 40 lessons in 10 exercises, ranging from the simplest to the most difficult. The further in learning music the user goes, the more difficult exercises become.
After testing our music learning application on a real audience, we formed 9 types of exercises that focus on the development of different aspects of musical perception and knowledge of the user (for example, ear training, theory of notes, rhythm training, melodies recognition, etc.). For the user’s convenience, in the top right corner of each exercise, you can find a hint on how to work with each type of exercise.

Here are the types of exercises user will face with:

Shift Notes - Dragging and dropping the images of the notes to the proper position on the keyboard.
Connect Elements - Connect the note names with their different representations.
Select Elements - Find all the possible representations of the particular note.
Note Sequence - Recreate the music you heard on the staff.
Q&A - Select the right answer on the music theory questions.
Play Notes - Practice in the note recognition by playing them on keyboard.
Play On Speed - Play the falling notes before they touch the staff lines.
Metrorhythm - Practice in the taping the rhythm along with the metronome.
Play A Melody - Play the famous melody on the keyboard following the running staff.

CORE SOLUTION: TALENT TREE

The Talent Tree section includes 3 directions that contain Talents. Within each direction, Talents are arranged in order from least valuable to most valuable, so that the user is motivated to develop the chosen branch of the Talent Tree.

Each level implies a certain set of Talents that are available to a user for application. Thus, when a user moves to the next level, a previously unavailable set of Talents is opened in the Talent Tree section. The first 4 levels imply the opening of the basic mobile app features:

1 Level – Learning Path
2 Level – Leaderboard
3 Level – Daily goals or Invite a friend

LEARNING PATH

The structured route of mastering theoretical and practical music skills. The learning path is consists from the units with lessons on the various topics to learn.
The Learning Path section is available from the very first moment. When the user signed in the mobile app for the first time, the system redirects them after onboarding questionnaire to the Learning Path section, so users can start their music learning journey to reach the Talent Points.

LEADERBOARD

A scoreboard of the leading competitors in Weekly Championships between different users. To attend the Championship, the user has to open this branch of the tree using the Talent Point. After opening it, user can compete with others by solving the exercises from the Learning Path and reaching XP.

DAILY GOALS

This Talent allows users to earn more target points for a day that motivate to study harder and give extra 20 XP. Goals are aim to keep users in courage in learning new units and add a little “game” moment during the hard path of music theory education.

INVITE A FRIEND

Opening this function allows inviting friends and expand your team to share Talents and study together. Adding friend is available by the unique sharing link. Each user can see the different details of friends’ progress (avatar, level, name, League, streak). Also, added friends’ avatars are shown next to the level at which they currently are.

TRAINING CENTER

This Talent opens the whole new section that consists from 4 (5 with the My Mistakes) subsections and allows users to train all exercise categories. In this section, users can do the ear or rhythm training, theory and notes learning, and play different melodies along with the example.

MY MISTAKES

This Talent is opening the new subsection in the Training Center section. Users can work on their mistakes regularly to fill in the gaps in the knowledge and be able to rework the hardly completed exercises.

TEMPORARY APPLIED

After reaching all the following talents, users can continue to earn the Talent Points and spend them for the temporary Talents, that are reusable after some time. Some of the temporary talents:

Streak save - it is activated automatically when the user is about to lose his streak (on the day when the streak is to reset);
Save League position - allows the user to be left in the current league in case when they shall be demoted to the lower league by the results of weekly leaderboard;
Restore your longest streak - implies the possibility to restore a user's longest streak ever;
XPx2 bonus 30 min - during the activity time (30 minutes) all receivable XP shall be multiplied by 2;
Send XPx2 - the user shall choose the friend to whom they want to send this buff;
XP +3% for each 100 streak of total friends - implies the calculation of the streak days only of the user’s friends;
and so on.

These buffs are designed to keep the user interested in progress, and also allows them to save or accelerate progress if there is no time for regular learning.