Heyo-hero image

HEYO

Music streaming app development - design better subscription experience by increasing engagement

THE PROBLEM

How to improve the user listening experience while designing an experience that allows users to subscribe and pay a monthly fee.

Heyo is a startup company that launched a music streaming 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 evolving the feature set to 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 hired me to design an experience that allows users to subscribe and pay a monthly fee. I found the existing flow for returning users does not give the user an opportunity or a compelling reason to subscribe.

TARGET USERS
18-24 years old (Gen Z)

HIGH LEVEL TIMELINE
Four weeks (90 hours)

CHANLLENGE

​Business needs​

  • Creating a paid product with better features than the free experience and allowing users to upgrade to a better product.
  • Increasing the conversation rate.

User needs:

  • The subscription that worth the money
  • A better listening experience
  • Easily way to find the next favorite song​

MY ROLE

Solo UX designer

Strategy design, Competitive study, Research, Synthesize, User flow, Sketches, Wireframes, UI, Prototype, Usability test.

SOLUTION OVERVIEW

Personalized, Game-like, Sicoal, and Flexibility are the four key points to attract users and drive them to upgrade accounts.

Gif-

1

Gamified the app, rewarding users for exploring features.

Encouraging users to explore the app by asking and rewarding them to join the challenge.

2

Show the shortcut tutorial intuitively by micro-interactions.

Shortcuts help users to speed up the interaction which leads to a flexible user experience. And micro-interactions are a great way to show how to use them.

Gif-
Gif-

3

Personalize the app for new users and returning users.

Display the different layouts for the different users based on the music taste. Users can follow the artists they like, save the song and create their playlist.

4

Get to know what your friend is listening now and create collaborative playlists with your friends.

Users can create collaborative playlists with their friends if they want. Users can also listen to the playlist that their friends created in a public model.

Gif- Gamified the app

DESIGN PROCESS

Understanding - Ideation - Design - Validate

icon-ideation

understanding

Secondary Research
Competitive Study

Read More >
icon-ideation

ideation

Synthesize
User Flows

Read More >
icon-design

DESIGN

Sketches
Wireframes
Hi-Fi Design
Hi-Fi Prototype

Read More >
icon-validate

validate

Usability Testing

Read More >

UNDERSTANDING

Competitive Study
Secondary Research

1. Competitive Study

  • 2/3 app won’t set CTA upon registration that asks new users to subscribe.
  • 3/3 app has paywall blocking or roadblocks by playing ads, limited skip, limited offline play, etc…
  • Users don’t like to be interrupted by anything while listening to music.
  • Users expect to find what they’re looking for in less than two times clicks.
Music app logo

I chose to start with a competitive study as this is a quick way to help me get familiar with the music streaming industry and learn what the industry leaders did.

​I downloaded and interacted with Pandora, Spotify, and Youtube Music to test the features and I also checked the reviews of those three apps in the app store to see what the users said.

Girl listening to music
“There is an option to skip after 5 seconds but I don’t want to be pulling my phone out every five minutes to skip an add”

2. Define users by initial desk research and screener

  • Users are willing to pay more for personalized features.
  • The “Sunk cost fallacy” affects the users’ feature satisfaction and drives consumer purchasing.

Because understanding the value that users get from a music streaming platform and their willingness to pay is essential to uncovering the music industry’s business model. So I set out to better understand the behaviors of Gen-Zers and what influences their decision-making when it comes to subscription-related concerns by secondary research at this phase.

Image of reason to go premium
Image of defined user

IDEATION

Synthesize
User Flow

Insight

  • Personalized features are the key point to drive users to update accounts.
  • People are willing to go premium once they put a lot of time into it.
  • It's not a good idea set CTA to subscribe to the premium in sign-up flow

Framing the problem that I’d like to focus on:

  • HMW upsell or get users to subscribe naturally?
  • HMW enhances the personality features for users?
  • HMW encourages the user to explore the features and spent more time with the app?

THESE WERE SOME MAJOR IDEA
I WANTED TO CALL OUT

Don’t ask for money too soon, or too late.

Apply gamification design, rewarding users for exploring features.


Find the right balance between value and comfortable, limit the free plan by music quantity or features, etc.

Encourage people to build their library and playlists.

Make the app easy to navigate and upgrade.

Building Information architecture by user flow

After defining the problem and ideas, I structured the information architecture by a user flow that is easy for me to check If the logic makes sense.

New user listening experience

User flow image- listening to music
User flow image-freemium upgrade

Freemium upgrade to premium

DESIGN

Sketches
Wireframes

Design lo-fi screens

When I was satisfied with the user flow, I started to cover the user flows into physical screens. I did quick sketches of the primary screens first by pen and paper at this phase because a rough sketch helps me focus on expressing my ideas, not the decoration or layout details. ​

Once I have enough sketches to go, I built the wireframes in Figma and conducted the usability test with 5 participants remotely to check if the logic, navigation,  information hierarchy, and category are clear enough or not for users.

Sketches image
The sketch helps me focus on expressing my ideas, instead of decoration or layout details.

Once I have enough sketches to go, I built the wireframes in Figma and conducted the usability test with 5 participants remotely to check if the logic, navigation, information hierarchy, and category are clear enough or not for users.

Wireframe comparison image

VALIDATE

Usability Test

Usability test by wireframes

Completed the wireframes, I did my first round usability test with 5 participants remotely. The below diagram is the result.

Usability test  result -v1

ITERATE

High Fidelity Design
High Fidelity Prototype

Design Hi-fi screens, trade-off, revise, and validate iteratively.

Based on the direct feedback from the tester and indirect insight from my observations, I reflected the improvement on the hi-fi prototype.

hi-fi comparison image -1
hi-fi comparison image -welcome page
hi-fi comparison image -music page
hi-fi comparison image - pup up panel
hi-fi image -new page

VALIDATE

Usability Test

Usability test by hi-fi screens

After the update, I conducted another round usability test of the hi-fi prototype with the 5 participants remotely by Zoom.

Usability test result-v2

RESULT

Compared with the test result of the wireframes version, the latest test result showed:

  • 60% improvement on usability experience of the artists selected page.
  • 20% improvement on the understanding of the introduction page.
  • 40% improvement on the willingness of reading the task page.
  • 100% of users didn’t feel compelled to go premium.

60%

Improvement on usability experience of the artists selected page

20%

Improvement on the understanding of the introduce page.

40%

Improvement on the willingness of reading the task page.

100%

100% of users didn’t feel compelled to go premium.

RESULT

Revised the final prototype.

Though stakeholders and I were satisfied with the design result so far, I’d like to perfect the project with some detailed parts, as the saying goes, the devil is in the details.

Revised hi- fi screens comparison

WHAT I LEARNED

1. Choose the correct way to measure the impact.

I found it’s hard to measure converted rating accurately on a prototype, but we can measure the impact by selecting the correct question and task and doing a usability test or AB test, then we can get a very intuitive answer by comparing the results of different versions to see how much percent it is improved.

2. Getting to know your target users’ personalities and backgrounds play a critical role in a project.

We can barely understand a group population without knowing their backgrounds. In the process of getting to know them, we can really understand how their opinions are formed, what their real needs are, and what problems they are generally facing.

3. You are not the user.

Do not take it for granted that others think or interact the same way you do. You are not the user, the only way to validate your assumptions is to do the test with real users iteratively.

Linkedin iconinstagram icon

© 2021 by Hongyue Zhao