© 2023 AARDesign. All rights reserved.
Designing an app to learn music trough gamification
Year: 2016
My role: UX/UI designer, illustrator and brand designer
Company: Melomaniac was the Final Project of my UX/UI and Graphical Design Master’s Degree, obtained in the Pontifical University of Salamanca.
Team: This project was a training project, so I worked mainly by myself, but was mentored and supported by the master’s director. I also performed some interviews with experts during the conception.
The aim of the Master’s degree final project was to create an application built on positive design and user centered design. Positive design is a term for design that has explicit focus on research and development of solutions that increase people’s subjective well-being, their happiness. User-centered design (UCD) is an iterative design process in which designers focus on the users and their needs in each phase of the design process.
Music is enormously powerful and benefitial for the human brain. Learning music impacts the development of both cerebral hemispheres (creative and logical), and it creates connections between them. In addition, it helps humans to understand and manage our own emotions making us feel happier.
Hereby, Melomaniac mision was to bring music closer to people, and to encourage musical education through gamification so anyone could get fundamental knowledge in music history and musical language, and have a good time along the way.
1. The discovery : research on benefits of learning music.
2. Exploration of referent applications related to gamified learning or music.
3. User reserarch : survey.
4. Product definition : creation of a Business Model Canvas and a Value Proposition Canvas, definition of the brand and creation of a brandbook.
5. The solution : Definition of the user journey and creation of the application wireframes and prototype.
6. User testing of the prototype.
During the discovery phase I consulted several studies and theories on the functionality of music and interviewed child and adolescent neuropsychologist, Nerea Grau Sologestoa, and Professor of music at the Pontifical University of Salamanca, Francisco José Álvarez García.
There are very different theories on music functionality. Authors like Schubert (2009) argue that the main function of music is the creation of pleasure in the listener and in the performer. Álvarez García understands music as an artistic expression. From her side, Grau Sologestoa argues that music also influences organic functions such as breathing, heart rate or digestion. Aesthetics studies the absolute experience of beauty and distinguishes functions of music such as associative and emotional activation, memory and mood.
The study of Münte, Altenmüller and Jäncke (2002), which looked at brain changes produced by musical stimuli, is one of the most interestings. The results of the experiments showed clear evidence of gray matter creation in those who practiced music, and interaction and connections between both cerebral hemispheres in those who performed musical practices that required bimanual coordination (piano, battery).
In the study carried out by Schäfer, Sedlmeier, Städler and Huron (2013), 3 consistent functional dimensions of music were detected: self-awareness, social relations and emotional and mental balance.
When researching about the benefits of playing, I found the studies of Benítez Murillo, who points out that the game is an activity that develops different capacities in the subject. It improves physical abilities, psychomotor coordination and motor skills. It promotes sensorial and mental development. It boosts affective capacities and promotes creativity and imagination.
According to Grau Sologestoa, the game also has a socializing character, it encourages cooperation between equality and respect for rules. When playing, the individual he discovers himself and experiments with his environment.
Videogames also bring many benefits. In addition to those offered by traditional games, videogames promote the acquisition of decision-making skills. With videogames, the player becomes, in a way, his own teacher, in the absence of external supervision, the individual operates autonomously to overcome obstacles and achieve their goals, becoming more independent and responsible.
When looking for referent applications such as music games or games for learning, I found 2 interesting examples in the market: Duolingo and SongPop2.
SongPop2 is a challenge based music quiz game. Being based on challenging other users, it has an essential social component. Users listen to five songs and they have to choose, among the options, the title or band. Although it includes different musical styles and also favors the contact of the user with the music, it does not provide knowledge regarding the history, the instruments or music theory, but still a reference on music quiz games.
Duolingo is an interactive language learning system. Through the game, users learn from the successes and mistakes that they themselves make. The game integrates questions of textual, graphic and sound content. Although its content is not musical, the method and form are clearly similar to what Melomaniac aspires to, which is why it is a very interesting reference.
Focusing on Duolingo’s product at that time, I identified the 3 main features the application offered: learn, friends and shop.
The first one was the game itself, a screen showing the different levels of learning, which unlock as you pass the previous ones. Each level included different lessons to complete in order to pass the level. Each lesson included questions of textual, graphic and sound content.
The friends feature offered the chance to connect with other users of the application and compete with them. And the shop offered different props such as the streak protector or lives.
In order to get familiar with the habits, desires and limitations of users in relation to music and the use of mobile games, a survey was carried out in wich 279 users took part. The age range of the survey was open, which would allow to analyze the reception and interest of the user on the topic.
The presence of participants under 10 years of age is practically non-existent, what is logical as the access to Internet at these ages is usually restricted by the parents. Without a doubt, the The most representative age range was 20 to 29 years, constituting the 41% of the participants. It was also surprising the participation of users over 40, being almost the 30% of the participants.
One of the unavoidable conclusions of the survey is that almost everyone likes music. Only 2% of those surveyed say they do not like it. 89% of people listen to music every day, and 9% listens to it at least once a week.
Only 30% of the participants had a musical education, but just the 20% of those surveyed denied having an interest in learning more about music. Therefore a great number of people would be interested in acquiring or continuing to acquire knowledge about music.
56% of the participants had games installed on their mobile phones and 29% of them had didactic or educational games. 49% of participants said they played on their mobile phones regularly, 31% played every week, and 22% daily.
In conclusion, Melomaniac could be well received by mobile gamers and even, because of the general and beneficial interest of the content of the application, could engage new players.
After gathering all the data and reflecting on it, it was time to start defining the product. What was the business model? What would be the product mission and vision? Who would be the product target users? What value are we offering to this users?
The best way to define it was using the Business Model Canvas and the Value Proposition Canvas.
The product would be a friendly and fun gamified music learning application for young-adults. It would also include a merchandising store as a way to obtain incomes to finance the product.
With all this I could work on the product brandbook. I designed the logo and defined its usage, and defined also the colors and the typography. I also created some graphic resources for the app such as artist characters, illustrations and merchandising.
The first version of Melomaniac would be a trivia game in which the user learns of their own successes and failures. The game would include 3 categories of learning: history, musical language and instruments. Each level, attached to one of the categories, would propose ten questions to answer, randomly chosen from an archive of questions for each level. To pass the level, the users would have to hit 50% of the questions. Once passed, the next level in the game would be unlocked.
The first step towards the solution was to create the user journey of the whole app. This would clarify the different user stories and therefore, the wireframes to be designed.
The next step was to create the wireframes for the different screens based on the brandbook guidelines, and usability and visual design principles. First I designed the welcome screen and the main 3 screens navigable via tabs: The game, Progress and Store.
Then I designed the layout for the question screens and the different variants for it: text questions, image questions and sound quesions. The different states of the questions screen also needed to be designed, not just the default state, but also the design for an answer selected and the design for the feedback once the answer is sent, either the answer is right or wrong. And of course, the introductory screen for the level and the feedback screen with the score at the end of the level.
All the screens in the purchase journey came next: the product details page, the purchase details page and the order confirmation screen.
Last I designed the wireframes for the login and the settings screens, very simple and to be improved in the next iteration.
To validate the user journey and the design for each screen, a user test was conducted. A prototype with 4 levels was prototyped in HYPE, as at the time it was the only prototyping tool that allowed audio media. Of course, being a prototype, it still had some contraints and some action wouldn’t be actually performed, for example, were not calculated.
Test users were given 3 tasks to perform:
Pass either leven 1, 2 or 3.
Pass level 83
Virtually purchase a product from the shop.
Users who participated in the test had different ages, genders and musical formation. In neither of the tasks no difficulty was observed. Both, the content and the interactive elements seemed intuitive to users.
The one thing to improve was the interaction with the question answer feedback screen. In most cases it was observed that the user clicked on the correction message instead of the button to continue to the next question. This made me rethink the interaction and make the whole screen touchable to continue.
In addition, positive aspects were observed. All the users completed the test seem to be having fun, they went happy when they got the answers sright and stung when they missed, and many danced or hummed to the sound tracks.
After testing the design with potential user, it could be concluded that, although of course there are improvements to be designed in the following iterations, the decisions made seem to be effective for this first version.
For future iterations several functionalities were already considered, such as improvements in the scoring and the progress visualization.
But the main feature to design in the second iteration would be the feature “Friends” which would respond to one of the basic principles of gamification, the social aspect of it. The feature would allow the users connect with other users of the app, share their progress and compete.
© 2023 AARDesign. All rights reserved.