MelodyMap
A Playlist for Every Place, Music for Every Moment.
Based on feedback from the two real-life prototyping sessions, our team carefully crafted and designed a High-Fidelity prototype of MelodyMap for users to test out and enjoy. We created utilized Figma to display the various features and convey the user experience on a clearer scale.
The three main features displayed on this prototype are:​
1. Posting to starting a live listening session.
Users can create a post to share a song and start a live listening session. They may add a caption and choose who can see their post (Public or Friends only).​
2. View the map to see where their friends are located and what they are listening to.
Users can view a map displaying their friends' locations and what song they're listening to. react to posts or leave comments, creating a fun way to connect through music.​
3. Music Collaboration through Weekly Challenges (Friends or Strangers nearby).
Users can collaborate on playlist creation in a fun, interactive way (friends or match with strangers who share similar music tastes). Once matched, users work together to create playlists based on weekly challenges, through chat. They can publish/share their playlist for others to view/listen. Users can engage with the community by reacting to others' playlists with comments or emojis.
Design Strategies
Design System
The MelodyMap visual identity is characterized by a clean, modern design language. The logo, a combination of a musical note and a location pin, symbolizes the app's core function of connecting music and location. We used the Inter font to maintain a balance between readability and aesthetic appeal.
App Features + Video Demos
Easily share songs or start a live listening session. Live update mode automatically syncs your current location and song. Customize your post with a caption and choose your audience.
Sharing Songs
Map
See what your friends are listening to in real-time. Explore where they’re spending their time and join the musical conversation. React to their posts, leave comments, and share your own musical moments.
Task 4b (Prototyping Session 2)
“You can see that two of your friends are hanging out at a cafe in Convoy and are listening to the same song...Could it be? Could they possibly be on a date? Oh my! Show your reaction with a photo and a comment!”
Collaborative Playlist Challenges
This feature creates a fun and interactive way for you to collaborate on playlist creation.
-
Weekly Challenges: Every week, we'll drop a new challenge, like "Chill Study Tunes" or "Christmas Playlist”
-
Team Up or Match: You can either team up with friends or be matched with strangers who share similar music tastes.
-
Collaborative Playlist Creation: Work together to create the ultimate playlist. Add songs, rearrange tracks, and chat about your picks.Live Editing: suggest songs, rearrange tracks, and discuss choices in a real-time chat.
-
Share, Showcase, and Connect: Once completed, you can publish the collaborative playlist for others to view, listen, and react to. Engage with the community and provide feedback by commenting and reacting to others’ playlist.
By combining friendly competition, creative collaboration, and social interaction, this feature encourages users to discover new music and connect with like-minded individuals.
Future Implications
Use context-aware recommendations: When recommending music to users, try to take in the context and atmosphere to account, as they greatly influence the user’s current music preferences.
Make use of the strong geospatial and social ties between users and their friends’ recommendations: A friend-based collaborative filtering (FCF) approach is effective for recommending new ideas, such as artists or songs, to users.
Sharing songs creates a sense of community: Even among strangers, encouraging anonymous interactions between collocated strangers about music can craft a sense of commonality and community.