Bondfire

Music curation and rating social app

Bondfire Banner

Bondfire is a music curation and rating application that allows users to log and curate their music tastes in one place. The app facilitates social interaction and connection through the sharing of logs and creating a space to discuss music topics.

View Final Prototype

CHALLENGE

The Challenge of this project was for our group to create a complete application interface based on a problem or niche that has not been filled. We thoroughly worked through each step of the app design process to gain a comprehensive understanding of our audience and identify features and enhancements that could improve our product.

My role: This project was created in a team of three consisting of two design students and one journalism student. My role in the project primarily focused on developing the visual branding of the app, along with its interface. I was also involved heavily in every other aspect of the development of the app, including research, personas, surveys, interviews, testing, and documentation.

RESEARCH

To begin developing our application we first needed to understand what similar applications existed and if our user would use our application.

Competitor Analysis: We found that most competitors only existed as online web pages without in depth social connection systems. This gave us an idea of what new functionality we could bring to the niche.

  • rateyourmusic.com: lists top albums and songs currently being rated.

  • albumoftheyear.org: general user rating and critic scores.

  • musicboard.com: ranking feature along with creating lists

  • albumwhale.com: create album collections/lists

USER RESEARCH AND EMPATHIZING

We separated our users into different groups based on what goals they have when interacting with our app.

Target users:

  • Social music listeners: Users who care what their friends are listening to and enjoy sharing their tastes.

  • Music curator: Users who enjoy logging and collecting their music tastes in one place to organize their opinions.

  • Music critics: Users who enjoy rating and critiquing music and engaging in discussion about music topics.

SURVEY

To better understand our users and have data to base our design decisions on, we conducted a survey to gather information. From the 72 responses we received from our survey, we found that 50% of respondents were female, 45.8% were male, and 2.8% were nonbinary. The remainder preferred not to answer. 9.7% of respondents are 18, 20.8% are 19, 16.7% are 20, 15.3% are 21, 5.6% are 22, 2.8% are 24, 16.7% are 25 or older. 

Takeaways:

  • 93.1% of people listen to music while traveling, 56.9% listen while working out, 52.8% listen while studying or working.

  • 37.5% of users reported listening to more than eight hours of music a week, 23.6% listen between 6-8 hours.

  • 55.6% of surveyed listeners use Spotify, 29.2% use Apple Music, 6.9% use YouTube Music, 7% listen to the radio, and one respondent uses Amazon Music.

  • 40.3% discover new artists through Social Media, 25% discover through curated streaming service “recommended for you” playlists, and 23.6% discover through word-of-mouth recommendations from friends and family. 

  • 58.3% of users surveyed keep track and log music by curating playlists.

INTERVIEWS

Each group member conducted a survey with a user that may interact with our application. Our questions were focused on understanding the user’s current listening and curating methods for music.

Takeaways:

  • Music is part of everyday life, mostly used while commuting, studying, or working, with streaming as the main method and physical formats (vinyl/CDs) holding emotional value.

  • Spotify and Apple Music dominate, but users are frustrated by poor shuffle, messy playlist tools, weak discovery, and high cost for students.

  • New music is found through a mix of friends, social media, concerts, algorithms, and niche sites, with a strong desire for better friend-based discovery.

  • People want better ways to track, rate, and organize music privately, with simpler and more intuitive interfaces.

VALUE HYPOTHESIS

Bondfire allows users to have a central way to curate and log their music interests while also providing a space to discuss and make connections with others listening to the same music.

MOSCOW LIST

Our MOSCOW list evolved throughout the project as certain functions became more important for our minimum viable product.

Must

  • Rating an album.

  • Follow users.

  • Individual User accounts.

  • Stats on Profile page.

  • Discussion space for specific album.

  • Music recommendation feature.

Should

  • Rate individual songs.

  • Create your own list of albums.

  • Listen later feature.

  • Being able to share your account/posts.

Could

  • Critic ratings.

  • Personalization of background/themes.

  • Badges or gamified achievements for engagement and discovery streaks.

Won't

  • Stream music.

  • Artists won't be able to interact with users.

  • Direct messaging.

PERSONAS

Using our previously established user groups, we developed user personas to empathize with and base our decisions on.

Persona 1: Maria Simons

Users who care what their friends are listening to and enjoy sharing their tastes.

Persona 2: William Miller

Users who enjoy rating and critiquing music and engaging in discussion about music topics.

Persona 3: Roman Willis

Users who care what their friends are listening to and enjoy sharing their tastes.

USER FLOWS

With our audience solidified, we began to map out how our users will complete certain tasks of our app, always leading back to the needs of the user.

User flows of different app functions.

SITE MAP

We furthered out user flows and combined them into a comprehensive site map. This helped us get a complete understanding of our application layout so we could begin to create prototypes.

Site map showing the flow of the application.

STYLE KIT

Before the other design student and I began to create a prototype of the application, we worked on developing a detailed style kit with all of our app’s branding and components. We focused on being thorough at this stage, creating reusable Figma components, which allowed us to keep our visual style consistent as well as saving us time.

Color style kit page.
Type style kit page.
Buttons style kit page.
Inputs style kit page.

WIREFRAMES

We designed wireframes to start the visual design process for the app. We looked at similar apps such as Letterboxd and Goodreads to get an idea of how other apps organized their interactions.

Wireframes of app pages.

USER TESTING

After the wireframes we used the elements from our style kit to expand the app to be a high fidelity prototype to test. We tested the prototype with users using think-alouds to get specific feedback from users.

Takeaways:

  • Clarify login and sign-up flow

  • Reduce confusion in social features

  • Improve review and discussion interactions

  • Strengthen discovery and friend activity

  • Refine visual design cues

FINAL PROTOTYPE

Given all of the feedback we received, we improved the initial version of the prototype and added the final levels of polish and detail to make it look as finished as possible.

Login screen before user testing.

Old login screen that confused users on the intended flow of the app.

Login screen after user testing with improvements.

New login with improved branding and visual hierarchy to ensure no confusion for the user.

Gif showing logging functionality.

Logging music on the app is simple and intuitive. Allowing the user to add a star rating, like, and personalized review.

Gif showing the adding friend functionality.

Finding other users is accessible through the friends’ activity page. Having this functionality allows for users to connect and see other’s music tastes quickly.

Gif showing the explore feature.

The explore page will allow for users to discover new music quickly. The suggestions given will be based on recent reviews, popular with friends, or a specific search to see an artist map of similar artists.

REFLECTION

This project gave me an in-depth look at the app development process. I had to learn to quickly adapt and stay on schedule to ensure that the product is finished by the deadline. Keeping track of the MOSCOW list was imperative to ensuring that we had a MVP before adding any extra functions. My knowledge of Figma and UX design principals were greatly improved through this process and I am glad of the work my group was able to achieve.