UX Design

Heyo - Music Streaming App Development

Helping people get the most of the subscription by accessing additional-value features in a short time.

Overview

Heyo (fictitious) is a startup company that launched a music streaming app (internal app) two years ago. It is a freemium model with a mobile-web experience and a mobile app for iOS and Android. The app  has been well received and has a healthy user base of free users. They now hired me to design a paid product that allows users to subscribe and pay a monthly fee.

Duration

Jan 2- Feb 3,2021
Four weeks (90 hours)

My Role

Sole UX/UI designer
Visual designer

Team

Laura Trouiller( Mentor) and me

Business Goal

Design a paid product to help increase revenue.

Possible solutions

1. Design a better listening experience than the other competitor.
2. Design an effective promotion way.

Why I chose the second item as the solution?

  • It's a capstone project that won't be launched, so it's hard for me to test how good the listening experience is with a prototype.
  •  From a market perspective, the solution for effective promotion solutions with high impact, but requiring less effort, and the listening experience can be gradually improved at a later stage according to the needs of paying users.

Success metrics ( Moderated usability test)

1. Ask users to complete upgrade task.
2. Let users rate the willingness to upgrade for products.

HMW

... increase user initiative to explore the product by a new promotion way?

...get users to quickly understand the additional value of the product through new promotion way?

Challenge

​Business needs​:

  • Creating a paid product with better features than the free experience and allowing users to upgrade to a better product.
  • The final goal is to Increase the conversation rate.

User needs:

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

Solution

Incorporate challenges and reward users for their exploration.

Incorporate scavenger hunting games into the product to increase new users' willingness to explore, guide them to understand the added value of the product, and let them quickly understand the value of premium service.

    Show the shortcut tutorial intuitively by micro-interactions.

    Users want to speed up the interaction and find what they are looking for easily. Micro-interactions is very straightforward way to  guide them and leads them to a flexible user experience.

    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.

    Personalize the app for users.

    Add a personalized design to create a sense of intimacy among users. And make users aware of the importance of the product in their lives.  And in turn, increase the success rate of the sales pitch

    Multiple ways to upgrade account.

    Provide multiple ways for free users to upgrade their accounts. Make the subscription process smooth and trouble-free.

    Get to know what your friend is listening to 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.

    Design Process

    I chose to use the Double Diamond framework to help solve this problem because I wanted to validate my solution through usability testing and iterate on it quickly.

    icon-understanding
    understanding
    + Define

    Secondary Research
    Competitive Study
    User journey maps

    Read More >
    icon-ideation
    ideation

    Synthesize
    Crazy Eights
    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

    Secondary Research

    Competitive Study

    Secondary research
    Survey (10 participants), and short interview(5 participants)
    I started with a survey to help me get some quantitative resources on what are the criteria people use to choose music streaming apps?

    Research insight 1

    Besides music library and the subscription price, value is the main reason for subscribing. People won’t pay for premium if they don’t know how to access the additional-value.

    Research insight 2

    Young adults are largely influenced by the people around them when selecting apps, and prefer music apps with social features.

    Competitive study
    Beyond the criteria, I also want to know how industry leaders promote their premium services. So I did a competitive study.

    Research insight 1

    The promotional forms of all the products are too similar, without highlights and competitiveness, and users have already resisted these models.

    Research insight 2

    Insufficiently comprehensive description of paid services, leading users to miss out on maximizing benefits.

    DEFINE

    Persona

    User Story

    User story 1

    “As a budget-conscious student, I want to know the value of the app before I pay for it, so I can be a smart consumer and not waste my money.”

    User story 2

    “As a busy student, I want to get to know a product quickly so that I can save time and make a quick decision on whether to continue using the product.”

    IDEATION

    HMW

    Journey Map

    Crazy Eights

    HMW

    ... increase user initiative to explore the product by a new promotion way?

    ...get users to quickly understand the additional value of the product through new promotion way?

      I used crazy eights method to help me think out of box. Then I asked some friends, explained the background, and asked them to make a vote. Finally we selected four ideas.

      Journey map

      A journey map helped me understand the process Dianne would go through to reach her goal and how she would feel at the time. And I found shorten users' exploration time and help them to access the additional-value of the product quickly would be a good opportunity to solve Danne's problem.

      Crazy eights

      When I identify the parts of the user experience that can be improved, I wanted to be able to quickly come up with some solutions. So I used crazy eights method to help me think out of box. Then I asked some friends, explained the background, and asked them to make a vote. Finally we selected four ideas.

      Test

      Usability Test

      1st round usability test by wireframes

      Methodology
      5 Participants (21 - 30+years old)
      30 of minutes
      Remotely
      Moderated usability study

      Testing finding

      • People felt stress and not willing to join the free trial because they were afraid to be asked credit card information after click the button or hard to cancel.
      • Most people didn't read the content of the game because in our mental model, pop-ups equal ads. And most of us hate ads and will simply close them immediately.
      • Different people have different operating habits, so some users have difficulty discovering shortcut gestures.
      Usability test  result -v1

      Style guide

      Before jump to hi-fi prototyping, I created a visual style guideline to help me keeping the visual consistency and share it with others. The visual style aims at creating a trendy, friendly, and interesting personality.

      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.

      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.

      Try the prototype

      Next step

      1. Refine the design based on the second round finding and create payment screens. 

      2.  Consider edge case beyond the happy path.like fail to pay or subscribe, can't find the song or artist, fail to load the content, etc.

      3.  Think about other user group’s needs and accessibility design, like what full time employee need when they working, or how to protect teenagee from some unsutable works.

      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.

      What’s next?

      PPD - Clinical Learning App Development

      From research to mid-fi wireframe, designing an engaging experience to help mothers with postpartum depression issues complete lessons enjoyably.

      TripAid - Planner App Development

      From research to hi-fi prototype, designing an effective experience to help travelers create a trip plan in collaboration with others.

      Let me know if you want to talk about a potential collaboration. I’m available
      for freelance work.

      Let’s design your app