In the musical education of children, classical music has been broadly analyzed and heard. However, most part of the repertoire of different European popular songs are almost unknown by the target audience (children), despite the impact that it has on the culture of different folks.

The globalization, the migration from villages to the big cities and the loss of the context in which this music has been conceived, are factors that has made even more difficult to transmit this popular music. These factors are visible not only at a regional or national level, but in most part of the Europe.

This project aims to give a solution to this loss of our popular music (and therefore our cultural heritage) by transmitting the musical knowledge of our rural areas to the new generations. Therefore, the main objective is to bring closer the audience (in particular, infantile audience) and popular music.

Currently, the application of new technologies are an innovative methodology that has improved the results of education in the schools. In particular, a new way to attract children's interest is by proposing interactive games through the use of electronic devices.

In order to satisfy this need, the final concept of this project resulted in a web application full of interactive content embedded in four different games.

As this project was developed with the need for frequent usability testing in mind, we adopted the Design Thinking Process since it allowed us to iterate through the various stages with flexibility.

Research

Since we already knew in advance who our target audience was and what kind of technology to develop, we began to draw from research articles on the topic of design for children, colors and typography, the cognitive and physical skills that they have at certain ages and also topics related to musical notation.

Competitive Analysis

The competition analysis was a very important factor as it helped us to understand the techniques that are actually used in real life projects. One of our biggest references was the Chrome Music Lab.

Brainstorming Sessions on Paper

Personally, I think there is nothing like a good brainstorm session on paper! In the early stages of this project we had a few weeks to observe, think, discuss, understand and create our points of view.

Most of the important decisions were taken at this stage and, although a lot has changed as the project has developed, I find this kind of exercise very enriching on a personal level. Here, more than ever, I realised how important it is to work as a team and keep our goals aligned.

Sitemap

As decisions were made we started to build our sitemap with the aim of defining the taxonomy of our application. Since the developed application was getting a bit complex as the tests performed were reflected in the need to add or remove more features, our sitemap has started to become more complete.

Hence, whenever we met with our mentors this was essential to discuss the mapping of the application and features to introduce or remove.

Wireframes

Throughout the development of this project several wireframes were made according to the feedback received. As the amount of them is high, I suggest you to access the Figma document where you can see most of the design process.

You can access the FIGMA FILE HERE.

Style Guide

Although this prototype does not present the final design elements, its flow consists of the one that was adopted.

Due to the lack of time and the need for successive iterations during the design process, we decided that we would use this prototype for usability test in a more intial fase and as we perfomed those the changes would be applied in the application itself (already implemented) and the following tests would be made in the application itself and not in a prototype.

We have conducted several usability tests and, with the help of our partners at the University of Salamanca and University of Padua, they have also carried out several tests and provided us with the results.

Our testing focused on whether children could complete a set of tasks. Overall, the feedback was always positive and the children were very cooperative and honest. They were always asked for their final opinion, specifically what details they would change and how they would change them.

Web Application

The final result is online! 🎉
You can try it yourself through the following button:

This was my first-ever big UX/UI project! 🎉.
I am immensely grateful to have been through an entire design process so I could see what it is actually like. I won't deny that this project was really demanding. I learned a lot and, on that note, there are some things that I personally would do differently next time:

📱 Technological Maturity: Children today are much more connected to technologies than what we thought and what we discovered in the research phase. Therefore, I think it would have been a better approach if we had conducted a set of interviews and done a field analysis of children's behaviour nowadays during the Empathize fase.

🎨 Design: If I could redo this project, there are some design choices I would rethink. The overall design of the application has changed throughout the project, which demonstrates learning and development. I feel that I would do something better today and that is, in my opinion, a sign of evolution.

🧠 We are not failing: We didn't fail - we just discovered a hundred ways that did not work. I am grateful that I requested for input from my peers and our mentors on a regular basis because it has helped me identify errors in our UI and find more fundamental UX issues in our project. In the end, we worked hard to create the finest web application we could, and I didn't let my personal thinking prevent me from considering whether or not my own choices were genuinely the best for the user.