TuneIn!

Crafting an app for an intuitive music-listening experience to encourage social communication across a shared interest.

Tools
Figma
Procreate
Illustrator
Slack
Role
UI/UX Designer and Researcher
When
February - March 2024
Collaborators
Renato Pimentel
Angela Cameron

Project Overview

This study focuses around the creation of a social platform for easy music sharing with the framework of location-based gaming. I partook in a UCSD course titled “Social Computing”, focused on exploring how to weave social communication with technology. There were multiple phases of pitching and going through the design process in order to meet consumer needs. My team was tasked with crafting an app for an intuitive music-listening experience to encourage social communication across a shared interest.  

My role in this project was coordinated between the two other designers with whom I collaborated with on the user research and conception of the UI for this app. I created frameworks, surveyed participants, and created final rendered graphics. Our collective findings led to a fully fleshed out design centering ease of sharing, conciseness, and streamline functionality.

There was a six week turnaround from the start of concept creation until the final prototype. My team received feedback from higher executive, Steven Dow, as well as hundreds of users within the class. Our research and notes for creative direction within the first four weeks led to the following two weeks of interface design and finalization.

Context

How can people be motivated to persist through a hobby?

When brainstorming ideas, we initially found interest in creating a platform for friends to improve hobbies alongside each other. Not being able to continue to persist through a hobby was a problem we found to be prevalent amongst our team. However; the self-reporting was a factor that could not be checked through image identification. This would defeat the purpose of the application.

We brainstormed more topics that could fit in a similar style of social platform. There are a multitude of music streaming and sharing platforms but none that entice people to actively check the status of other users or return to the app once downloaded. This was the steppingstone to explore a platform that could join the ends of social media and music listening.

Background

We surveyed 42 participants to gauge their interest in this idea. 

Initial Survey
We created an online survey that would be used to understand the direction in which we would take our application.

We aimed to answer:
○ How often do people connect through music tastes?
○ Would people like to use music as a means of connecting with others?
○ Are there instances where people face difficulties in connecting with others when they would like to?

Our survey consisted of 2 demographic questions and 7 questions revolving around music use and interacting with others on the basis of music. Out of our 42 participants, the demographic of those who responded ranged from young adults ages 17 - 28, mostly being UCSD students and others gathered from the music online communities.

The Problem
There is no motivation to utilize music sharing apps because of their automized nature. It is difficult to socialize with those who actively want to share and find new music.
The Solution
Gamifying music listening experience seemed to be a creative way to increase that crave with the action of simply listening to music, an activity done on a separate platform.

Findings and Analysis

Although users listen to music daily, we learned that there is no outlet for sharing.

Key Findings
70% reported experiencing higher quality friends due to similar music tastes
41% participants answer that similar music tastes occasionally lead to better quality friends
66% participants answer no or are unsure if music leads to higher quality friends
66% participants rate similar music tastes a 1 or 2 out of 5 for importance of sharing similar music tastes with friends

Affinity Map
The team placed all of the responses on sticky notes and proceeded to group them based on similarities. These shared sentiments gave rise to three concepts we needed to keep in mind:
1/  When presented with the information of another person's music tastes, there is a stronger connection formed. Although it is not often the initial reason for forming friendship, it is only beneficiary.
2/ Similar music taste is not as strong of a factor in friendship but rather enjoyment of the same artist. This is heightened if the artist is less well known and/or if the level of engagement is similar.
3/ There are not many instances or situations where music tastes would be brought up. This contributes to difficulty in forming friendships with others through the means of music.
People surveyed spent an average of 4.3 hours listening to music a day, with the max being 18 hours. Although our survey data is not the most supportive of the demand of an app where people can connect through music, our app can provide a new perspective in which others create friendships through a form of media.

Before solidifying the idea, we scoped out similar apps in the community and music fields.

Competitive Analysis
In order to gauge other social interaction music apps, we conducted competitive analysis on platforms such as Last.fm, Airbuds, Tastebuds, and Oops. Many music sharing apps tend to lack user-friendly methods of constant social interaction.

Live user testing provided a clearer idea of how users approached music sharing in a small community.

Prototype Testing
From our lo-fi screens, we determined that we wanted to place focus on proximity and chatting with others. To simulate our desired interactions, we utilized the following platforms:

○ Figma: to create and customize avatar, create a music profile, and interacting through commenting
○ Spotify/Apple Music: to reference top songs and genres, as well as send songs and playlists


We set up the user profiles as pre-made templates so that participants only had to add their information in the prompts, and use component settings to change accessories or automatically level up their character based on number of shares.

We sorted participants into rooms so they could begin large group and 1-1 discussion, using Figma live chat to share their thoughts with their group. They could also start a comment thread to chat 1-1 with someone in their group text inside of a div block.

Design

We needed a way to gamify the music listening experience.

Lo-fi Wireframes
In order to flesh out what interactions we wanted to focus on for prototyping, we developed lo-fi screens that illustrate the general flow of our desired app. We attempted to get in the head of how we want our prototype sessions to reflect the product we are creating.

Player Profile
Players' top songs and weekly listening activity will be stored here. They can also view and edit their info.
Welcome Page
Players enter the app once they are finished customizing their avatar. They can share/view their profile.
Messaging with Others
Players can exchange messages through a direct message portal right after they become friends.
Private Message
All private messages will be stored in this page. Their most recent conversations will rise to the top.
World Map
This is where players appear based on their live location. Song listening activity is available to view.
Global Chat
Players can chat with others in the surrounding area through a public chat. Other profiles can be viewed.

The prototype was technically streamline but the fun found in gaming was lost.

We would conduct post-prototype surveys to get better insights about the new prototype we created. Overall, we would see a vast improvement of enjoyment and simplicity over our first prototype. From the survey, we gathered these key takeaways that helped formulate what we improved on and how we should progress in creating our prototype.
“I think in an attempt to make the interactions more structured, organized, and specific the demo lost some of those fun, playful qualities that make the prospect of sharing music with other people appealing."
-Anonymous, testing user
Participants largely felt that this iteration was easy to understand and concise, however, they missed the fun element of a regular game.
Positive Insights
It was a more enjoyable and interactive experience to communicate and share music with other people.9/9 of the testers would comment how the experience was a lot smoother to navigate and understand.

Improvements to Make
How can we create a greater social freedom of communicating and sharing music with other people near us?nside of a div block.

Results

Taking the insights from user testing, we added elements of enjoyability back into the prototype.

To reflect our gamified experience with customizable characters, we chose a color palette and fonts that reflected the playfulness of the app and that felt inviting to users. There are both 3D and 2D elements to keep the users' interests while still maintaining the integrity of the design.

TuneIn! Monsters

We wanted to create an incentive for people to share their music tastes with others. Through the medium of “creatures/monsters,” we would facilitate the desire to share and talk with others, ranging from strangers to people you already know.

See What Others Are Listening To

Users are allowed the ability to see what music other people are listening to, as well as view a greater view of their profile if they are interested in viewing it.

Talk Locally

Users can engage in a global space by being able to chat with those who are close to them. Being able to share music they like or talk about whatever is on their mind. From our prototyping session, we found that people enjoyed being able to communicate with people who are local to them, creating fun engagement and conversation.

Next Steps

There is a future for making an even more refined version of TuneIn! through user testing.

Refine the prototype.
Further developing the prototype and increasing the overall ease of use and interactions

Implement Spotify Application and location services
Integrate Spotify/Apple Music data to inform the character creation, and use location services to find real people nearby and interact with

Conduct more user testing
Receive additional feedback on what we can improve on for the prototype, and see if our desired goals were effectively communicated

I learned...

Takeaways

The Importance of Communication
When working in a group, it is important to align goals and set deadlines to meet. We experienced a few bumps in the road, but overall ended up with a team that shared the same mindset and that worked well together.

How we can design to promote social communication
During our brainstorming, research, and designing processes, we were challenged to create an app with a novel concept, which we struggled with at first. However, we were able to combine the concepts we wanted to integrate into a more unique platform.

Lots of iteration
With our user research, we found issues with character creation and chatting with others, the two main aspects of TuneIn! We struggled with streamlining the process of making the initial user profile in order to allow users to jump into the virtual world. There were many iterations comparing the global chat and the 1-1 messaging inbox.

Prototyping the purpose and usage of the product
Prototyping without a Figma prototype has given us a lot more insight about the feasibility of our product and the social space we are engaging in. Being able to see the complexity and flow of how a music-centered social can actually be emulated like.

Finding the beauty of design through every step of the process.

KATHLYN