Musicom: Making listening to music no longer an isolated activity.

Yushi Yuan
7 min readDec 14, 2020

--

Where the story began:

If I ask you what app, besides social media, you use the most often, what would be your answer? I asked myself this question when I started to think about what app to design for this class, and it turned out to be the music app. As smartphones began to take over the market, people no longer need to carry multiple devices for different purposes at once, their phones are now playing multiple roles. Today, one of the most common purposes of using phones is to play music anywhere people want through music apps.

Now, there are so many successful music apps in the market with numbers of users; however, as a three-year Spotify user and an Apple Music user for one month, I still feel there’s something missing in these big leading apps; therefore, I conducted an interview with five of my friends between the age of 20 to 25, asking them their impressions of music apps they’ve used to help me find the missing factors of these music apps.

Key takeaways from the interviews:

1. Users consider the capacity of the music base as the most important factor when selecting a music app, followed by the aesthetics of the UI, the price of the membership fees, and if the UI is self-explanatory enough.

2. Users are expecting to have more diversified music recommendations and to have the lyric function applies to every single song in the music base.

3. Users want to communicate with other users of this app.

With the interview results in hand, I then started to map out their user journey of using the mobile app to play music…

(revised) User Journey Map

Looking at the user journey map, I had some more observations:

1. Several users mentioned lacking connections with either their friends or other users in multiple stages.

2. Users expect to not only have music recommendations generated by the app but also to be able to see others’ reviews.

3. Users have trouble finding the music they want to listen to if they don’t know any text-based information about the songs.

What do others have?

In order to understand what the essential features of a music app are, I analyzed two dominant music apps in the market, Apple Music and Spotify, and a new emerging music app, YouTube Music. In addition, besides the music streaming apps, I also analyzed how Netflix organized its feeds page to see if there’s anything I could introduce to my app.

  • Apple Music
Apple Music “Listen Now” page
Apple Music “Browse” page
Apple Music “Search” page
  • Spotify
Spotify “Home” page
Spotify “Search” page
  • YouTube Music
YouTube Music “Home” page
YouTube Music “Explore” page
  • Netflix
Netflix “Home” page
Netflix “Streaming” page

After viewing all these different apps, I found all of them used vivid colors or images for the content they aimed to deliver to their users. I also noticed three of these apps used black color as their background colors, and I think the reason for that is to allow users to focus on the content itself more easily. In addition to what I mentioned, I found both Apple Music and Spotify had their categories on the search pages less organized which make it hard for users to find the one they wanted; however, YouTube Music divides all categories into different sections, make it much easier for users to browse, so I plan to integrate this feature into my app design.

Starting my own design…

After I have gathered the information I needed, I then started to create the flowchart for my app, it described the main actions users could take when using my app to play music.

User Task Flowchart

Sketching

In order to visualize some key ideas I had for my app, I sketched several main pages for my app with the key features highlighted.

Home page sketch
User Profile page sketch
Search page sketch

After finished all the sketches, I received feedback from classmates. They suggested me to amplify the idea of “making connections” and to present this idea more aggressively to the users, therefore when I started to do the wireframes, I considered this suggestion and wondered how could I make this differentiatior more struck out to users.

Wireframing

After receiving classmates’ feedback on the sketches I had, I decided to not have the independent Search page; instead, I putthe search bar on the top of the main page. Also, I create a “Friends” page to allowed users to track their friends’s activities. I wireframed three main pages of my app, these included the Homepage, the User Profile page, and the Friends page.

Home page wireframe
User Profile page wireframe

In the Design Critiques session we had in class, several classmates suggested me to include even more features on the home page to inform users the key differentiators of my app, they mentioned, even though the “Friends” page told them a little bit about the unique features of this music app, they were still confused if that’s the main idea I wanted to show to users. Also, they mentioned the sizes of some texts and icons I had were too small, it would make them hard to see and tap-on when they were presented on the phone. I changed the content for the Homepage regarding to the suggestions I have received. I moved the “New Releases” section to the “Made for You” page, and instead of having the title of “Hot tracks”, I changed it to “Your Friends Are Listening to…” to made it more clear to users. Also, I added the influential users to the home page, it not only tells users they are able to connect with other users, but also inform them the current trend along all users of the app.

(revised) Home page wireframe

I also expanded the artboard by wireframing several more pages, to illustrate functionality and flow.

(revised) Wireframing Artboard

Prototyping

While I was creating the prototype for this app, I forgot to create the side map to indicate how the main screens are connected. So, as I pan to make a site map before I started to revize the prototype I had, so I could see if there is anything I that doesn’t match. but before doing that, I found the User Task Flowchart I created previously does not describe the actual user activities accurately, so I revised that prior to creating the site map for my app.

(revised) User Task Flowchart
Musicom Site Map

After creating the Site Map, I revised the prototype by rearranged the connections between pages according to the changes I made on each page. The revised digital prototype can be accessed here.

Testing

Before the test the prototype with the potential users, I wrote a brief research plan to remind me of the research goals and questions, and it also set a standard to help me to identify who are my qualified users.

Research Plan

Key findings from the test:

Overall, all three users who participated in the usability test liked the design of this app, they agreed this app helped achieve their goal of building connections with other users and they were all willing to use it as their daily music streaming app if this app is introduced to the market.

I enjoyed the whole journey of designing the app, and I am happy that it meets user goals successfully. This is my first UX design case, although it is still not perfect, it aroused my interest in designing more products that provide a good user experience.

--

--