UI/UX Design

Introducing a premium subscription

icon arrow down
0
100

Overview

Vinyl Mix creates connections between artists and audiences. The platform empowers users and DJs to explore, create, and share music. Check out my final designs next and how I got there. As the product designer, I was hired to solve a business case for a media startup that was transitioning from a freemium model to introducing a premium subscription for its iOS mobile app.

  • Role:

    Product Designer

  • Problem:

    How do I create the opportunity for new users to subscribe to the premium product during onboarding? Plus, introduce existing users to the new model without losing them?

  • Methods:

    Secondary research, competitive analysis, journey mapping, research recruitment, cognitive walkthrough, wireframing, prototyping, usability testing and research analysis.

The Solution

Preview of my final designs

If you'd like to find out how I reached the final solution continue reading the full case study.

Vinyl Mix Persona

First, who are our users? They tend to skew 20's- mid 30's, are tech savvy and value independent music.

Our main persona

My approach

I developed a comprehensive project plan that included initial discovery to uncover background information on the industry, design trends, and typical user behavior. I then moved into wire framing to test out my hypotheses. Later, I used my findings to create high-fidelity screens and prototypes for user flows. This culminated in a usability test, during which I incorporated the learnings to update my design and create the final prototype.

My project plan

Discovery

My discovery process was based on several factors. Since this is a fictional music app, I conducted secondary research to determine how other music apps introduced a premium subscription to new and existing users.

Youtube music's onboarding experience

Another important element of the business goal is allowing existing users to sign up for a premium account, so I needed to understand the information architecture of other apps.

Competitive analysis of Youtube's information architecture

User flows & Wire framing 

New user flow

I sketched out the two main user journeys to test early ideas for solving the business problem before creating detailed designs. For new users signing up, my aim was to ensure easy navigation and clearly communicate the value of a premium subscription. In my research, I found that offering a free monthly trial is a valuable incentive, but it should only be presented after introducing the premium paid version. I also made sure to include the Apple Pay option for easy payment.

New user wireframes (1/2)
New user wireframes (2/2)

Returning users

For the important goal of encouraging returning free users to become paid subscribers, I wanted to ensure that the new offering wasn't intrusive. Since the product would be restricting key features behind a paywall, I didn't want to risk losing users. I decided to take a more subtle approach by changing the account name to "premium" to encourage user's interest.

Returning user flow
Existing user wireframes showing the upgrade through settings
Existing user wireframes offering a premium upgrade through a pop up

Style guide

Before transitioning to high-fidelity frames, I created a style guide that included brand colors, logo, font, and components designed in the wireframe. I opted for a dark background color for the app to ensure that album covers and artist profile images would stand out, rather than blending in. The choice of secondary colors, green and brown, was inspired by nature and the popular YouTube channel My Analog Journal, as I aimed for the app to be bold yet calming.

The Vinyl Mix style guide

High-fi screens and prototype

When creating high-fidelity screens, my primary aim was to maintain visual appeal without overwhelming the user with excessive content. Let's start with the new user onboarding flow. The following high-fi screens build on the low-fi screens and bring in branding.

High-fi onboarding and premium offer introduction (1/3)

With the main business goal of driving users to sign up for a premium subscription, I developed the new user onboarding process flow to offer users the choice to upgrade to a premium account. If they opt to remain on a free subscription, I provide a free month's trial. My approach aims to attract users who don't need a trial to subscribe to a premium account, capturing additional revenue.

The free trial option (2/3)
Further onboarding personalization ending on the home screen (3/3)

Returning users

For returning users, I avoided using a pop-up to announce premium features. Instead, I changed the profile menu name to "premium" and used the profile image to pique interest in the change. 

Returning users premium offer

Usability test highlights

I conducted usability tests with five music-loving users, using two high-fidelity prototypes. Below are key highlights and my proposed solutions.

New Users:

  • Issue 1: Users initially chose the non-premium option, then opted for the free trial.
  • Solution 1: Updated the heading to "Use premium" for clarity and modified the premium copy to be more compelling. 

Returning Users:

  • Issue 1: The premium pop-up obstructed the home screen. 
  • Solution 1: Removed the pop-up after the initial test to avoid interruption.
  • Issue 2: Returning users found the premium naming on the menu confusing. 
  • Solution 2: I changed the premium name to "Account" and introduced a banner for the premium offer with the option to close it.

Final updates

Following the usability test, I made updates to my solution and addressed a few technical issues.

New user flow:

  • I revamped the premium screen copy to showcase the perks of subscribing, aiming to prompt more immediate sign-ups without offering a free monthly trial.
  • I updated the header to read, "Unlock the complete experience with premium" instead of "try premium."
Updated screen post usability screens for new users

Returning user flow:

  • Instead of expecting users to discover the premium account, I reintroduced the concept of a pop-up on the home screen but reframed it as a way to inform returning users about the new subscription model.
  • Additionally, I included an immediate offer for a free month of premium. This offers a sense of goodwill with existing users.
Updated existing user premium offer

Learnings

  • Introducing a new subscription model to an app that was once free requires careful communication and an attractive offer for existing users. It's a way to keep your current user base happy while also attracting premium users to the sales pipeline.
  • When solving a product problem in an established market like music apps, studying the leaders in the space can provide a wealth of knowledge. It's a low-cost research method and can help businesses move faster in creating more revenue.
  • In the realm of growth, there's a lot to be gained from usability tests. Small tweaks to the copy or changes in the flow can completely alter how a user reacts.

Check out the final prototypes!

New user

Returning user

you may also like