top of page

JukeBoxx - Premium Subscription Concept

Duration

4 weeks

Role

Solo Project

Problem Area

A startup company launched a media product two years ago. It is a freemium model that has a mobile-web experience and a mobile app for both iOS and Android. The company’s business strategy was to first build a user base by offering a free product and then evolve the feature set so they 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. They now need to design an experience that will allow users to subscribe and pay a monthly fee

Untitled design (4).png

Hypothesis

Create two premium plans to offer existing and first-time customers so that customers can choose a plan based on budget and their listening preferences

Business Opportunities

Offering two types of premium subscription models will allow customers the option to choose a plan based on budget needs and listening habits. This will reduce the number of customers leaving the platform for either something more budget friendly or with more listening options to choose from.

Approach

Define

Understanding problem space

Defining project goals

Forming a schedule

Research

Competitive Analysis

User interviews (5)

User Flow

Design

Wireframes

Feedback Session 

Style guide

Hi-Fidelity

Evaluate

User-based testing (5)

Re-design

Research

Competitive Analysis

Analyze the music streaming space and current state-of-the art solutions related to the problem area

User Interviews (5)

Survey music streaming users of their pain points and what they like about their streaming service

User Flow

Understand the user journey, user need and various pain-points 

I divided the research phase into two phases - a primary research phase where I understood the context of the problem, conducted initial stakeholders interviews and audited existing solutions.

This was followed by a secondary research phase where I conducted 5 user interviews and synthesized all of this data into a written research synthesis and user flow.

Who did I interview?

(2) Interviewees had full time jobs, (2)  were college students, and (1) was a 12th grade high-school student

All interviewees listened to music via music streaming service at least once a day

All interviewees paid for a premium music streaming service

Insights + Themes

Theme 1 - Convenience 

Insight 01

Hates paying for two music streaming services to get different types of content (creator and mainstream)

Insight 02

Spotify's free one-month of premium when signing up for their freemium model incentivized users to pay for premium

Theme 2 - Design & Functionality

Insight 03

All interviewees preferred Spotify's UI over SoundCloud or Pandora

Concept

Touchpoints

Freemium

Premium

Premium Plus 

User Flow

Wireframes

Screen Shot 2022-05-23 at 2.22.31 PM.png
Screen Shot 2022-05-23 at 2.22.49 PM.png
Screen Shot 2022-05-23 at 2.22.56 PM.png
Screen Shot 2022-05-23 at 2.23.11 PM.png

Freemium vs Premium vs Premium Plus

I wanted to emphasize the difference in the freemium versus the two premiums model through design by:

JUKE.png

For the freemium platform, I used the JukeBoxx logo as the far right icon on the navigation bar where the user chooses one of the premium plans

I included a pop-up blocker that would allow users to sign up for premium or return to search when trying to play a song that requires a premium plus subscription

The premium subscribers get a full profile page of their recently listened to songs plus much more. The freemium users have to access their profile page through the homepage

Testing & Improvements

Screen Shot 2022-05-23 at 2.52.57 PM.png
Screen Shot 2022-05-23 at 2.54.40 PM.png

First Major Improvement

Pick a Plan Screen

  • Users mentioned their confusion regarding where to click to choose a plan. To have the plans appear clickable, I added the arrows and shadow boxes

Second Major Improvement

Improvement in overall UI + Music Streaming bar

 

  • Increased saturation on the dot which shows which screen you're viewing on the navigation bar

  • Mentor feedback recommended switching from the branding color blue over the artist photo to a black gradient over the name of the artist. This was to eliminate text blending in with the artist photo

  • Adding a floating streaming player bar to each page where the user can pause/play or expand wherever they are in the app.

Screen Shot 2022-05-23 at 3.00.56 PM.png
Screen Shot 2022-05-23 at 2.53.09 PM.png
Screen Shot 2022-05-23 at 2.53.20 PM.png
Screen Shot 2022-05-23 at 3.12.34 PM.png

Third Major Improvement

Music Player

  • Enlarged the buttons to make more accessible

  • Created a quick and easy way to 'favorite a song'

  • Added a gradient black film over the image to increase visibility if the text/buttons and image color blended in together

Style Guide

Screen Shot 2022-05-23 at 3.31.47 PM.png

Hi-Fidelity Designs

Key Screens

Screen Shot 2022-05-23 at 3.34.52 PM.png
Screen Shot 2022-05-23 at 3.34.59 PM.png
Screen Shot 2022-05-23 at 3.35.06 PM.png
Screen Shot 2022-05-23 at 3.36.32 PM.png
Screen Shot 2022-05-23 at 3.35.24 PM.png

Usability Testing

I conducted moderated in-person testing at a local coffee shop in my town. I picked (5) different users ranging from 17-32 years old. I asked them the following questions and had them walk me through the prompts listed:

Qualitative Questions

To gather thoughts, feelings & impressions
  • Take a look at each screen, what are your initial thoughts and impressions?

  • What options do you have access to?

  • What do you think each icon means on the navigation bar?

  • What does your your profile or home screen show you?

  • If you had the options of two types of premiums - which would you choose?

  • What are your overall impressions of the app? What do you wish were different?

Quantitative Tasks

To identify any usability problems
  • How would you choose a free plan? How would you choose premium plus?

  • Navigating the main screens within the app

  • (within the free version) What is the paywall telling you?  

  • How would you view the premium plans from here?

Outcome

Users during testing mentioned how they liked having different options of payment plans and  to have the same music content that SoundCloud includes while having better design and functionality. All five users from both rounds of testing said they would prefer to have a paywall on premium creator content and unreleased songs knowing they have the ability to subscribe for that content rather than signing up for a separate app.

Final Prototype

Future Roadmap

Future Research + Changes

While the testing phase went well and interviewees had positive feedback regarding the two types of premium plans, it would be interesting to see how many users would select the Premium Plus model versus Premium or the free version.

 

Are the features offered in Premium Plus enough to insinuate users to upgrade their plan? The number of upgrades is the only way to tell if these models work.

What I learned

01

My biggest mistake with this project was not taking enough screenshots of the changes I made throughout the design process. Even though I had three rounds of feedback from testing, I could only find screenshots of two iterations I had made. Major re-designs happened after the usability testing including adding the floating streaming player and changing the blue gradient over the artists image to black

02

Learning that what is obvious to me may not be obvious to the users of my product. I assumed usesability testers knew they could click into a box to select the service but found I needed to improve my designs to make it more intuitive

Thank you!

bottom of page