2023, UI design Academic Project

Moody



Wandersafe

2023, UI Design Project

Team

Personal Project

Tool

Figma, Miro

Skills Developed

Auto-Layout, token, Wireframing, Prototyping

A music player to find the best playlist for you based on your mood

A music player to find the best playlist for you based on your mood

A music player to find the best playlist for you based on your mood

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.

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.

Meet Becky,
understand her pain points and needs

Meet Becky,
understand her pain points and needs

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.

  • 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.

" I am at the cafe and I would like to listen to some warm/calm music, however the player starts playing death rock. "


" I am at the cafe and I would like to listen to some warm/calm music, however the player starts playing death rock. "


Design Solution

Design Solution

Design Solution

Easily Switch between different Modes

Easily Switch between different Modes

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.


Select either Dark (Default) Mode or Light mode during your onboarding process.

There's always a one that you like.

Personalized Recommendations based on your Mood and Scenarios

Personalized Recommendations based on your Mood and Scenarios

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.


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

Advanced filters to help you find the best playlist

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

Join Communities, Read Comments and Make Friends

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.


Check your Monthly Report and Share with your friends

Check your Monthly Report and Share with your friends

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 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!

Full Prototype

Full Prototype

Design Process

Design Process

Competitor Analysis: Spotify

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

Low-fi Sketches

Logo Design

Logo Design

Design System

Design System

User Flow

User Flow

Main Screens Design Overview

Main Screens Design Overview