Collab iPhone
Collab Logo
Collab - Hear It. Share It.

Collab - Mobile App

product design

Connecting The World Through Music.

Collab is a music sharing social network, that connects people to others with similar music taste. The app provides music listeners with a platform that allows them to easily share and discuss music with other listeners.

the challenge

In 2019, Collab saw a clear gap in the market and decided to create a music social network (mobile application), that connects music listeners from all over the world.

After crafting Collab's Brand Identity, I needed to design Collab's feature packed platform.

The high level goals were to:
- Create an intuitive and engaging music sharing platform

- Eliminate the struggle of sharing music with people using different streaming platforms (Apple Music to Spotify and vice versa)

- Allow users to easily find and connect with others based on shared music taste

- Provide artists with music promotion tools that are unavailable on other platforms

TEAM
Youssef Eleshy - Product Designer

Maxim Dymchenko - iOS Developer
PROTOTYPEClick to jump to the interactive prototypeFINAL PRODUCTClick to jump to the final product
CONNECT WITH PEOPLE WITH SIMILAR MUSIC TASTE
Your profile visitors will be able to see the ‘Match Rating’ calculated by the app, your bio and your recently played songs.
SHARE MUSIC with your friends directly
The Direct Messages page allows you to privately chat and share music with your Collabs.
SHARE MUSIC WITH YOUR COLLABS
The Home page shows the feed of music posted by you and by your Collabs. You can like and comment on the posts on your Feed.

DISCOVERY

RESEARCH

Early on in the discovery phase, I realised that one of the key technical requirements was going to be accessing users' music data. To do so, Maxim (Collab's iOS dev) would use APIs that request permission to connect the users music streaming service to their Collab account. Due to the limited researches, the plan was to release Collab with 2 music streaming services, possibly adding more in the future.

After researching the current music streaming services on the markert, I decided to go with Apple Music and Spotify, since they had the largest user bases (60 million subscribers and 130m subscribers respectively), in addition to having well documented APIs, which would be easier for implementation.

In order to improve music sharing, I needed to review the solutions currently available in the market. By considering the competition and determining their strengths and weaknesses, I was able define Collab's value proposition and find a distinct advantage.

User Interviews

To gather in-depth qualitative data, I conducted 30-minute in-person and video structured interviews with a group of carefully selected individuals aged 18 - 30 years old. I prepared an interview script to guide the interview, while also asking follow-up questions based on the participants' answers.

Survey

Whilst conducting user interviews, I also sent out a short Google Form questionnaire to school and university students, as well adults of numerous professions. The purpose of the survey was to collect more quantitative data on habits & behaviours.

key findings

1. The majority of the interviewed individuals regularly share music with their friends by texting the name of the song + artist or by sending a screenshot of the song/album.

2. In a multiple choice survey question (where users could select several options), 48% of the participants said they discover new music via music app recommendations and playlists, 79% said find out about new music on their social media timelines and 93% said they listen to music recommended by friends (via text or in-person).

3. 80% of the participants said they would share music more frequently if the process took less time and effort.

shared foundational features

  • Quick and easy music sharing (Apple Music to Spotify and vice versa)
  • Music Discovery - The ability to find and communicate with other users with similar music taste, and receive music recommendations from them
  • Customisable Profile - To display music preferences

common pain points

  • Long/Daunting music sharing process
  • Receiving poor music recommendations

research synthesis

Affinity diagram

After completing the interviews, I transferred my notes into Miro (digital sticky notes) to identify common behaviors and understand the users' needs..

Collab Affinity Diagram

themes and opportunities

I revisited the collected data to find patterns and pain points experienced by multiple participants. The notes were grouped by themes to identify design opportunities.

Collab Themes and Opportunities

feature ideation

I used the same affinity mapping technique for the feature ideation phase of this project. The goal was narrow down all the clustered ideas into a set of features.

Collab Feature Ideation

feature prioritization

I prioritized product features by evaluating each opportunity based on its value to the product and its relative implementation effort using the “Value vs. Effort Quadrants” framework.

Collab Feature Prioritization

USER INSIGHTS

By gathering data and interviewing a group of participants, I was able to identify personas that represent the behaviour of many music listeners.

Collab User PersonaCollab User PersonaCollab User Persona

wireframes

Wireframes help define the heirachy of items on a screen and communicate what the items on that page should be based on user needs. It is essentially a visual representation of a user interface, stripped of any visual design or branding elements.

Collab Wireframes

usability study - prototype

interactive prototype
I created a high fidelity interactive prototype to obtain user feedback. I conducted all the tests in person, by inviting the user interview/survey participants that previously said they would be interested. This helped me understand and identify patterns and the users' pain points.

user interface

After completing the usability study, I was ready to move forward with the visual design. To ensure a cohesive product design, I refered to the style guide that was crafted for Collab.

STYLE GUIDE

Collab Style Guide

visual design

The visual design features a lot of black and white colours combined with Collab's red as a primary colour and a few other secondary and tertiary colours. This combination provides a lot of breathing room for content while drawing users’ attention to essential elements of the interface.

final product

Collab Mobile App - Music Sharing Social Media PlatformCollab Mobile App - Music Sharing Social Media PlatformCollab Mobile App - Music Sharing Social Media PlatformCollab Mobile App - Music Sharing Social Media PlatformCollab Mobile App - Music Sharing Social Media PlatformCollab Mobile App - Music Sharing Social Media PlatformCollab Mobile App - Music Sharing Social Media PlatformCollab Mobile App - Music Sharing Social Media PlatformCollab Mobile App - Music Sharing Social Media Platform
Let’s Work Together
Get
In
Touch
Get
In
Touch