musixmatch-logo

Player redesign

A new player to enhance the music experience and give users more control over the lyrics.

musixmatch-phones-1

My role

Sr. Product Designer

Team

12 people

Date

2017

Duration

8 months

Responsabilities

UX, Research, Design System

Context

Musixmatch's mobile app displays time-synced lyrics. There is a lyrics catalogue made by users and professional content editors. The users can add, sync and edit lyrics using the website or the app, but it was difficult for the active users to do it within the app (2018). This functionality was limited by the poor ux. By leveraging the community more, the company could have a much more comprehensive, accurate and up to date lyrics catalogue when compared to competitors.

Problem & Opportunity

Previous users tests have further highlighted that only 2% of testers found the way to edit or add the lyrics. The Player did not have an educational pattern to help users to contribute. The entire UI was not ‘contribution’ oriented. In addition, according to the information architecture research, the Player was not perceived as an entry point to contribute. Just 5% of active users contribute to the lyrics catalogue using the app.

Hypothesis
  • If we give users more control over the lyrics we can improve the number of lyrics added per user
  • if we add more contribute entry points we will help users to feel more in control over the lyrics
ol-player-mxm

Just 5% of active users contribute to the lyrics catalogue using the app

Research & Strategy

The initial step involved conducting a UX audit of the current state and reviewing insights from previous research. When we began working on the new player some interview had already been conducted, providing valuable insights into contributors' usage of our website and iOS app. However, I felt that more information was needed, so I conducted a survey to gain deeper insights into their needs and pain points while using the app. The survey helped us to get enough evidence regarding users concerns. Based on these insights, I organized an ideation session with the design team to generate ideas. We agreed to proceed with two ideas for testing.

My activities

UX audit (Old player)
User research
Competitor analysis

IA analysis
Ideation workshop

2 Prototypes
Accessibility check
Usability testing (2 variants)
Final design

mxm-sketches-1
mxm-player-flow-1

Solution

We propose a redesigned Player that not only serves listeners but also prioritizes the contributor's experience. Our goal was to transform the Player into a versatile tool that empowers users to actively engage with the content. By perceiving the Player as a platform for interaction, users gain the ability to contribute lyrics, synchronize music, and translate lyrics across various languages. This holistic approach not only enriches the listening experience but also encourages active participation, fostering a collaborative community around music and lyrics.

To understand how users could interact with the new player, we proceeded with a first iteration to introduce a new entry point for contribution. We observed that only 5% of users were contributing per month. In the second iteration, we introduced 'contribute actions' for the empty state (missing lyrics, missing sync), resulting in a 45% increase in contributions per month. Following these experiments, we launched the new player with a completely different layout and more entry points for contribution, leading to a 15% increase in contributions per month.

mxm-iterations-1

Results

We observed a +15% increase in active users contributing to the lyrics catalogue thanks to the new entry points. This improvement enhanced the overall user experience and increased the total number of contributions per month within the app, iOS and Android.

ol-player-mxm mxm-new-player

Next Project

clip-hero-1
clip-logo

Video lyrics

A new fun way to share videos, with music and lyrics! The first video lyrics app made by Musixmatch team in 2014.

fr-logo

Let’s get in touch. You can follow me and connect wherever you prefer.

© Frank Rapacciuolo 2022 Product designer