Chillhop Music

Free to Paid Premium Conversion
Branding, UX Research, UX Design, UI Design
July 2020


Chillhop Music App Given Wireframes

Only the lightweight wireframes were given for the "existing" music app

Company Background

*This is a hypothetical bootcamp project

A startup company launched a music app 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.

Problems and Business Goal

The existing signup flow does not have a call to action upon registration that gives the user the opportunity to subscribe.

By creating a paid product with better features than the free experience and giving users the opportunity to upgrade to a better product, users will pay the subscription fee. This will lead to a profitable revenue stream.

My Role

This is a solo project.
Company Branding
UX Research
UX Design
UI Design


iPad Procreate
Sketch App
Adobe Illustrator


July 2020
Less than 80 hours

1. Comapny Branding and Visuals

Company Branding

This project was a hypothetical class assignment, so there was no given company name or any visual.

Given information about the company:

Brand personality - uniquely diverse, but somehow always familiar. This creates the need for design to balance that tension.

Brand attributes: Bold, Smart, Hip

I named the company Chillhop since it specializes in upbeat background music that helps users to chill.

Tagline: "Beats to chill, study, and relax"

Style Guide

After creating the company name, I decided on the color palette, fonts, and style of UI elements that best align with the company's brand. (All the colors have passed the accessibility test). Here are some examples of the guide. 

2. Research

Research Method

Secondary Research: Heuristic Analysis — Study the Industry Expert.

Primary Research: User Interview — Discover the key problems users have.

Research Questions/Goals

1. What are some of the compelling reasons for the user to subscribe to a premium service?

2. What are some usability issues with existing music apps?

3. What paid features should we include that both the existing and new users are willing to subscribe to?

4. How can we create persuasive and effective call to actions throughout the free experience?

5. How can the users effectively understand what the premium offers?

Heuristic Analysis of Competitors

One way that designers come up with solutions is by looking at how other teams have solved similar problems. So I took a look at the ways that industry experts of music services have approached similar problems and achieved similar business goals. I evaluated what worked well and what I would have done differently.

I analyzed IDAGIO, Spotify, Youtube Music, Pandora, SoundCloud, and Amazon Music. Here is one sample analysis.

Chillhop Competitive Analysis: IDAGIO

User Interview

I conducted user interviews to better understand the users' experience with other music apps they currently use, so I could uncover their pain points and ways to avoid some usability issues.

I interviewed 3 users, each for 15-20 min.
(If I have more time and resources, I would interview at least 5 more users to get more holistic findings.)
I asked the user's opinions of the existing music app's features, reasons they subscribed to premium or did not subscribe.

Research Key Take-Aways

1. Users don't want to be stuck behind a paywall (e.g. they are forced to try out the premium and enter their payment information upfront)

2. Users would like to know and understand what the premium features are throughout the app (e.g. “you can only have 6 skips” banner when the user skips a song)

3. Users would like to know how the premium is different from the free version without any hidden fees (e.g. a clear and succinct summary or comparison list of the premium features)

3. Sketch and Multivariate Testing

After creating multiple sketches I chose to do a multivariate testing instead of task-based testing because it's the task of subscribing is very straightforward; the key is whether the user understands the premium features and wants to subscribe. So I asked the users to explain their preferences for the different versions of the same screen that presents the premium plan.

Chillhop Sketch and multivariate testing: comparing different subscribe screens

What I learned

1. Too many choices can be overwhelming.

    Show one plan, then have a “See Other Plans” button

2. The user wants a simple and clear comparison of the free and premium versions.

    They don’t want to spend much time reading, scrolling, or doing the math. So I will have a side by side comparison chart.

3. Transparency is important.

    Some users would like to know how the billing works in detail. Include the details in small prints.

4. Mockup and Testing

Call to Actions Throughout the App

Here are some examples of the high fidelity mockup with CTAs for the users to know and understand what the premium features are throughout the app.

Premium Features Comparision

Based on the research findings,

1. After the initial signup, there is a list of the premium features. To make the users less overwhelmed, the list is concise without the comparison like the second screen. The purpose is to inform the users first. We don't want them to be stuck behind the paywall. They will more likely upgrade after listening to the music instead of right after signing up.

2. I made a clear, and thorough comparison of the free and premium versions. They can access this chart throughout the app by clicking the "learn more" button or through the bottom navbar.

3. The default plan is the monthly plan. They can choose other plans with more discounts by clicking "see all plans." 

Desktop Web Version

Usability Testing

After creating the first iteration of the high fidelity mockup, I tested the design with 5 participants, each about 15-30 min.

The goal was to find out:

1. Can the users easily understand what the premium features are?

2. Are there enough prominent calls to action that gives the user the opportunity to subscribe? Are there too many CTAs to drive away users?

3. What makes the user want to subscribe the premium? What prevents them from subscribing?

What I learned from the Usability Testing

There are many other aspects of the app could be improved, but here are a couple of points about the free to premium I learned.

1. The premium feature comparison chart is overall very easy to understand.

The only problem was for smaller screen, the CTA might be covered by the bottom navigation, so we can hide part of the chart and have a "see more" button.

2. Have appropriate amount of Ad with good timing

We need to find a balance between enough ads to make the user want to subscribe and not too many to make them abandon the app.

3. Give the user autonomy

Too much popup and CTAs could be annoying. So after the user closes the popup multiple times in a row, they should not show up again. The user can still access the premium in the bottom nav easily.

Remaining Questions

Music apps are so common. How can Chillhop stand out against popular apps like Spotify and YouTube? Especially if the same songs are available on other platforms.

(The premise of this assignment is that " the product has been well received and has a healthy user base of free users. " so finding the users is not the concern, but from a realistic point of view, I need to question this)

Brainstorming answers:

1. Niche audience and music genre: young people, background music, a mix of jazz and hip-hop, exclusive Chillhop Music

2. Part of the premium fees go directly to the artists the users listen to the most and/or allowing the users to choose which artists they want to support

3. Suggest playlist based on users mood or situation (e.g. motivated or relaxed, party or doing homework, etc.)

4. Each album has beautiful cover art that can be downloaded as screen savers or wallpaper for different devices and/or link to the visual artists work

Of course, we need more research to determine whether these options will help increase the user base.


Daini Eades is a UX/UI Designer at LexisNexis

Follow Me

Mobirise website maker - More info