Design for better music listening experience on mobile

#online music streaming #mobile UX

Music player

Project Logistics

Background

The client is a music streaming service provided by one of the biggest telecom business in Taiwan. The client has been adding the product features and contents to provide various service to fulfill the different user needs. As the feature and contents expand, however, the client team lost the focus on the product itself, but KPI and numbers. The client team finds it difficult to align the product core value with the team and has little understanding of their users. Consequently, the client cooperated with us to adopt the user-centered design (UCD) methodology and share the mindset in their product development process.

Output and Impact

  1. I closely assisted the UX Research Lead to conduct the user research and testing sessions to understand users’ behavior and thoughts about the music streaming services, before analyzed research data, compiled the results and shared the research findings and insights with the stakeholders, to provided recommendations and supported evidence-based decisions for the client.
  2. We’ve planned and held a few co-creation workshops to work with the clients’ product core team, to align the project goal, clarify their business strength/weakness, and understand their assumptions of the users and the product. These also acted as a step to bring in the UCD mindset to the client team, which did affect them to create the product with user's voice in mind.
  3. We designed a more intuitive user flows based on the research and two design iterations, and delivered a detailed flowchart and wireframes for designers in the client team to work on UI/visual design.
  4. I edit a video, including the key quotes from the user interviews and user testing sessions, to better communicate the user story and the value of music product with the client team. This video was also played in the clients’ PR event with 200+ participants from the music industry to share the key value of music streaming service. (Below is an illustrative example of the video)
the video of user's key quote
The video of key quotes from user to communicate the user story with the core product team. (illustrative example frames taken from the video)

Building Empathy: Understanding Users

How do we design a better music listening experience on mobile?

To help the client better understand the users of mobile music product and their need, we conducted 10+ semi-structured interviews and a guerrilla street interview, to understand the users' lifestyle, how they use different music products, and what role music plays in their daily life.

We asked the users to finish several tasks they would normally do using the original mobile APP, e.g., edit playlists, search, play a song, save a song, to gather the usability feedback of the current APP. At this stage, we also helped client to ideate some product ideas they've got in mind and to preliminarily validate these features, using the lo-fidelity wireframes. The client team was also invited to participate in the interviews.

We did an affinity diagramming to analyze the data. Some of the key findings are:

* Limited findings are provided here because of NDA.
Affinity diagramming
We did an affinity diagramming from the interview data to synthesize the research findings.
Blurred wireframes
We also tested some product feature concepts with these users to gather the preliminary feedback.

Meanwhile, we conducted competitor product analysis and market analysis to understand the market gap in music products.

We planned co-creation workshops to share the user stories, our insights, and suggestions. We also primed the clients to discuss how their technology and business strength could align with the user need and market gap to develop the objectives of product revamp with the client team.

The Product Revamp

The product revamp started from the redesign of music player and mini player on mobile APP, as the first and essential step. Based on the previous usability testing and our design review on the current APP design, we formed up teams with the client to identify the most crucial usability issues , and the functions needed to be improved. We also prioritized the information structure and ideated the design into sketched wireframes.

Pain point voting Team up and discuss the information structure
We worked with the client to priortize the functions needed improved, defined the information structure, and ideated the design into sketches.

Later on, our team organized the workshop outcome and built two versions of prototypes that we were going to validate in the prototype testing afterward.

Paper/Lo-fi prototyping & Testing

To quickly validate the concept and user flow, we first tested with a paper/lo-fi prototype to remain the flexibility and save time.

We invited the music APP users and conducted interviews & concept testing. We have the users walk through how they use the music APP, asked the interviewee to do the card sorting to understand how they perceive the feature and information that music player provides.

We then asked their opinions about the current prototype and primed them to move around or to add the UI elements, to communicate their thoughts and imaginations of a music player that is easy to use.

The user doing card sorting Lo-fidelity prototypes that enable the user to move around the elements
We asked the users to prioritize the information in the music player function and tested the lo-fi prototypes. The UI elements are free to move, which enabled flexibility and helped the user to communicate their thoughts.

Digital/Hi-fi prototyping & Testing

We wrapped up the feedback from the lo-fi prototype testing and created two hi-fi versions of the prototype, working with designers from the client team, using Principle. With the digital prototype testing, we gathered the user feedback on not only the usability but interaction and visual style.

We designed several tasks (e.g., save the music to a specific playlist, switch to random play...) and tested these tasks on each version, to understand the more desired design.

Finally, we analyzed the data gathered from the testing sessions, shared the results to the client and detailed documents for the client to work on the product revamp.

Hi-fidelity prototype testing using digital interactive prototypes. Music app. Mockups
Digital prototypes help us to gather feedback on the preference of interaction design and visual style preference.

Learnings and Reflection

Though I cannot unveil much information about the project outcome, I did learn a lot from this project that I would love to share.