Frequency - Media Player Application
Introduction
When you think of music apps, what do you think of? The fantastic interface of Spotify? The amazing discovery of Pandora? What about the vast creators of SoundCloud? I thought about every part of these applications and wanted to combine them in a way to make the ultimate media player. But I couldn’t just make an application that is a combination of the best parts of different apps. I needed something that could help my app stand out from the rest of the crowd. But before I reveal what that feature is, let's start from the beginning.
Discovery Phase
For our final project at Thinkful, just before graduation, we were given the opportunity to choose any application we wanted to work on and lay out our own scope. For my final project, I decided to work on a Media Player application. Before I began with my project, I started doing research on what makes a media player good. I began this journey by only using one media player for an entire day and recording my experiences. Here is how it went:
Competitive Analysis
I began with Spotify, one of my personal favorites. I have used Spotify for more than 2 years and pay for the subscription plan for ad-free listening. While using Spotify for a full day, taking note of its many features and interface, I believe Spotify is the best media player available to users. Its interface is easy to understand and use. Not only is the interface easy to use, but the music selection is phenomenal. Nearly all songs that I want to listen to are on Spotify. However, finding new music is a little difficult. Spotify does have “Weekly Discoveries” but they are limited to only a week and have a couple of dozen songs that can be blown through within a few hours. In addition to that, Spotify only shines when the user pays for a subscription plan that removes ads, uses unlimited skips, and more.
My next application was Pandora, a radio app that uses your music tastes that you already have and expand on them. Pandora has helped me personally find artists and songs that I never knew I would enjoy all from a like or dislike while listening. While doing research online about Pandora, I found a CNN article written in 2018 about what was going on with Pandora at the time. According to the article, Pandora has been falling behind the competition by not allowing a subscription plan to remove ads. After adding this feature, many of its users moved to other applications like Spotify or Apple Music.
My final application was SoundCloud and its growth of younger/newer artists. I spent a lot of my time listening to my friend’s music that he has posted on SoundCloud. While listening to this, I felt very trapped in what I was listening to and felt that I could not explore different songs without encountering a complete flop. It seems that listening to SoundCloud is more of something you would do in your free time, rather than listening to something in the background while you do stuff. However, I feel that having a platform where people can post their own music is needed in a time like this.
Survey
While doing my competitive analysis, I sent out a survey with numerous questions asking participants what their favorite media player was, what their least favorite media player is, why and why not, and other questions that would help me along with the project. I found that 56.5% (12 participants) of people’s favorite media player was Spotify and not a single person out of the 23 participants answered Pandora as their favorite. Out of the 12 people that answered Spotify, 50% of those individuals said that Pandora was their least favorite application. When asked why, they stated “too many ads” they also stated, “I have never seen a soul pay for pandora. Every time I hear someone put Pandora on the aux the worst music comes on and the absolute most annoying advertisements play in between every song.” After my survey was complete and I got all the answers I needed, I asked myself “why do people hate Pandora so much?”
In 2018, CNN posted an article about why Pandora was falling off the map. In an article titled “What happened to Pandora?” Jill Disis writes about the downfall of Pandora, yet how successful it was in the past. Disis states that there are still 75 million users that still use the free, ad-supported platform. While looking into why they do not pay, I found that there are not a ton of features that make up for the price. Mainly it is just ad-free listening and unlimited skips. Gene Munster, a tech analyst, and managing partner at Loup Ventures states, “When Pandora was just ramping, it was thought that radio was the future of how most people wanted to interact with music. And what Spotify did was add controls and sharing playlists, and they just missed that.” In short, Pandora was too forward with their business plan and did not pay enough attention to the competition. As a result, they fell behind and could not keep up which eventually led to their downfall. While still having listeners, they could have had much more.
Personas and Empathy Maps
After my research was complete, it was time to start diving into the deliverables that will help me develop my project. I created two personas to help me gain an insight into a client’s needs and wants as well as their pain points or hesitations. Out of both of them, I used my friend Ben Wallick, a Freelance Twitter Artist. He uses music to help give him energy, inspiration, and motivation to complete his work. He listens to music at least 70% of the day. So using him as a client for this project is perfect. Below are the personas and empathy maps I used in this project.
Define Phase
It’s in the Define phase where I really began my work on my project. I wanted to focus on how I can harness the feel of Spotify’s interface and reflect it in my sketches, sitemaps, and user flows.
Sketches
Within my sketches, I wanted to reflect the way Spotify’s interface felt. I played around with the layout of playlists so the user has quick access to them as soon as they open the app. I also wanted to include the radio feature on the homepage, almost in the center of the home page. It was here where I thought about the “car mode” feature and what that can entail. When I thought about this, I expanded my scope and included it. In the future of my project, this would become my main focus.
Site Maps, User Flows, and Branding
From my sketches, I started making sitemaps and user flows. This would help me build the architecture for my application. I also began to think about branding and how I wanted my app to appear. I used a lot of inspiration on how other applications represent themselves by being simple. The word “Frequency” came to mind and felt that it worked for the vibe of the application. Because of the name, I wanted to implement frequency waves within my logo. To change the application to make it stand out more, I created the letter “f” within the logo so it can be recognized on its own. These are very straightforward but ultimately would help me tremendously throughout my development phase. From there, they also helped me make the low-fidelity wireframes which I also included below.
Develop Phase
High Fidelity Prototype
After crafting my low fidelity prototype, it was time to begin my high fidelity prototype. My low fidelity did not have as many frames as my high fidelity would, simply because of certain interactions that have small changes. For this part of my project, I had to start thinking about how “car mode” really worked within my app. While using Spotify over the past few years, I had always struggled to add a song to my queue solely because of the small buttons that required a lot of accuracy. But since my eyes were not focused on the app, but on the road, I could not add to my queue without misclicking. For my app, “car mode” will be just a single button press to activate. Once you have this activated, the search bar will go from text searching to voice searching, where it will respond to voice activation. Also, once the user selects a song, all they have to do is tap the song anywhere as if they were playing it immediately. This will add it to their queue. Although this is not a truly safer alternative while driving, it limits the number of clicks a user has to make and increases the touch boxes by a significant amount, making them easier to click.
Here is the link to my prototype if you would like to play around with it!
My low fidelity prototype with about 5 frames. Towards the end of my prototype, I had about 18 frames just for smaller changes such as “added to queue” notifications or how the screen would look if car mode is activated or not. I think having different variations of each screen based on what setting the user had on was fun to design. Just looking at the screens with the slightest change can make the app so much more different and I enjoyed it.
I also plan on making a web application for this that can be used on the computer either in a website or an executable (window). For this, car mode will not be available. So, I included another feature that can be used for both mobile and web. This would be the Artist Portal where users can post their own custom music that will be able to be added to the same playlists as popular artists to make that “ultimate” playlist. This feature will also tell you how many users are listening to your content every month by showing returning users, new users, how many new playlists your song was added to, and how many shares. Also, once the user becomes popular enough, you will be shown what popular artists that you sound like.
Deliver Phase
Quantitative Testing
I started my usability test by using maze.co, a testing website that works very well with Figma. I sent this test to numerous friends, family, and colleagues to test my application. In turn, I got 11 testers to complete my test with 5 missions. Here are what tasks I had my testers complete:
Activate “Car Mode”
While in Car Mode, add a song to your queue
View your Artist Portal
View the Media Controls panel
Activate Car Mode and use the search bar to add a song by “Joji” in your queue
For the first mission, I had an 81.8% (9 participants) direct success rate. For my second mission, I had a 63.6% (7 participants) direct success rate, 27.3% (3 participants) indirect success rate, and a 9.1% (1 participant) Give-up/bounce rate. For the third mission, I had a 72.7% (8 participants) direct success rate, 9.1% (1 participant) indirect success rate, and an 18.2% (2 participants) give-up/bounce rate. For my fourth mission, I had a 63.6% (7 participants) direct success rate. Finally, for my fifth mission, I had a 72.7% (8 participants) direct success rate.
Overall, I am very happy about the test results. I’m glad those that used my app found the “car mode” to be easy and understandable and could add a song to their queue with little to no explanation. I would be lying if I said I was disappointed that there were some that gave up on the question. Maybe I could have been more clear on how to accomplish the goal without giving it completely away? But overall, I am happy that more than 50% have direct success and/or indirect success. This app could potentially be a learning curve for some while being compared to other apps, but not by a significant degree.
Qualitative Testing
While taking my test, a handful of users were telling me their thoughts on my application. The majority of testers mentioned how well the interface looked and how it was easy to use. I am glad they brought that up because a lot of my inspiration came from the Spotify interface. One tester also mentioned their concern for the “car mode,” saying it is not a safer alternative to normal usage and I completely agree. While driving, one should never take their eyes off the road. I designed “car mode” to be a setting one can use at a red light where time can be running short or you have a chance to take your eyes off the road for a minute or two. Something that makes driving in a car easier while enjoying your music. Without their feedback, I probably would not have felt as strongly about how users should use my application, which I am grateful for.
Conclusion
For my final project at Thinkful, I am happy I went with a Media Player app. This has been my biggest project so far, but from here I plan on making bigger projects with more interactions and features. The more projects I do, the better at UX/UI I feel I become and I am happy to have this project on my portfolio. I imagine that this will be one of my pride and joy for many years to come. If you, the reader, would like to interact with my application, here is the link!
