.png)
A music streaming app with the latest premium feature for new and existing users
Skills
Secondary research, Competitive analysis, Creating persona, User flow, Wireframing, Prototyping, Usability test, A/B Testing
Tools
Figma, Miro, Marvel
Timeline
3 weeks
Design Team
Solo UI/UX Designer
.png)
Discovery
-
Brief about BEATBOX
BEATBOX is a music streaming app for mobile platforms. It was launched 2 years ago and has had a very successful run so far. Right now the users can excess the unlimited music experience without paying a dime. (it's 100% free!)
Now as they have a healthy user base they want to launch the premium subscription to their new and existing users by giving them more advanced features that they haven't had in the app before.
2. Target
The users of this app are very tech-savvy, their cellphone is part of their body. (you can say that!) This type of App is a very important part of their lives because they use it more than 3 times a day. Age groups between 18-24 years and budget-friendly are the other two characteristics of the users.
3. Challenges
-
The existing signup flow does not have a call to action upon registration that gives the user the opportunity to subscribe.
-
The existing flow does not have prominent calls to action throughout the free experience that gives the user the opportunity — or a compelling reason — to subscribe.
-
Design certain premium features that not available for the freemium. Users will love and want to subscribe with monthly fee.
4. UX Process
Research
5. Secondary Research
The music industry has been evolving since Thomas Edison invented the phonograph in 1877, the 20th-century invention of Radio, television, electrical instruments, synthesizers, and most recently less than a decade ago via mp3, CDs, DVDs, etc. Now, the focus music industry is shifted toward innovation in the digital medium. As of 2019, the global market of the music industry was approximately $ 20 billion and is expected to grow at an average rate of 17-19% every year for the next 10 years (Grandview research, 2020) ¹.
4. UX Process
Streaming music accounted for 83% of total revenue generated by the music industry in the US alone (Statista research department, 2021) ². Thanks to Napster to first develop peer-to-peer file sharing and was followed by Apple a couple of years ago various platforms are available or becoming available such as Spotify, Apple, Google, Youtube, Pandora, etc., or radio streaming such as SiriusXM. All of these are available globally due to technological advancement. Most platforms earn their revenue via paid or premium subscribers, for instance, Spotify generates approximately 91% of revenue from their subscribers and the other 9% comes from advertising (Jones, K., 2019) ³. Likewise, apple; even though the user database may not be as wide as Spotify but can gain the loyalty of its customers by offering apple music.
Innovation is a key to sustainability, and digital music streaming is no different. The scope is endless, at least for the next decade. With globalization, advancement in technology, and the ability to offer multiple kinds of music from different cultures and in different languages is now easier than before. Now, the business is looking for ways to increase its customer base by increasing the ease of access and offering various mediums. For example, from iPod to Pods, or the introduction of audio sunglasses by the boss. Digital streaming such as live streaming or interaction with artists after live streaming could revolutionary step going forward. One can expect businesses to move forward towards developing either the medium of music; that is how one would listen such as using a phone, earbuds, pods, etc. (advancement via hardware/accessories/wearables) or in what form such as high definition, standard definition, etc. (advancement via quality). The extensive use of Artificial Intelligence (AI), is a forward step towards improving user experience, such as Alexa or Siri that plays music via simple voice command. Going forward one could enhance affinity towards live streaming if a fan could connect to their favorite artist directly an artist would play their favorite song per request; the user would be willing to pay thousands of dollars for that experience.
6. Competitive Analysis
Before starting any further I decided to look at what the tycoons of music streaming are giving to their customers? What attracts the users to pay for the premium subscription? What are the premium features and nonpremium features are in these big music streaming apps?
Below is a simple comparison between some of the most popular music streaming apps like Apple Music, tidal, youtube music, Spotify, and amazon music.
4. UX Process
Analyze
7. Persona
To create personas, I opened my research and ask myself what will be the pain points and gain points for one person who loves to listen to music. So, introducing Jane!
8. How Might We...?
-
How might we give all the information about the premium plans to our new and existing users?
-
How might we differentiate different premium plans' features with proper comparison to each other?
-
How might we improve the overall experience while the user is using the app?
-
How might we encourage users to subscribe to premium when they encountered any premium feature? (like download the music or unlimited skipping.)
-
How might we let users be in charge and don't overwhelm with loads of information?
Features for the premium subscription
After doing a bunch of research and gathering information about what will motivate the users to subscribe to premium, I have to decide what features to provide that differentiate from freemium to premium.
Features like Unlimited skipping, downloading the music, high quality of music, Advertising-free music experience, and access to unlimited songs will be common in all the premium plans. The only difference will be how many people (or devices) can gain the excess to that plan. How many months of free trial do they get and what different subscription fees.
Ideate
9. User flows
10. Style Guide
So many ideas about the logo, color palette, UI elements, and typography were swirling in my brain. I have 2 color palettes for this project so I decided to do A/B testing. I posted on Linkedin and got good responses.
After my mentor's suggestion I removed the icon from my logo and came up with this style guide for BEATBOX and I am very happy with the A/B Testing results.
User flow was the next step to decide which path the users will take to finish the task in this case subscribe to the premium.
Below are the two Scenarios for the user flow.
1st scenario: what if the user wants to change the music quality. where he/she will go?
2nd scenario: let's say users want to check out all the premium plans.
Design and Validate
11. Lo - Fidality wireframes
After creating main screens like onboarding, home screen, and premium plan pages on paper, I transferred them into digital wireframes.
12. Guerrilla Usability Testing
In order to make sure that my design solutions were user-friendly I gather 5 individuals who were between 20 to 35. They all have kin interest in music and use one of the major music apps like Spotify, Youtube Music, or Pandora daily.
Findings from Guerrilla Usability Testing
-
One of my testers mentioned that if I have standard streaming and download quality why would I go for low? So, removed the Low-quality streaming and download option, and placed standard and high quality for both Streaming and download.
.jpg)
.jpg)
After
Before
2. Search by lyrics was a premium feature. But my tester did not like that idea.
" Do I have to pay if I want to search for a song? That seems so unreasonable."- Mr. Hemant.
Most of the other apps are doing that for free so why do they pay for that in this app? So now it’s no more a premium feature.
3. Home bar has a home, search, library, likes, and premium options. But 5 out of 2 testers mentioned that it’s a bit crowded. Even they have difficulty understanding the library icon. So, I changed the place of the music library. Now it’s in the profile. All the home bar icons have titles now.
.jpg)
After
.jpg)
Before
.jpg)
Changed location of Music library
13. Hi- Fidelity Wireframe
After identifying critical function issues with the first round of usability tests, I collected all the insights to transfer the wireframe into pixel-perfect hi-fidelity mockups.
Below are some screens of my prototype and feel free to check out the link below.
14. Hi-fidelity Usability Test
The second round of usability tests was conducted, and again I select 5 participants. A brief explanation about the process and they were asked to finish certain tasks by clicking through the entire prototype. I observed them while they were testing BEATBOX. This is the link to the BEATBOX usability test script.
Findings of Usability Test
1. "Hide" Icon was confusing:
During the testing, all my 5 users didn’t get why the closed eye icon is there. When I ask them which icon according to you represents the hide action. 3 out of 5 suggested the minus(-) symbol. So, I made the change, and now this is the new icon to hide the song.
3. Profile:
There are a couple of changes I made in the "profile" after the usability test.
The one is the placement of “edit profile” as you can see it was in a hyperlink and the tester was not able to see it properly so now it’s down with other options.
The second was the display option. one of my testers suggested some times it’s good if they have the option to personalize the app. Music app, note app, calendar app, etc. these apps were constantly used sometimes more than 2 times. So it will be a much better experience if the user can be personalized by their preference.
BEFORE
AFTER
.png)
Some positive feedback from testers.
-
I would love if Spotify has this color scheme it's so cool.
-
My favorite thing was the premium plan page. All the information is well written and consistent.
-
In some apps, the promotion ad will keep popping up on the screen that really bugs me. But here it's not the case.
-
I am impressed, how the colors change when the next song comes.
One of the tester's usability Video
After two rounds of user tests, I found that most of my users unanimously found the premium features and their links to be subtle and unobtrusive. They were able to easily understand and compare the different tiers of premium subscriptions. Testing out the prototype has been proven to be very helpful.
15. Future of BEATBOX
BeatBox has been introduced as a simple platform for streaming music however, the opportunities for growth shouldn't be underrated. The platform has immense potential to introduce enhance features such as for premium members multi-color schema and display features that could be customized per user preference to suit their taste. Availability to connect premium users to live concerts of their choice domestic or internationally.
16. Conclusion
To conclude, BeatBox was made to provide a forte experience to music lovers. Simple design and ease of use were the core focus. I learned that the usability test was the cornerstone in shaping the design of this project. I believe opportunities to grow in near future exist immensely such as the addition of customizable displays, streaming live concerts, multi-language and cultural options to garner listeners from varied personas.
It was a great experience in designing this project and it gave me the confidence to utilize research findings, ideate design process, and usability testing to create BeatBox.
2. Premium Plans page:
Below is the first design, I created to show different premium plans.
According to my testers, the card feels smaller, so much information was crunched into one box, most of the premium features are the same in all the plans. So I knew that I have to come up with some other design idea for the premium page.
This is the new design for the premium plans. As you can see all the common premium features are now on top. The only difference in these plans is the cost to subscribe, how many people can use one plan, and free month/s after the user subscribes to a particular plan.