Timeline
April 2021 - May 2021 (4 weeks)
My Role
UX Researcher / UX Designer / Visual Designer
Solo student project for Springboard UI/UX Bootcamp
Guided by mentor Earl Friedberg
PROBLEM
How to successfully monetize a freemium music streaming app
Mediaopedia’s business strategy was to first build a user base by offering a free product and then evolve the feature set so we could monetize on a premium (paid) product. At this point, the product has been well received and has a healthy user base of free users. We now need to design an experience that will allow users to subscribe and pay a monthly fee.
THE SOLUTION
A fully customizable Premium plan
Personalization
80% of consumers are more likely to make a purchase from a brand that provides personalized experiences*
Different price points cater to a wider audience of potential subscribers
Users can select only the features they want to pay for - unique and stands out from the competition
*according to Forbes Magazine
Upgrading is seamless
Enticing "call-to-action" upon registration
Non-invasive, compelling prompts within the free version of the app
Offering high value features & an extended 3 month FREE trial
Enticing visual design
Bright colors such as green, yellow and red - induce feelings of stimulation and excitement
Dark theme creates high contrast between the bright elements to direct user's attention
Large buttons arranged throughout the app that easily allow user's to upgrade to the Premium plan
COMPETITIVE ANALYSIS
How to compete against the Spotifys of the world
I analyzed three of the most successful media platforms in the industry to see how they implemented their Premium versions throughout their app. While they all offered high value features, I noticed that they all had pre-packaged plans. There was no way for users to tailor their plans specifically to their wants and needs. This then became my opportunity for the solution.
SKETCHES
After quickly sketching a few potential user flows to illustrate the steps our user would take to achieve this goal, I decided on the best end-to-end experience our user could have to motivate them to upgrade to the “Premium” (paid) product.
Sign Up User Flow
By adding an eye-catching prompt within this flow, we had a better chance of converting new users to the Premium plan.
Existing User Flow
By adding a few more prompts within this flow, and by providing something completely unique, we had a much more compelling reason for existing users to subscribe to the Premium plan.
INTERVIEWS & GUERILLA TESTING
It was time to consult the masses.
I found 5 participants who all fit within my target user demographics and asked them questions like:
Are there any features you would want in a premium version of a music streaming app?
Does a 3 month free trial make the idea of joining the premium version more enticing?
Is the ability to completely customize your premium experience something you find valuable and would use?
I also had them look over the screens in my low-fidelity designs to see if these designs needed tweaking. Two central usability issues came to light:
Navigation was not clear on how to get from the “song playing” screen to “song options” screen
Participants were confused about the price of each of the “Premium” features
Back to the drawing board! Or, maybe this time Figma.
VISUAL DESIGN
Style is everything here at Mediaopedia.
We make sure to align our colors, fonts, and UI elements closely with our brand attributes - bold, smart & exciting.
Our font family (Open Sans) is clear, bright and easy to read with any weight and size.
Our color palette focuses on many bright, bold and energetic colors to match our attributes, such as greens, yellows, & reds - with dark sophisticated backgrounds to create high contrast.
Our UI Elements are sleek, modern and bold. They are simple to understand and navigate.
HIGH FIDELITY DESIGNS - VERSION 1
With the feedback I received from my participants and our brand style in mind, I began to build out high fidelity versions of my sketches.
Here were a few of the key players:
THE PIVOT
As I was nearly done with my last prototype, ready for testing, I realized something.
I didn’t really give my participants options.
How could I know I chose the best solution if there was nothing to compare it to?
After a quick brain-storming session I came up with two alternate ideas in place of a customizable plan:
The Obvious One
Throw money at them! Money is quite the motivator, am I right?
As cliche as it is, we could experiment with giving away a $10
Amazon gift card to the first 100 users who joined Premium
The Outlandish One
Introduce a new cutting-edge technology in the music streaming
world that no one has ever seen yet. With Premium, users can
gain access to our state-of-the-art EDT (Emotion Detection
Technology) that can automatically play music based on their moods!
USABILITY TESTING
Let the competition begin!
I wrangled another five participants with the goal of testing:
Whether or not the Premium prompts were integrated well into both user flows
Which Premium idea enticed the majority to want to join a Premium subscription
I designed a screen for each of these alternatives, because I want THE BEST solution, and the only way to know what is the best is to have one idea win when there are multiple options on the table.
This was directly after my participant tried to download a song on the free version of the app. When she clicked the “Download” button, a pop-up came onto the screen prompting her to join Premium (as that is a Premium feature)
This was directly after my participant clicked on the “Song Menu” button to try and download the song.
USABILITY TESTING FEEDBACK & INSIGHTS
So, good news and bad news. I always like to start with the bad news because you can only go up from there!
Our user testing revealed some usability issues, some more critical than others.
Allow me to highlight the top 3 issues:
There was a lot of confusion about the “Song Menu” button on the “Playing Now” page
Participants didn’t know how to navigate out of the “Playing Now” page
A few participants were confused why there was no “name” text field or “password verification” on the “Sign Up” page
And now for the good news…
Ladies and gentlemen, we have a winner!
And the award for the most incentivizing Premium prompt screen goes to… (drumroll please)
The Completely Customizable Premium Plan!
FINAL ITERATIONS
The Befores and Afters
They say don’t seek validation from others, but I'm not going to lie, it feels pretty darn good!
Okay, so now that my design has been validated, let’s get those pesky usability and design issues sorted out.
I added a name and password verification text field to the “Sign up” page
I also added an eye icon so that users can check their passwords during account creation
I moved “Already have an account?” closer to the Sign in button, and I also enlarged that button for better visibility
I added a down arrow to the “Playing Now” page to allow users to minimize the song
I changed the “Song Menu” button to an “Options” button to provide more clarity
I changed the checkboxes to toggles for a more modern aesthetic
I changed the “Sign me up” button to say “Start Trial” and made the color a bright eye-catching green
I made the features text smaller and more centered
I added “fully customizable” in bright green to the prompt heading for clarity and visibility
I changed the “Start Trial” button to say “Customize Plan” for more clarity and changed the color to a bright eye-catching green
I changed the “Trial version” button to say “Start Trial” to keep consistency throughout the app
I changed the “Start Trial” button to a bright eye-catching green to increase visibility
I moved the “Continue” button a bit farther down the screen for aesthetic purposes
Feel free to check out my full prototype on Figma!
Or see it in action below:
CONCLUSION + LESSONS LEARNED
And that’s a wrap! Here’s what I’d do differently next time.
I had a lot of fun designing this project! Sure, I made some mistakes and had to course-correct a few times, but the messy journey makes for a better story anyway! I really enjoyed each phase of the UX process and how each step brought me closer to uncovering a successful solution. I learned so much from this experience that I will take with me through my future design endeavors, with the most important points being:
Setbacks make the design stronger - The design process is not this perfect linear structured experience. There are twists and turns, backtracking and redefining. Once I was able to recognize that, I was able to make my designs much stronger with more intention at every setback that came my way.
It takes a village - Even though this was a solo project of mine, there were so many people who attributed to its success. My participants, my peers & my mentor challenged me through every phase of the process, and because of that I was truly able to get the best solution.
Keep it simple - There were many times where I felt my pesky brain overcomplicating the process, the content and the results. I had to remind myself to stay focused on the major points in my project and trim all the excess fat weighing it down.
