The Music App
The Product:
Beatdrop is the first contemporaneous media sharing mobile application that allows you to listen and share music with friends, family & nearby users.
Duration: April 2017 - Present
My Role: Co-CEO/Co-Creator/Co-Designer
Partner: Bianca Vianson
President: Paolo Vianson
Engineer: Vikas Sharma
Responsibilities:
-
App Development
-
Concept Creation
-
Product UI/UX Design
-
Wireframing
-
Design process
-
User Testing / Beta-testing
-
Marketing & Social Media
-
Website Development
-
User Research
-
Product Management
Background
Two roommates who one day decided to develop a mobile app together. We realized that many people enjoy listening to music together, whether its 50,000 people all at the same concert or two friends sharing headphones. Music brings us together, so why not make that connection easier?
The Problem:
There are a few barriers to sharing music, people may use a different program or be located in a different state entirely. With so much content that is AI generated, it is hard for busy individuals to find new music by a source they trust.
The Goal:
Design a mobile app with the functionality that allows users to find, share, and listen to music simultaneously, in the moment, from anywhere in the world.
Concept Creation & Ideation
How might we...
1. Create a product that introduces a new concept for experiencing music?
2. Create the opportunity to find music more personal?
3. Create an easier experience when sharing a song with one another?
What is out there in the market currently?
1. Music streaming applications (Free & Subscription)
2. Music video platforms
3. Music creation platforms
Opportunity: Music sharing/personal radio for friends, music social media platform, live-streaming parties
Original 4 Categories
Connect to Friends
Add friends from your contacts and listen to their music livestream simultaneously. Share and discover music as if you were listening to music through the same headphones.
Connect Nearby
Don't know what to listen to? Find users who are broadcasting nearby. At the gym, on the street or in your car!
Connect to Top Followed
Experience the opportunity to become a "Top Followed" DJ, or discover new music played by Beatdrops™️ most li listened to users. What if you could even listen to celebrities favorite songs in the moment? The opportunities are endless.
Connect to Party
What if you could pregame to a real party nearby you? This feature was originally thought of for ".EDU" users. Listen to nearby party livestreams through the "Connect to Party" feature where you can listen before you arrive!
The Design Process
During this section, my partner and I created a logo, paper wireframes, and and the overall flow of the App with the possibility of incorporating all of the desired four features above. Through this, we worked to create as many examples and options to expand on. We also had to decide on a name for the mobile app which we both agreed was for whatever reason the toughest part in this stage of the process.
The Logo
Once we finally decided on a name, we started on the logo creation. Right away, we knew that we wanted to incorporate headphones due to it's universal correlation with music. Below are some early designs of the logo and how it transformed to the final design.
Paper Wireframes & Low Fidelity Designs
Now onto High Fidelity & UI Design Features
When picking out UI design features for the app, we got really inspired by electronic music colors and the look of neon signs against a brick wall. We wanted to try and create the experience of being at a concert. Vibrant but not too overwhelming. Explaining the concept was a bit difficult so I included some images as a reference guide.
Reference Images
Beginning Designs
Final Design Iterations
After many months of iteration on the overall UI design, we decided on the overall view and theme shown below. We decided this due to many reasons with one of the biggest being it fits our company vision & concept for the App. We also wanted to ensure the design was accessible, fun, and easy to navigate.
User & Beta Testing
Once we had a functional prototype for users to test, we had a group of users utilize test flight where they could utilize our prototype and explain their overall experience and process with the App prior to the launch. This process took multiple rounds as there was many functionality issues that arised.
Some questions we asked our users included:
1. What are your thoughts on the overall look of the app?
2. Did you have any issues logging into the App and linking your Spotify or Apple Music Accounts?
3. Were you able to successfully play a song?
4. Were you able to save a song to your "favorites" by liking the song?
5. When you tested the app with another user, did the correct song play simultaneously with the song you chose?
6. Were you able to search a song successfully?
7. Did all icons correctly respond when pressed?
8. Were you able to listen along with a user in real-time?
9. Was there any point of the process that was confusing?
10. On the scale of 1-10, how likely are you to use the app in your day-to-day?
Initial Findings
With the first couple rounds of testing, we learned a lot of information to help us improve the experience. While most users enjoyed the look and idea of the application, there were many technical issues that created frustration. It just showed how important it is to have other users test the product throughout each stage in the process.
Feedback & Technical Issues:
1. Songs would often replay when listening "along with a user" versus "at your own pace".
2. When a user would press a song, sometimes it would show the correct album cover but play a different song.
3. When too many users joined the app at once it would crash and close them out.
4. If the DJ had Apple music and the listener ustilized Spotify, it would not play the correct song.
5. Users were confused on how to add friends to their account.
6. When users searched a song, often it would freeze or not show results.
7. When playing a song, the album would show up blurry instead of clear.
8. Users were either receiving too many notifications or no notifications at all when people they followed played a song.
Design Iterations Based on Findings
After analyzing the feedback from each round of beta testing, my partner and I would connect with our engineering & coding team to try and develop solutions.
Our first priority was fixing the technical problems that occurred while using the app. We did not want users to have a poor experience because the technology itself was failing. We would meet many times a week to test any changes made and continue to test the functionality today.
Due to our app utilizing the music libraries from other streaming apps, we have to continuously manage any changes to ensure it works properly.
On top of technical issues, we iterated on any design aspects that confused our users, such as the add a friend screen or the search screen. We made the search screen more universal where you can search users, songs, or albums.
