Real-world project

Designing better mobile music experience

1. THE CHALLENGE

The music streaming market is so competitive that it’s difficult for companies to stand out from the competition and build user loyalty. Designing an user-centric digital experience that meets people’s needs is one of the key. Therefore, MyMusic invited us to redesign their mobile app experience.

Project Objectives

Enhance product experience and increase brand loyalty.

The Team

PM, UX researcher (me), UX research intern

My Responsibilities

• Plan, design and conduct research

• Facilitate co-creation workshops

• Execute UX design including IA definition, wireframing and prototyping

2. RESEARCH PROCESS

Phase 1: Co-Creation Workshops

We ran two workshops, with three groups of 5-6 people from MyMusic’s cross-functional teams, including business, design,
engineering and marketing. Before the workshops, we conducted competitive analysis and expert review to explore the problem domain. The findings were used later in the workshops to inform the ideation of design concepts.

Competitive analysis

We examined the IA, user flows and interaction design of competitors’ products. Including local competitors like KKBOX and global competitors like Spotify and Apple Music.

Expert review

We examined the existing app design, generated assumptions of user pain points and identified key areas for improvement.

Phase 2: User Interviews

We ran two rounds of interviews with 10 users (from age 17 to 42, iOS and Android users) to understand their streaming behaviors and needs. Each study lasted for 1.5 to 2 hours. In the first round, we tested the design concepts that were generated from co-creation workshops with paper prototypes. In the second round, we conducted usability studies with hi-fi prototypes that were built based on user feedbacks from the first round. 

Card sorts

In the first round, we designed card sorting activities with sets of cards (e.g. music player features like shuffle play and view lyrics) to redefine IA and reduce complexity of the existing design.

Hi-fi prototypes

Based on the research results from the first round, we worked with MyMusic’s design team to build hi-fi prototypes with Principle. We conducted usability studies with 8 task scenarios.

Paper prototypes

We shared and tested our design concepts with prototypes built by papers and Post-its to gather user feedback. We encouraged users to add, remove or move elements.

Preference test

We prepared color copies of different visual styles designed by MyMusic’s design team to help make decision based on user 
preferences. 

3. RESEARCH FINDINGS & ACTIONS

Based on research results, we defined IA, developed wireframes and built prototypes. Here are some examples:

Based on the results of card sorting, the features and information that users need on a mini player include: play/pause, previous/next, progress bar, song name and artist name.

Design solution

Existing

Proposed

In the original design, users couldn’t know what song they were playing and control music unless they were in the music player view. This was a huge friction in user’s music listening experience.

We designed a fixed mini player in app and redesigned the music controls on phone’s lock screen with key information and features that are most important for users. Users could control music much more easily.

Music player

Research finding

The features and information users need 

Based on the results of card sorting, users identify the following features as primary: play/pause, previous/next, seek bar, album cover, song name and artist name. Whereas the secondary features include shuffle play, loop, add to playlist, view lyrics and queue. 

These are not so important. They don’t have to be that big on the screen.

Design solution

Existing

Proposed

In the original design, there were too many information, icons and buttons competing with each other. Some frequently used, while some rarely used. This made the music player less intuitive to use.

We redesigned the music player with clear information hierarchy based on the importance to users. For features that are used less frequently, we organized them in "more options", using text instead of icon labels to make them easier to understand.

View lyrics

Research finding

Lyrics are important but not a default

While lyrics are important, users think it should be an option - you view lyrics only when you want to. The younger generation views lyrics more and tend to share lyrics via social media. 

Sometimes I view the lyrics to take a break from studying. Also when I want to practice singing that song.

Design solution