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:
Music controls
Research finding
The way users control music in different contexts
Users listen to music when they’re walking, busing, driving and working - most of the time they are not using the app actively. Therefore, it’s as important to design for user interactions with headphones, voice assistants, and music controls on phone, car screen and steering wheel.
I listen to music when taking the bus. Most of the time I control music with my headphone without taking my phone out. If I really want to change a song, I’ll just do it on the lock screen.
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
Existing
In the original design, lyrics occupied a fixed area of album cover. Users had no choice to hide them. For users who rarely view lyrics, it's a distraction for their music listening experience.
Proposed
We redesigned the interaction to give users the flexibility and control to view lyrics when they want to, to reduce visual distractions and complexity on the interface.
4. WHAT'S NEXT
We worked with MyMusic’s team to drive research and design to the final experience by communicating research results and design solutions. While this project focused on the music player and profile in mobile app, clients were happy with the results after launching the new design. Therefore, after this project, we continued to work on other projects to enhance their product experience.
