Information Architecture: Let’s improve music playing

Nowadays most people use their phone and music playing applications to listen to radio and music. Before it was CD stores and retail stores, but now all of that are accessible in a tiny little mobile application.

As such, music application has to organize its mass amount of data and contents in a way that is both user-efficient and aesthetic-pleasing. Throughout a UX course at UC San Diego, my team and I conducted user interviews, task analysis, competitive analysis, and wire framing to find the best design.

Design to Implementation

1. User Interviews

We want to get to know our users and see what matters to them.

  1. The “where” — the location
  2. The “when” — the time
  3. The “how” — what is it that they do.

For example, we interviewed Joe Doe, who used the music application to create playlist to walk to class. We found out the basic about Joe Doe — what application he preferred, did he buy CDs, and so forth.

Then we dig into the different scenario or situations he use the music application for. We asked him the steps and procedures he take to finish that scenario, while we look for possible improvements or problems.

By interviewing many users, we can get a spectrum of different scenarios, perspectives and user needs that can help us create a complete application.

Here’s a screenshot of a sample user scenario analysis

2.Task Analysis

As a team, we wanted to find out how different users perform different tasks on various music platforms. By walking through different scenario and seeing how users perform them, our group can evaluate what works the best and what does.

「Lesser artists borrow; great artists steal.」 Igor Stravinsky

We had users do a walkthrough of steps they execute to perform a scenario. We had subjects describe their actions by “thinking out loud”, which allows us to get in their minds and understand truly what kind of problems they have.

We took screenshots and videos of each step they took in the walkthrough so that we can compare it to other applications and see what can be improved.

Example of a step in a Walkthrough we conducted

We asked users to perform the same scenario in different music apps. (e.g. Apple Music, or Google Music or Soundcloud) to see how users approach the tasks differently.

3.Competitive Analysis

To have a better understanding of how different music applications operate, we conducted a competitive analysis in which we compare how informational architecture of different music applications.

As users who often have to find a specific song in a vast library of music and albums, information architecture creates the base on how users interact with the application.

As such, we focused on how different applications structured and organized their genres, albums, and songs. Since navigation are directly affected by information architecture as it main concern is the depiction of information, by analyzing the steps of navigation on different apps, we can see more kind of structure is essential for a user-friendly application.

By looking at how different application classify genre, non-genre, and etc., we saw what worked and what could be improved on.

A comparison of the same function page but on different music apps

4. Wire Framing

We then implemented two wireframes for two user scenarios: create playlist and delete a song from playlist. Using information gathered, we implemented the navigation as efficient as possible for both scenario. Based off user feedback, we designed the page as intuitive as possible.

An example wireframe of the genre page

All pages are clickable in the wireframe to show users our ideas of arranging information and present a new way to structure music application.

Navigation was essential in our design and was implemented as efficient as possible for both scenarios. We found that some music applications had way too many functions and unnecessary information. Thus, we implement our wireframe as simple and intuitive as possible. Our solution will also scale and will make not only the use of one playlist efficient, but many.

Here’s the links to the wireframes:

Create Playlist:

Delete Song:

Obstacles and Decisions

Based on the interview and analysis above, here a short list of the many obstacles we had and decision I helped made:

  1. One of the most common problem we encountered on the different music applications we tested is the unnecessary steps that need to be taken to go to the playlist. From our interviews and walkthroughs, we found that users often have to navigate at least 2–3 steps before they can access their playlists. By moving playlists to the Home page, we minimize the steps users have to take to finish a scenario.
  2. Another decision we have had to make is where to put the “add” icon for the create playlist. We want the arrangement to come nature to users as we found through interviews that users create playlists often and need to be able to smoothly do so. Through testing how we use an phone, we found that putting it on the left side is the most ergonomic for users.
  3. Unlike Spotify, we decide to display the genre the users are in at every single page, after they select it. Because a lot of times, in Spotify for example, if the users select a genre and go deeper into some album’s playlist, a lot of times they have no idea what genre they started with because there is no indicator. But in our app, once the users click Jazz, the red bar on the top will constantly maintain the name of the genre no matter how deeper into the specific genre they are in, so that the users are aware where they are.

Final Product

We gather information and data from users and compare different music applications against each other. Through the whole process, we have analyzed and found the best solutions we believe that would optimize user experience.

Here’s the final Invision wireframe that showcases our product: final product.

The project was fascinating and informative for me as it highlights the importance of information architecture. As a software developer, it will definitely affect how I arrange data and the way I implement navigation to take in account of it.