A music player to find the best playlist for you based on your mood
Skills Developed
Auto-Layout, token, Wireframing, Prototyping
Tool
Figma, Miro
Moody is an exciting music app. It recommends playlists and artists based on the user's selected mood and current scenario, providing a personalized music experience.
Users can connect with others who are listening to the same music, fostering a sense of community and shared interests. Additionally, Moody can be integrated with Apple Watch, offering seamless control and access to music directly from the wrist.
Easily Switch between different Modes
Select either Dark (Default) Mode or Light mode during your onboarding process.
There's always a one that you like.
Design Solution
Personalized Recommendations based on your Mood and Scenarios
In Moody, you can discover your own music community.
On the music playback page, it includes location and comment functions.
Users can browse through other users' comments on the same song.
Additionally, they can find people who are listening to the same song simultaneously.
Advanced filters to help you find the best playlist
Can't find your favorite playlist with the basic filter?
The advanced filter will help you refine your preferences by combining algorithms to discover more playlists that may match your tastes.
Join Communities, Read Comments and Make Friends
In Moody, you can find your own music community.
On the music play page, it contains location and comment functions.
Users can browse other users' comments on the same song.
And—find people who are listening to the same song at the same time.
Meet Becky,
understand her pain points and needs
Becky feels stuck listening to the same songs and songs she disikies repeatedly
Becky needs a music player which can help her find friends with similar music taste
Becky might benefit from a music player with robust discovery features, such as curated playlists, personalized recommendations, or access to music blogs and reviews.
Check your Monthly Report and Share with your friends
Moody provides a Monthly Report, which records your mood throughout the month and the songs you were listening to during that time.
The Vibe Grid for March will help you understand your music trends this month, possibly indicating your preferred genres. Additionally, the Lyrics of the Month will remind you of your mood during those special moments.
Don't forget to share this report with your friends and compare your listening habits!
Moody
2023, UI design Academic Project
Design Process
Competitor Analysis: Spotify
Strengths
Simplicity: Spotify's UI is designed to be intuitive and straightforward, making it easy for users to navigate through various sections such as playlists, albums, artists, and settings.
Personalized Recommendations: Spotify's uses algorithm to feature personalized recommendations tailored to each user's listening habits.
Social Integration: Spotify seamlessly integrates social features, enabling users to follow friends, share music, and discover what others are listening to. The UI makes it easy to see what friends are currently playing, share playlists, and collaborate on shared playlists.
Weaknesses
Algorithm Limitations: While Spotify's recommendation algorithm is quite sophisticated, some users may find that it doesn't always accurately predict their preferences or introduce them to new music effectively
Comments: Users cannot see comments and ratings about each song
Low-fi Sketches
Logo Design
heart symbol: love and passion, which can extend to music as a form of emotional expression.
heartbeats: suggests a dynamic and pulsating connection to music
Black & Pink: Theme Color
“M”, represents "Moody" and "Music", indicating this is a music player. It can also be explained as a ECG symbol
Design System
User Flow
Main Screens Design Overview
popup design example
footer design
What was the largest challenge you experienced? Were you able to overcome it?
What is one unexpected thing you learned in this course that you found valuable?
Do you feel like you have a good idea of what your responsibilities would be as a UX designer in a professional setting? Is anything unclear to you?
My largest challenge was prototype. Some prototype skills were not taught in the class, for example the slider. I was able to overcome it by watching YouTube videos and Figma tutorials.
Absolutely Auto-layout. Before learning UI, I though designers should adjust the position of each frame by themselves. Auto-layout is extremely convenient to make the interface looks clean and simplistic.
As a good designer, my responsibilities include building a delicate design system, create wireframes and prototypes, design the workflows and interactions to make sure users can have a seamless user experience. We should also create visual appealing designs contains usability and accessibility.
Self-Reflection
1.
2.
3.
" I am at the cafe and I would like to listen to some warm/calm music, however the player starts playing death rock. "
Team
Personal Project