Music App Redesign

This project was a group assignment for my Cogs 187a (usability and information architecture) class at UC San Diego. Over the course of 3 weeks, our four man group performed interviews, usability testings, competitive analysis, which culminated in creating a prototype which redesigned two core functionalities for a music management application.

Our team used Amazon music, SoundCloud, Spotify, and YouTube music, and Apple music as reference points in our redesign. We wanted to create music management platform that not only introduced new mechanics that would improve usability, but also we wanted to make sure that our app would conform to certain norms set by industry leaders (The whole “Don’t fix what ain’t broke” idea). We set out to selectively redesign parts of a music management app.

Interviews
Our team interviewed primarily users in the college-age group. We first situated our users by asking them questions like:

- What music app do you primarily use?
- During what situations do you normally use the app?
- Do you use the free version? or the paid version?
- What types of things do you create playlists for?

This allowed us to get a sense of what type of user we were dealing with; the casual listener? the audiophile? the dj?

Usability Testing
After interviewing our users, we asked them to perform certain tasks on the app of their choice, like creating a specific playlist or sorting the songs in a playlist. Our goal was to find areas where the leading music apps do it wrong, so that during the redesign of the app, we could do it better. Through this stage, our team got a better understanding on some processes that had room for improvement.

Side note: Testing users was an eye-opening experience for our group. We discovered that everyone uses the apps in such diverse and different ways. Assuming user behavior is a dangerous game to play as designers.

After performing usability testing on other users, our team explored the available apps for ourselves to find ideas on core functionality that we could improve on. We wanted to see for ourselves what things we can and should keep during our redesign and what things we need to fix.

In addition, we analyzed the information architecture of Spotify, Amazon Music, and Apple Music. The purpose of this step was to compare how accessible certain categories were across the different music management platforms. We compared the number of steps the user had to make in order to get to a popular function like browse or search. Also, we wanted to know the different genres and moods that different apps had listed to see how each app would cater to the needs of different types of users.

At the conclusion of this stage, we found that these leading apps were inadequate at addressing two functionalities — adding songs to multiple playlists and deleting multiple songs from a playlist at once.

Our team decided to use UXpin to prototype our app as most of us had experience with the prototyping platform from previous coursework. We did a redesign on first, the process of creating a new playlist and adding songs to that playlist and second, deleting multiple songs from a playlist.

When creating a new playlist, the top music management apps require the user to go through the entire process of adding a a single song to a playlist, repeated over the number of desired playlists. In our redesign, we implemented a feature which quickly allows a user to add a song (or songs) to multiple playlists at once. When the user wants to add a song to more than one playlist, the user just needs to simply tap the number of playlists they want to add to. This takes out a lot of redundant work for the user making for a happier customer.

The next feature we redesigned was to allow the user to select multiple songs to delete at once. In the top music management apps, they require the user to click the three little dots next to a song name and delete the song one-by-one. Our redesign utilizes a select feature, similar to the one used in Apple’s Photos, to allow the user to select the songs they wish to delete, and delete them all in one go.

During the redesign of our app, we came across hard decisions regarding how we thought the interface should presented and behave. One of our team’s overarching themes during the redesign was to take away clutter from option menus to prevent user’s from being overwhelmed form the number of options. To paraphrase Steven Krug, its not necessarily about the number of clicks the user has to make, but how much effort it takes for the user to make that decision.

During decision made during our redesign was deciding how a user would differentiate between adding songs to their library (a list of all their saved songs) and adding songs to playlists. Typically, a song’s option menu will display both the “add to library” and “add to playlist” buttons, the latter bringing the user to a list of the user’s playlist. This method allows users very quick access to add a song to the library, but slower access to the playlist. On the other hand, consolidating the two options reduces confusion in the option menu, but the trade-off is that the ease of adding to the library is jeopardized. Our team debated which functionality made more sense, keeping in mind the frequency of which the user would use different parts of the feature. Ultimately, we concluded that an “add to …” would be an effective replacement to the “add to library” and “add to playlist” button as it makes more intuitive sense in terms of information architecture and it would also be combined with our multiple add functionality (talked about earlier in the prototype section).

Another difficult design decision we came across was the icons for rearranging songs in a playlist. ​On​ ​all​ ​the​ ​apps​ ​we​ ​tested,​ three​ parallel​ lines​​ would​ ​ ​appear​ to ​​the​ right​ ​of​ ​a​ song​ ​​when​ reordering​ ​​songs​ in​ a​ list.​ ​Pressing​ and​​ holding​ ​these​ three​​ ​lines​ ​would allow​ users​ to​ ​drag and​ place​ ​the​ song​ ​in​ ​the​ ​a particular order. However, our team was not satisfied with the icons that were used by convention across these apps. The three parallel lines do not give the user any information about what type of interaction is available. Though seemingly minor, we changed the icon of moving around songs to arrows that face opposite from each other, pointing up and down. This gives users more intuitive knowledge that songs can be adjusted in relation to one another. This was a tough, team decision because we had to decide between following convention, or changing it to something that makes more sense but may not be as well recognized.

This was my first experience on redesigning an app and I learned a lot about user testing/behavior, information architecture, and the process of ideating a redesign to implementing it. I have learned through this project that designing a great user interface takes the same care as developing one.

tl;dr I learned some things about usability while redesigning a music management app for my class.

Related posts:

Goodnight My Lady

Gavin did not make it every Friday to the after-work outing, but he started making it enough that Nichy missed him when he did not. She sat with Renee and Tyler in the booth. Renee grinned, Tyler’s… Read more

The Truth

The truth can set you free, but it can also cause you suffering. You gain more knowledge and wisdom but may also lose your peace of mind. But if you are dedicated to finding the truth, you must accept the possibility of this happening. Read more

What is Web Security?

Having a secure website is as vital to someone’s online presence as having a website host! The purpose of website security is to prevent these (or any) sorts of attacks. The security of the site… Read more