Co-Lab Music Collaboration App

Co-Lab’s home screen

Introduction

A musician's biggest struggle is translating the song ideas that sit in their head, into a project in their digital audio workstation. Growing up, I was a musician surrounded by a bunch of other singers and instrumentalists. We all had the desire to produce our original songs, but felt held back because of the extensive knowledge and skill it takes to do it all yourself.  Collaboration is the fuel for bringing creative ideas to life. While working with others seems to benefit us most, this opportunity is not always at our fingertips.

Co-Lab is a mobile-app community for musicians and producers to connect and create. Users will create public projects that contain their lyrics, demos, and any necessary song information. These projects are posted and available for other musicians and producers to collaborate on.

My Role

I had the opportunity to complete this solo project being a UX Design student with the USF/Springboard Bootcamp. The prompt was of my choice and all research and designs were done by me.

The Problem

If people don’t know how to produce their original songs, they will always have to rely on others. Depending on others can cost you time, money, and sometimes a sacrifice of your full creative vision.

Discovering The Reason Musicians Leave Producing To The Producers

The process started with some desk research scrolling through endless Reddit chat groups and articles, discussing the frustrations with music production.

This survey from Aden Russel gave me an inside look at what musicians are struggling with most, and at what point they’re at in their production journey. Most people have no idea where to start when creating a song. We can also see that 446 people are just starting to learn music production itself. This tells me that there are a lot of people wanting to know where to start, but no resources to tell them how to. I decided to look more into the frustrations that people were expressing through Reddit groups.

It was brought to my attention that people's struggles were actually centered more on specific problems. Mixing, writer’s block, and inspiration were three of many obstacles that people faced in their experiences of creating their own songs.

Learning From My Competitors

Sound Better and Dribbble are two companies in the space of collaboration for creatives. A heuristic analysis was done in hopes of learning from their successes and mistakes. These three things were the main focus in my analysis:

-Visibility of System Status

-Consistency and Standards

-Aesthetic and Minimalist Design

Dribbble is a platform for designers to share their work, collaborate, and maybe even get hired on a project. While they were good at letting their users know what state they were in (Visibility of System Status) and had a superior aesthetic design, they fell short in their Consistency and Standards. Several buttons and pages didn't have a self-explanatory use, especially for first time users. 

Sound Better is a music collaboration website with a more similar concept to Co-Lab. They scored high in Visibility of System Status and were very Consistent as far as their use of Elements, but when it came to aesthetic and minimalist design, I wasn’t as impressed.

While both platforms provided a great space for sharing and working together, they felt a little cluttered and not task/goal oriented. The competition’s main focus wasn’t on the collaboration aspect.

User Survey

An 8 question screener survey was sent out to recruit participants for interviews. This helped me understand the target audience.

The demographic focus was on understanding people's musical knowledge and passion for production.

User Interviews

Affinity Mapping

The key quotes, feelings, and facts from my participants were coded into categories. The information was organized by writing it on sticky notes and grouping them together. This map described the experience of beginner producers.

Insights

I discovered that every time a user discussed their problem with music production, it relayed back to them not having anyone to mentor them and help them in the areas they needed. Most positive experiences that were spoken of consisted of working with another person. Looking at the wall covered with sticky notes of frustration, one big solution stuck out for every category created:

Collaboration

Personas

I created three personas based off of the issues and frustrations of my users. Each of these perspectives would help me achieve a more user-centered design. They make it easier for me to empathize with my users and understand their struggles.

Persona 1 - Vocalist

Vocalist Vicky is a persona created after my interviewee Alexis. This is a user who is vocally talented and can song-write very well, but when working in software and with any instrumentation, there is a barrier.

Persona 2 - Instrumentalist

The Instrumentalist Ian persona was inspired by my interviewee Cameron. This user is very experienced with playing Guitar and enjoys working in software at times, but when it comes to complex tools and being able to create his ideas into full songs (including vocals), he is not fully capable.

Persona 3 - Beat Maker/Producer

Beat-Making Brian is created from the characteristics of my interviewee Jake. This user works mostly within software, so he has an advantage when working with digital instrumentation, but uses minimal tools in the software. His lack of ability to compose and create outside of software is his biggest obstacle with producing music, and the type of music he would like to produce.

The questions that drove the ideation process

How might we reduce the complexity of Audio Software?

How might we help people feel less insecure about sharing their songs?

How might we help people find musicians to collaborate with?

How might we help people find a voice or instrument to use in their song?

Beginning To Brainstorm

Several days were spent coming up with different solutions to the problem. Once there was a good enough list to select from, I eliminated over half of that list and worked on elaborating the solutions that best solved the issues. 

The top three ideas:

⭐ Collaboration Platform - An application where musicians have a place to connect and work together. Artists will have a profile where people can request to work with them. There is even an option to create a project for your song, that way others can collaborate and feature on your song, vise versa, you are also able to collaborate on their projects. 

Digital Audio Workstation Tutorial - This tool will share the screen with your DAW, taking you through the steps to learning the tools. This will be like a beginners guide and tool book, giving you all the information and steps you need to get started.

Daily Production Challenges - A very similar concept to Daily UI Challenges. This idea consists of a website that gives users a specific production challenge every day. One day it could be producing a minimalistic type beat, while the next it could be editing just the vocals on a pre-recorded track.

User Stories

Staying aligned with users' needs is my top priority. User stories will help me keep in mind the features that should be incorporated in the design to bring the most success to the users. These features were prioritized with the MoSCoW Method. 

MoSCoW ⇾ Must have, Should have, Would have and Could have.

User Flows

These flows show the red routes (task) of the users that would allow them to successfully create a song collaborating with someone else.

My Ideas On Paper

Sketching ideas on paper, I began to get an idea of how the interface would look. These sketches were focused on the red routes.

3 Guerrilla test were conducted with the sketches. The pages were linked together using Marvel and tested before low fidelity screens were created. I made some improvements to my design based off of the findings:

Some screens were missing important elements. When participants ventured outside of the route planned, they had trouble getting back to where they needed to be. This was due to missing buttons and necessary elements. I made sure moving forward every screen had the necessary elements to get around.

Contrast needed to be added between the main Users profile and projects, and the collaborators. I noticed users were not able to differentiate their own projects and profiles from somebody else's. The design was changed to add variation. 

Transforming The Sketches Into Digital Wireframes

These low fidelity mockups better represent the design and how it will appear for users. Using these screens, wireflows were created of the three red routes, so the process could be easier visualized.

The Brand Vision

A style guide was then created which includes the colors, fonts, iconography, elements, and imagery that will be used in the app.

Testing My Design

Two rounds of five usability tests were conducted with a high fidelity prototype. Each test was on a different participant. A series of tasks were given to participants to complete. The tasks coincided with the red routes created. 

Some of the tasks consisted of:

-Creating an account

-Locating the project page and creating a new project

-Searching for profiles of drummers

-Requesting to collaborate with a drummer

Improvements

Through the two rounds of testing, It was noticed that participants were able to complete all of the tasks in a quick and efficient manner. Many of the users spoke positively on the simplicity and minimalism in the design, and their actions proved they could easily navigate through screens and complete the given task. I did notice some parts of the design that could be improved, and many users had recommendations for what they would like to see.

1. Users wanted to see more of the process of selecting song needs.

It was noticed during test that 3 out of 5 users were pressing on the green buttons with an “X” continuously, because they thought that their task of selecting song needs was not in a finished state. When redesigning this screen, showing more of the process of selecting song needs was made a priority, so users didn’t continue pressing on the finished state of a button. To the right is the improved design. A container that pops up asking you to select your song needs was added. The second round of testing showed this improvement works.

2. The filter page needed to flow better.

Users were not scrolling on this page to look for the genre’s and roles they needed to select. Adding an animation to the swipe text and arrow, so they come from the right a few seconds after entering the screen, encourage the users to interact with the horizontal swiping on this screen. The title was also changed to stick, where as before it moved with the bubble elements. This change made the design feel less stagnant and added purpose to the moving bubble design.

3. Several users wanted the option to leave a review on a collaborators page.

Adding a review feature to Co-Lab profiles allows other users to see the history of the person they may choose to work with.

4. Changing the color of the search bar for users to recognize and remember where to search.

Adding more of a contrast enables users to see the search bar better and remember where it is. The #FFFFFF white against the background also complies more with WCAG standards

The Outcome

After two rounds of testing, the design was proven to be user friendly and helped users to complete their goal of finding a musician or producer to collaborate with. 

This project allowed people to upload their own song ideas and demos as projects, for people anywhere and everywhere to collaborate on. I got a deeper look into what was keeping these talented creators with outstanding ideas from making them come to life. Co-Labs purpose is to provide an opportunity for that song sitting in that vocalist's notebook, to become the next chart topping track.

As a UX Design student, through research and ideation methods, I was able to understand how to cater to users' needs. This resulted in how people’s behaviors translate into what I design.