Co-designing a Mood-based Music Streaming App
❓ The Why
There are currently various music streaming apps out in the market that provides users pre- curated playlists and mood-based playlist shared by other members of the community, however, these songs may not be personalised to each individual user's taste. As users’ mood changes throughout the day, what they feel like listening to may also change, resulting in them having to manually think, search and queue new songs based on their current mood, making it time-consuming.
Aim: To co-design with participants an app that allows users to easily find playlist based on their current mood and their usual listening habits.
👤 My Role
🛠️ Tools
🤝 Collaborated with
End to end: User Research,
UI/ UX Design, Usability Testing
Figma, Paper Wireframes,
Microsoft Teams
5 Participants ranging
from 23-55 years old
🔎 Results (from usability testing)
-
Participants found the mood feature time-saving & a quick alternative to creating playlists.
-
Participants felt the personalised content made them felt prioritised & are more likely to use it often.
-
The flow was easy & straightforward. The labels on each page was clear & help guide the participant.
INITIAL RESEARCH
User Research - Mixed Interviews
To understand how users currently listen to music, 5 semi-structured interviews were conducted (3 virtually, 2 in-person) with participants between the age of 23 - 55. Participants were asked about their listening behaviour, their frustrations with current apps & their playlist creation process. An affinity map was then used to group the insights into themes.
Throughout this project, I will also be collaborating with these participants to co-create the app. Participants feedback were gathered at the end each design section to infrom the next development.
Results (Pain Points & Desires):
Participants were working adults who listens to music while working or when commuting, they also listen to music at least 3 times a week.
TIME
CONSUMING
Users manually search for songs according to their mood, which takes them awhile. If they’re short on time they just find a playlist & skip through uninterested songs.
DIFFICULT TO THINK OF SONGS TO ADD
Users sometimes found it difficult to think of songs to add to the queue on the spot. They rather have songs similar to the current vibe they’re feeling added in.
DESIRE FOR A COMMUNITY
Users find current apps lacking social interact with friends & the community (e.g. easily share new songs with friends or seeing trending moods public playlists)
DESIRE FOR PERSONALISED HOMEPAGE
Some users felt that the homepage of their music streaming app can be overwhelming & irrelevant. They wanted a more personalised page.
Persona
Using the feedback from participants, a persona was created to help visualise our target user.
KATE, 28
A graphic designer who’s currently working at an agency in London. She enjoys listening to music while commuting to the office & working designing. She listens to a wide variety of genre & keeps up to date with upcoming concerts and artist.
GOALS:
• To easily & quickly find music for her current mood.
• To be able to share music recommendations with friends
• To be up to date when there’s a concert she likes in London.
DIFFICULTIES:
• Takes her a long time to set/ update multiple playlist based on her mood.
• Having to remember & looking up music she heard from other platforms (i.e. YouTube)
Competitive Analysis
To better understand what other app’s unique selling proposition were & to identify areas where this app can uniquely provide, a competitive analysis was conducted on 3 major streaming apps.
STRENGTHS
WEAKNESS
SPOTIFY
• Easy to understand & navigate
• Easy to view listening history
• Visually appealing
• Accessibility consideration:
voice search
• Homepage can look
overwhelming, can’t tell the
sections apart.
APPLE MUSIC
• Easy to understand & navigate
• Section labels are easily understood.
• Minimal design, easy to follow
& clean visuals
• White background can be eye straining.
• Dark mode is tied to local device settings
• Paid service, can’t fully judge the app’s features
YOUTUBE
• Easy to understand & navigate
• Personalised content feels welcoming
• Clean structured layout.
• Accessibility friendly:
voice search + closed caption
• Search bar can be difficult to find
if users are unfamiliar with the UI.
• App has to be open for video/
songs to be played, draining the battery.
• Personalised, structured & spaced out homepage layout would make the first screen less overwhelming.
• Clear labelling would help users navigate better between page & features.
Although Spotify and Youtube have pre-curated content, they have yet to emphasise personalised curated mood playlists, therefore this unique to my design’s proposition.
Concept Storyboard
A storyboard was created to better visual the interaction between Kate and the concept app.
Kate is listening to a playlist while walking to the tube station. She wants to change the mood playlist.
Kate open the music app & locates the happy icon & taps on it.
The app provides different curated happy playlist from Kate’s favourite genres. She selects a Pop playlist.
Kate looks at the tracklist to see if its to her liking. She then clicks the play button.
Kate is happy & puts her phone back in her pocket, continuing her journey.
IDEATION
Paper Wireframe
Different iterations were made to find the most suitable layout to address users needs.
Participants were shown the storyboard and paper wireframes. They then voted on their preferred layout..
Starred Layout = Layout with the highest votes; Participants found these layouts to be the most intuitive to follow while providing large & clear visuals.
Users found the 6 mood icons on the homepage overwhelming, therefore a “MOOD PAGE” was created to further breakdown the process. The starred layouts were then turned into digitalised wireframes.
Digitalised Wireframes
Using the paper wireframe as a guide, mid-fidelity wireframes were created on Figma to make it easier and cleaner for participants to visualise. Minimal text was incorporated & was only used to inform the flow from one page to another. Social aspects were also considered to make the app feel more like a community.
HOMEPAGE
MOOD SELECTION
SPECIFIC MOOD PLAYLIST
PLAYLIST
PAGE
NOW PLAYING
Mid-Fidelity Prototype
Interactions were added to the frames to turn the wireframes into a clickable prototype.
Additional frames were also created to represent other sections of the app so that participants could test and evaluate the app holistically.
Platform: Figma
SEARCH
Incorporated social features such as being able to see trending keywords (i.e., moods, artist / songs that others have searched up). Users can also keep track of what they previously searched & listened to.
HOMEPAGE
PROFILE
BROWSE
INITIAL USER TESTING
The mid-fidelity prototype was tested with participants both in-person & virtually through the Figma app & website. Participants were given scenarios to fulfill such as “How would you go about using the mood feature to find a Happy Playlist” & told to think out loud as they went through the process. Their feedback was also collected after.
Insights
KEY
P: Participant(i.e. P1: Participant 1)
LIKE TO STICK TO THEIR OWN
PERSONALISED MUSIC
"I like the continue browsing or frequently searched at the top of the page" -P2
WOULD USE THE MOOD FEATURE
& FOUND IT USEFUL
"I would use this feature in my daily life. It’s quick & easy to look for music when I’m rushing’ -P3
WERE INTERESTED IN
THE SOCIAL FEATURE
"I love the idea of being able to vibe to the same
playlist with my friends" -P3
USE THE QUICKEST WAY TO
NAVIGATE BACK TO THE HOMEPAGE
"I would click the home button at the bottom or use the back arrow" -P4
Improvements
ADDING LABELS
WHERE POSSIBLE
Having text below the icons would make the functions easier to understand & use.
MORE ACCESSIBLE
SEARCH BAR
The top placement of the search bar makes it difficult to access/ find.
COMMUNITY & SOCIAL ASPECTS
Having a listening party with a global group & with friends.
PRIORITISING
PERSONALISATION
Participants like to keep to familiarity:
prioritising the songs they usually listen to and their listening history.
DEVELOPMENT
Updating Wireframes
The wireframes were further developed based on participant’s feedback.
PRIORITISING PERSONALISED CONTENT
Since participants tend to stick to what they’re comfortable with. Users’ recent playlist was moved up the sequence so users can easily return to playlist they like.
ADDITIONAL LABELS & SOCIAL FEATURE
Labels were added under icons to make sure that they were easily understood across different aged users.
A Listening Party button was also added to the Currently Playing & Tracklist page, allowing users to listen to music with their friends. Users could also listen along with the global community.
BETTER SEARCH BAR ACCESSIBLITY
A previous study has shown that there is a limited ‘thumb space’ on screen, this includes the top left of the screen where the search bar is. Participants also stated that it was hard to tap the search bar with one hand, therefore it was moved down to the navigation bar for easier access.
FINAL DESIGN
Copy, visuals and animations were added to the clickable prototype to provide a more realistic representation of the app.
Design Platform: Figma
HOMEPAGE
Simple & personalised, providing a clean interface that users can easily understand.
MOOD PLAYLIST BUTTON
In the centre of the screen with a large button for clear visibility & easy access to the feature.
MOOD SECTION
Users can select a personalised mood playlist, view their history & can explore the global trending playlists.
The colours of the playlist arecorrelated to the different moods, making it easy to identify.
MOOD SPECIFIC PLAYLIST
The playlist are curated based on users’ listening history. Users can also view their friend’s public playlist & what the community’s most popular playlist are.
The ‘Now playing’ interface minimises into a widget as users move around the app so users can still keep track of what song is currently playing.
PLAYLIST
NOW PLAYING
Users control their music from here.
The tags will also update according to the current song that is playing, allowing users to find songs with the same vibe.
A description allows users to briefly go through the artists in the playlist.
Users can also explore related playlist by click the tags. To invite friends to listen along to the playlist, users click the listening party icon.
Interaction
Clickable Interactions & Animations were added to simulate a realistic mood playlist user flow.
FINAL EVALUATION
Participants were asked for their final feedback on the app focusing on the ease of interaction & visuals.
Interview Notes
As participants go through the prototype, observations, quotes & improvements were recorded on excel.
The in-person testing was conducted as a group of 2, both users were asked questions at tested the prototype on their devices using the Figma App
Results
MOOD FEATURE IS VALUABLE
Participants found the mood feature time-saving & a quick alternative to creating playlists.
PERSONALISATION = CARED
Participants felt the personalised content made them felt prioritised & are more likely to use it often.
1 wished they could customise what they see.
INTUITIVE INTERACTION
The flow was easy & straightforward. The labels on each page was clear & help guide the participant.
AESTHETIC PLEASING
Participants found the visual exciting & interesting, making them curious to click on & explore the app.
1 found the colours a little overwhelming.
Future Recommendations
Participants also stated features they would like to see for future development.
CROSS PLATFORM INTEGRATION
Integrated mood feature into a smart watch, changes songs based on heart rate
SOCIAL RECOMMENDATION
Reviews made from friends, playlist watchlist & popular playlist of the week.
FILTER FEATURE
A filter function will make it easier to scroll through songs & look for songs that fit 2 different tags
SONG PREVIEW
Allow users to listen to a snippet of the song ( i.e. chorus) to see if they would like the song before playing.
HELP RESOURCES
To have a wellness section to help users who are facing difficult emotions.
ACCESSIBILITY CONSIDERATIONS
To ensure that the product is easy to use for users of different ableness, additional accessibilty were also considered for future improvements. This in turn would benefit both abled & impaired users.
ALT-TEXT FOR IMAGES
Allows users with screen readers to be able to easily navigate the app.
LEGIBLE VISUAL & TEXT SIZES
Ensuring that images, text & icon are legible so it’s easy to associate to their fucntion.
HIGH
CONTRAST
Ensuring high contrast between icon, text & background makes it easier to read. Maintainig dark mode reduces eye strain.
Personal Reflection
The design process focused on collaboration with target users, ensuring that each step was grounded in user feedback. This in turn made the design more empathetic & make the users feel cared for. It also helped widen my perspective on functions which initially seemed intuitive.
However, since the study was conducted with friends & family, further evaluations should be done with a wider audience to address further pain points that were not discovered. I also hope to co-design accessibility features with people who have visual & physical impairments to see how the design could be improved to be more equitable.
