Diskc
Music Media App Case Study
Brief : To encourage users to move from a freemium service to premium, I designed a music history experience to attract users interested in learning more about their favorite artists and songs.
About
A media company already has a successful free mobile app that provides music listening, but they want to find ways to offer a fresh premium model to their new, and existing users.
Problem:
There is an abundance of music streaming services that have the same model with differing benefits. A freemium model would need to have all the features of its competitors, and a unique premium model.
1. Even with large music companies, there are significant limitations in their freemium models. (Youtube has interrupting ads, Spotify only allows shuffle feature)
2. Music Apps have a similar premium model (unlimited listens, artist concerts and offerings)
Goal:
1. Design a unique music listening experience.
2. Make freemium fun and insightful; ultimately encouraging users to move to premium.
Design Process:
My design process was as followed:
Empathize ➤ Define/Ideate ➤ Prototype/Test
My Role:
UX and UI Designer
Research
I created a research plan that would allow me a total of 90 hours to move through the cycle of discover, design, and validate. The end goal is a High Fidelity Prototype.
Discover (Empathize)
Competitive Research
I started by analyzing three popular media streaming services, and identified pain points that I could address in my design.
These services have chosen their own unique ways to push premium with their users, but I spotted a few issues as listed above. Overall, they each have something I can take as inspiration.
After analyzing these services, I made a list of the things to include in my design that would improve the premium experience for the user:
Use color that is different from logo color to differentiate.
Make the subscription button the most obvious button in sign-in flow.
Make sure the less expensive options can still stand as good products without heavy limitations to maintain current user base.
Make in-app purchases fast and available to avoid frustration.
Must have an easy mobile premium process.
Use positive wording like “upgrade” to indicate the best premium experience.
What could a mobile music app look and act like if it must be familiar to music streaming listeners, yet stand out as new product? It’s challenging to avoid copying the design of successful apps, while still being a comfortable switch to users.
Exploring Personas
To dive deeper into the user’s wants and needs, I illustrated two personas that embody the demographic using the app currently. This demographic information was provided by the company before beginning the project. This helped to identify realistic scenarios when using a premium product.
Just by looking at the provided data, I could see a distinction between the kinds of people using music streaming services. I defined these differences as music habits, buying habits, and their favorite music tools.
Savanna is a young adult who personalizes her music experience based on where she is and who she's with. Her music listening is socially driven.
Trevor’s loves to learn about the music he likes, and considers music listening one of his top hobbies. He also reserves part of his income to feed his hobby.
The most obvious differences to these two Personas are how and why they listen to music, but they are both spending a high volume of their “music spending” on streaming services and mobile listening.
With these findings in mind, How Might We…
Help users have unique music experiences through our platform?
Prove to users that a premium product is worth paying for?
Make our media service unique from other competitiors?
Design (Ideate)
User Flow
I then created a user flow that represents how a user would move through one route (free) and another route (premium). The free route would also show the premium features as a preview to entice users.
On the left, the red route shows a regular sign-in flow that takes the user through the homepage of curated music. The User has the choice of searching artists and songs, or using the curated suggestions to play songs on shuffle. Since this route is free for users, it limits their capabilities by shuffle play and premium ads.
Meanwhile, the premium route, which can be made through the sign-in flow and the premium tab, has the same capabilities as the free version, but with the option of non-restricted play and no ads. There is also an added bonus feature listening to curated playlists of the music that inspired your favorite artists, with interviews from artists. This gives fans of certain artists the ability to learn more about their artists and what inspired them.
The red route on the left is a typical expectation of a free music media service, which will appeal to most music streaming listeners. The other red route, on the other hand, has potential to appeal to users who want to learn more about their music.
Wireframes
I created a base set of low fidelity wireframes to show these two red routes, and then brought them into the first round of user testing. My goal was to place “Premium” suggestions into the flow as many times as possible, without overwhelming the user.
Creating low fidelity sketches is one of my favorite parts of the design process. The drawing in black were my very first attempt at showing the app’s flow. I like to change my color when I start making adjustments to the first draft. This helps me articulate to stakeholders why I made the changes, and show that I am not afraid of showing my honest mistakes and iterations.
When working on static UI, I want to make sure that I articulate the most important information users want to see (artist profiles, listening while browsing). The biggest challenge in this stage is conceptualizing the premium feature. On the bottom right screen, I added an extra screen to explain to users how this premium feature works.
Ideate (Test)
User Testing
Time to test! Since I had to test during COVID 19, I decided to conduct with 10 users in 30 minute remote interview sessions. User testing was conducted on the first greyscale wireframe, then a second time on the high fidelity wireframe.
Going into user tests, I wanted to avoid any bias while showing the screens to users. I omitted images in order to avoid copyright, and also to avoid UI bias when seeing an artist they know.
Ironically, this was a huge learning moment for me because of that decision. Besides adding a description and follow feature, the biggest barrier in the first round fo testing was the lack of images. The users I tested on all articulated that without images, it was pretty challenging to understand what they were looking at. When the second round came, I filled the empty spaces with “imaginary" artists and songs, and it changed the user’s perspective greatly.
Summary
In the second round of testings, the comments from users were directed at the premium features. This was expected since this is the most unfamiliar aspect of my design. I didn’t have anything to draw inspiration! After finishing my second round of testing, the challenge would be to create something fresh and easy-to-understand in the premium feature.
I summarized the findings in a few bullet points:
More details for each page
Improve Sign-up/Premium hierarchy: Make sure the user doesn’t feel pushed to decide on premium.
Make the Premium experience more obvious and clear to the user through walkthroughs and descriptions.
Adding the images of artists and albums will make the experience more clear to the user.
Moving Forward
Seeing how users responded to both a greyscale wireframe and high fidelity wireframe, I saw many trends where users were confused by the design. Also, users were intrigued by the Premium offer, but wanted to have a detailed walkthrough while on the app.
New Challenges:
How can I make a visual distinction between free and premium?
How can I make more in-depth personal profiles and customization?
How can we make sure every screen has a way to go back to the home page?
Possible Solutions:
Make a customizable profile page with playlists
Show pop-up ads, and a bottom navigation icon to show premium.
Simplify the IA, but make sure the user always knows where they are in the app.
High Fidelity
In the final iteration of the high fidelity screens, many changes were made and the IA was adjusted to promote premium in a better way.
The final high fidelity prototype included screens with personalized profile functions, the ability to view artist “backstories,” and listen to music in a sleek, predictable interface. And of course, joining premium.