Role:
UX Designer
Responsibilities:
UX Design
Research
Development
Tools:
Figma
Flutter/Dart
Xcode
Timeline:
Ongoing Project
Summary
Listening to music is an activity that humans enjoy daily. While there are many existing music streaming such as Apple Music and Spotify, none of them are currently offering an alternative way for music lovers; music stops. The concept of 'music stops' hereby proposed, is similar to the game Pokemon go or how Snapchat uses a map to locate users and connect them. The aim is innovate on ways to connect music fanatics with each other, by allowing them to share songs and suggestions with each other in the form of location-based playlist (music stops).
Objectives
• Create an engaging experience for users to discover new music using location-based playlists called 'music stops' while allowing them to also connect to other users
• Apply design thinking methodology to uncover any unmet needs users face when listening to music on a digital platform, and create iterations for later testing
• Perform usability tests on the app to assess usability opportunities
Introduction
Many people enjoy listening to music while they walk around; whether to exercise, think, or simply to get to their next destination. For many people, music compliments their daily experiences, and while existing platforms offer countless ways to seek new music, there is something especial about seeing other people's suggestions and favorite songs, and also discover new music that is location-based, with a meaning or story behind.
One of the first phases of this project was a paper prototype to quickly assess how a location-based music experience could function. I created a faux paper iPhone and walked around while holding it since the app would utilize a map with the user's location. After presenting the prototype to a team of fellow-designers for feedback, some changes were made to try new ideas.
Originally called “musico” and later “Sonidico” the name was finalized as “Sorisync”.
Wireframes
The original idea did not include social interaction with other players, it was mainly a music suggestion experience based on an algorithm, but after analyzing all the feedback from several design critique sessions, everyone suggested adding more social components to the app, e.g., having the ability to view other users on the map, and being able to send them songs, or check out their profiles and music tastes.
First Iteration
These were the first high-fidelity wireframes presented to a group of fellow designers for feedback. The map and user profile dialog screen were kept, but the way each music stop was shown to the user changed from navigating to a separate screen to now using a bottom sheet modal, since it seems more intuitive to show the playlist, while allowing players to see the map in the background.
Music Stop Screen (playlist):
This was the original way to show the playlists, but after careful consideration and feedback, it was concluded that it was not a good user experience to take players to a new screen to select songs and then navigate back to the map. So some changes were made. Also the point system was removed for now.
Main Mode (map):
The UI for the map would show the music stops as location markers; users would tap on each one to show them a playlist based on that area made by other users, etc. users can leave their own music there too under certain conditions (i.e, having listened to at least one song from that music stop).
User Profile (dialog pop up)
If a user sets their profile public, other users will be able to see profile pages that will show a user’s username, social media, favorite songs, and music history, etc. Users will have freedom to set their privacy settings as they wish, so others will only see what users want to show.
Latest Iteration
These are the most recent high-fidelity wireframes, which were used to generate the first coded prototype with Flutter/dart. The aim is to create a cross-platform product that can work well on android and iOS devices. The main changes were the music stop playlists that now use a bottom sheet modal, as well as the location markers used that are now circular in shape. There will be generative research done to inform this current version and make changes to the prototype to prepare for the first usability test.
Music Stop Screen (playlist):
The bottom sheet modal will now include the top genre from the list of songs in the playlist, also the background color was changed to a neutral gray. The number of people who follow each music stop will also be shown.
Main Mode (map):
The main color purple will be used predominantly throughout the app. The location icons are now circular with an arrow pointing downward at the location, this creates better contrast with the rest of the map
User Profile (dialog pop up)
The user profile pop-up will now include followers/followed users, taking inspiration from current social media design conventions. User’s music history, and ability to send songs would be optional features as well
Flutter Prototype
After creating a prototype using Figma, and getting a sense of the initial look and feel of the app, I proceeded to create a new prototype using Dart via Flutter, since ideally we want our app to be cross platform compatible.
It is imperative to understand how mobile development works, so I can better empathize and communicate with any future developers that may help with this project in the near future.
Current Iteration of The App
The following video shows the current progress of the Flutter prototype. Some notable changes include, using bottom sheet modals for each 'music stop' playlist instead of taking users to a brand new page. It is a more intuitive way to show them songs to listen to, while keeping them in the map view. After a set of usability tests in 2023, more design changes will be implemented.
Next Steps
Now that I've acquired the necessary skills to be able to prototype an app that could eventually be deployed and tested on an actual phone, the next steps are to go back to the design thinking process and start doing plenty of research about music listening habits, and people's expectations of how a music streaming app works. Beginning with generative research, followed by empirical research and usability testing, etc. The goal is to make sure this app is not just a minimum viable product, but a minimal lovable product.