CONCEPT
Melomania is a music application which combines numerous features and options music lovers need, want and find entertaining. Firstly, it instantly provides users with information on songs, albums and artists due to a constantly updating huge database. Secondly, it allows to recognise music in a split second and store the information about it which one can reach anytime. Thirdly, Melomania contains social media aspects providing its users with a possibility to share their music tastes and passion with other people, follow them and communicate. Moreover, the application has an intelligent recommendation system, news content and stores the data about all the songs a user interacted with.
Neither a music player, nor a streaming service, our application doesn’t push people to change their ways of listening to music and abandon their favourite platforms. On the contrary, linking the applications our users are accustomed to is the way Melomania interacts with them via sending notifications on songs one is listening to for the first time, for example, and providing an instant switch between applications.
When Melomania is installed, the first step is to provide the application with the information about a user’s name/nickname, age, country, hobbies or interests and, of course, music preferences and tastes. The more information one provides, the better the application interacts with the user allowing him to enjoy more features, though, of course, no one is forced to reveal details one doesn’t want to share: even if there is no user data collected, the app still functions as a library, music search browser, social network and provides music recognition.
There are 8 options of the application’s menu bar which stand for the main features.
Melomania's concept was developed by my two TAMK classmates, Joni-Tatu Rannapiha and Annika Andersson, and me as the major task of User-Centered Design and User Interface and Usability courses.
Unless stated otherwise, all the presented visual elements were created by me based on the ideas my team and I came up with after we had done the desk study and research, held interviews, ideated, sketched and tested our paper prototype.
Persona
Moodboard
Storyboard
Draft versions of different features of the app and the logo
PROTOTYPE
I visualised the main or most challenging features my team and I came up with. Here are the cases I covered:
1. Getting notifications
User A has installed Melomania in order to instantly get information on his favourite or new (for him) artists and songs. A uses Apple Music as the primary platform to listen to songs. He has linked Apple Music to Melomania and allowed the latter to access Apple Music, collect data on music he listens to and send him notifications on songs and artists.
During the ideation and sketching stages I came up with the idea that the app could interact with users via notifications providing them with instant and effortless access to information and satisfying curiosity at once. Later I refined this idea by suggesting that as the app collects data on the songs a user has been listening to, they can receive notifications on songs they listen to for the first time only once in order to prevent annoyance.
When receiving a notification, a user can dismiss it, reveal it to read the whole text or press the banner to open Melomania and discover the song’s info page in the app.
My team and I considered “silent” or “vibrate” sound options when getting notifications to minimise distraction from music and thus displeasure.
2. Song's page
Melomania provides its users with instant access to information on music. Instead of a routine multistage task: leave music player, open browser, search for music and artists, open one website, open another one and so on, - it’s enough to stay still to let Melomania bring the data. In order to do that, the application must have a constantly
updated huge database with relevant and verified information.
To be more than sufficient, but a credible, entertaining, completely satisfying and unique source, we considered, firstly, attracting music communities and artists’ social networks management as a prime engine for providing reliable information, sharing news and staying up to date, and secondly, to obtain all possible aspects revealing information from biography and figures to fun facts, links to music videos, documentaries, books and more.
In the prototype I covered a number of actions possible on song’s page:
Revealing and reading paragraphs
- Allowing the application to access YouTube and thus opening music video
- Opening song in the linked music player and going back
- Starting to follow artist
- Going to another song’s page listed in suggestions
- Revealing the menu bar to move to another segment
The key point for me was easy and fast navigation. Consequently, I suggested instant switch between applications (to listen to a song which page is viewed) and all main options being at hand.
3. Artists
“Artist” is one of the eight menu bar icons leading to the page where all the followed artists or bands are listed. By following artists and bands users allow Melomania to inform them about upcoming tour dates, music or video releases, relevant news and send notifications with interesting facts related to artists when listening to their pieces of work.
In the beginning of the app development Annika sketched the artists’ page containing randomly arranged circles as shapes for icons. We all liked the idea, and later I used circles to shape the icons with pictures of artists and bands firstly in my moodboard and then in the prototype.
When discussing the most important features of our app within the “instant access”, I thought that as the main function of “Artists” is to notify users about anything related to the followed musicians, turning notifications on and off and (un)follow them should be at one-click access.
By pressing an artist’s icon or name user is redirected to this musician or the band’s section where one can read and look for information related to the band of any sorts.
Annika’s sketch evolving into digital version
4. Music recognition
Music recognition is one of the major options of our application which we considered from the beginning of the development.
An instant access to the information can be wanted any time and at any place. With melody recognition music lovers can satisfy their curiosity and avoid the song being lost if there’s no chance to ask people or read the description on the screen.
Shazam and SoundHound have been there for some time, but we wanted the music recognition function being improved by: 1) making it an instantly accessible part of the whole, not leaving it standing separately; 2) integrating more advanced mechanisms to recognise better; 3) allowing it to work on the background and store the obtained information in the application, so that it is possible to come back to “that song playing while we were sitting in the cafe” any time.
As a passionate music admirer, I have always wanted Shazam to be able to recognise more than what has been collected in its database and have been wondering whether it is possible for machines to distinguish notes as I can. When I was making the desk study for our application I found out that SoundHound can recognise tunes by analysing the recording of people humming the melody. This helped me define my idea: the recognition system is able to identify tunes and match findings with the melodies stored in the database. When the melody sequence is defined and has matched a certain piece in the database, there are two outcomes: 1) the audiotrack is identical to the stored data —> the output is the genuine song; 2) there are no matches with the recorded audiotrack —> what is playing is a life performance, rare version or cover, still the output provides users with the name of the song and artist.
We came up with the idea of recognition in the background when discussing possible ways to save time, minimise the number of actions and prevent users from the need to open the app and turn on the function every time they hear something they want to learn about. With the option to turn the recognition on and off at one click any instant, the app can recognise the music flow non-stop saving the data and optionally labeling it with the time when it was recognised and the place where the user was then.
We also collected some sophisticated suggestions like an integrated keyboard to play the tune instead of humming it (coming from me), but decided to put it off to concentrate on other important aspects of our application.
5. Your Songs
Your Songs” icon leads users to the location where all the songs they have been interacting with are stored. It includes all the “song-related” actions in the application, like search or recognise. As users have other music streaming applications linked, the data on songs played via them (Spotify, Apple Music) is collected and stored too.
Two viewing options are available: one for those keen on album covers and better at remembering pictures (on the right) and another (on the left) containing more data with smaller pictures. Besides basic details on songs, the latter layout allows to see how users interacted with the listed songs, when and where.
By pressing the search sign users reveal the stroke to enter something he or she is looking for. The list is formed chronologically starting with the latest songs being played, recognised or searched for.
6. Location tracking
I have briefly explained how and why location tracking is implemented when recognising music and collecting data on songs one has interacted with. It’s an optional feature, and if users don’t allow Melomania to access the location, location related matters won’t anyhow bother them.
Nevertheless, it is always better to give some examples to explain. Here are some scenes my team and I modelled during User-Centered Design course:
Joann Salt is driving a car (given to her by her parents) back home after a hard day at school. She is listening to music. Her phone is hooked into the car’s computer. She hears a really appealing song, but she doesn't know who the artist is or what the song is. The song is not displayed on the screen. After she arrives home and leaves her car, she can check the song/artist from the app which was running in the background, recognised the song and stored the information about it with the location and time. This way she has found a new song to listen to.
Rocky McQuire has dropped in a cafe to drink some latte. He hears a really appealing song there, but has no clue what the song is and who the artist is. He pulls out his phone, opens the app and turns on music recognition. Being in a rush he doesn’t have time to check the name of the song and goes to the dance class. There the music is channelled via the cd-player. His phone is still recognising and saving songs playing around. Later in the evening Rocky checks the list of recognised songs and as he provided Melomania with the access to his location, he now can easily find the song which was playing in the cage and then practise the moves of the dance on his own with the same songs due to the application.
To sink deeper, in the prototype I covered a feature allowing users to set locations as a certain place (home, gym, school…) to make tracking and search easier.
The idea of naming places came from Annika as we were discussing how we could improve the recommendation system with our application. She implied that besides suggesting playlists based on artists, genres, decades and other ordinary traits, we could make the system create playlists based on what a user usually listens to while cooking, in the gym or when going to school. This encouraged us to develop the idea of tracking the location and think of the cases why it would be useful and needed.
A place to arrange one’s preferences. As one of the app’s main features is connecting applications, we needed to think of ways to allow users to manage their linked applications and notifications easily.
Initially we considered having “Linked apps” icon on the menu bar as we imagined users getting tired of receiving notifications each time they launch Apple Music or YouTube, subsequently they would be glad to turn everything off at one click. Later we threw away this decision as it became obvious that there was no need in separating linking and unlinking applications from other setting parameters.
When creating the page I remembered our discussion about sound alerts and included the segment, as it is important to be able to arrange the sounds not to interrupt music or have the phone ringing or vibrating every 5 minutes.
When it comes to different setups for different applications, music players, if allowed, would:
- Permit access to information on songs, playlists, music player usage, history, recommendations and the whole library
- Let Melomania send notifications and collect data
- Let Melomania channel songs via the player
YouTube would permit the app to access it to watch music videos, documentaries or any other clips.
