Bandcamp

Music Live Streaming

Role

Product Design :
User Research, Storyboarding,
Low - High Fidelity Wireframes, Testing, Prototyping & Animation

Goal

To create a hub for musicians to play live on Bandcamp.

Timeline

May 2020

Reflection Summary

Working as a flat hierarchy for the group initially proved to be a challenge until we assigned clear roles.

Due to our passion for the project, we let some bias creep in. This resulted in us looking over the research a second time and recreating our persona.

Overview

Bandcamp is a music sharing platform where fans can buy music directly from artists and labels, who have control over how they sell their music, setting prices and receiving 80%-85% of the profits for their music. Bandcamp began in America in 2007 and over that time $503 million has been paid to artists for their music.

The mission was to create a hub for musicians to perform live on Bandcamp. The service would continue to offer awesome music to its members while supporting the artists during the Covid-19 pandemic.

Quantitative & Qualitative Research

Before Covid-19:

To start the project, we sent out a screener questionnaire to narrow down the specific users to interview and the responses not only gave us a huge list of people who were interested in taking part in interviews but also gave us some early quantitative data about the user's music habits. There were 3 clear age demographics which we split amongst ourselves to interview. I took the youngest demographic (27 and under).
‍
After collating our information onto a Miro board (Miro is an online collaboration tool that allows teams to work on the same canvas together), we found that there were some answers which were common across all three groups. What was surprising was that the oldest and the youngest demographics had a lot of similarities and this meant that our “power user” could actually be older than what we had originally expected (this increased the age of our persona when we created him). We summarised the key insights and put them into 4 categories for an affinity map.

Across all three demographics, the users preferred to watch music on laptops or computers instead of their phones. When we get to the Ideation phase, we would look back on this and decide that we would focus on a computer-first design.

Competitor Research

We identified two sets of competitors for our analysis:
‍
Those who outsource the player to a third party (direct) and those who offer a full streaming platform (indirect).

The direct competitors were music companies that offer either purchased or streamed music.
The indirect competitors all have streaming capabilities, some of which direct competitors used.

We reviewed the key features of each platform and noted down what worked and what didn’t for both desktop and mobile. Spotify and KEXP stood out: Spotify’s familiarity and data-driven recommendations were something we thought was essential, KEXP’s re-looping functionality was a must! Being able to watch from the beginning of a stream while it is still ongoing was something users stated was important to them.

Persona

From the insights generated in user interviews, we created our persona (Arabella).

To help understand Arabella we created an experience map showing her journey in a competitor's product. This helped identify current pain points.

Storyboard

Situation

Arabella is a new mum living in London who is currently on maternity leave. Listening to music is a key part of getting through her day.

Problem

She is spending more time at home, feeling emotionally disconnected from the world, and struggling to build connections to the artists she listens to on her mobile phone.

Solution

She discovers Bandcamp, a music platform providing the most intimate online performances from artists around the world. The live streaming service lets her get closer than ever to artists and fans by building tangible online connections.

Outcome

Arabella develops a connection to the Bandcamp community and has a positive experience through a wider group. She can now connect the live stream to a variety of devices to immerse herself in the experience.

Minimum Viable Product

We used Miro to map out the features we had generated in our design studio (the process of sketching as many ideas as possible based on the user’s needs and voting on the most effective).

We then decided on the must have, should have, could have and won’t have (right now) and generated our minimum viable product.

This consisted of 4 main features:
1. Share button
2. A profile page
3. A donate function
4. Video streaming live content (instead of using a third-party provider)

Initial Wireframes

After creating our MVP, I took charge of the initial sketched wireframes. Starting with a desktop site first and then potentially transitioning to mobile later. This decision was based on the research. The research showed that 89% of users (118) choose to watch music on desktop.

Creating the wireframes as solely the MVP prevented any of my biases being taken into the initial design

Testing

We used Invision to prototype a clickable version of the sketched wireframes and put it to 6 users for the first round of testing. Due to the lockdown, we conducted the majority of these over zoom conference calls.

We also noticed that users were not sure how certain things would work on the player and decided a clearer onboarding process was required.
‍
We went back to Miro and put every point that came up from the testing onto post-it notes to rearrange them based on priority and effort.

We selected 7 insights to address in our next iteration (circled in red). We noted the remaining insights so we could add them in gradually, this was because they were not as important or that the effort/expense was high. By the high-fidelity version most, if not all of these insights had been addressed.

We highlighted the key insights onto the pages above, each colour indicates the group of testers, with each group of 2–3 people tested.
‍
The points that came up on the homepage were mainly confusion on how to sign up, users were getting confused with the mailing list sign up. Further on in the wireframes, the next point that came up was around what details to put to sign up. Users wanted to get into the stream quickly, and therefore having a signup screen where you had to add your payment details or to link Paypal annoyed users. There were points regarding the language used throughout, some were confusing for users.
‍
On the main player pages, users quickly became aware that we had not included a full-screen icon yet. This is where users expected the onboarding for the player to be. Some users also did not like that parts of the player covered the actual video.

We made the changes and then did another round of testing. We mapped the functions that the users needed (or mentioned) onto an effort/importance axis. We decided as a group the items we would then take forward into high fidelity.

Final Wireframes

Using Principle, I added some basic motion. This was to show not only the client but to give the developers an idea of how it could look moving through the pages.

Prototyping & Animation

We created the prototypes using Invision which was extremely helpful for testing but it felt too static and couldn’t show the full functionality.

Difficulties

The first challenge was that as a group we were working on a flat hierarchy and although we had allocated days where one of the group was the facilitator it meant that no one person had control of the decisions. Initially this was difficult but after we let our biases go and let the research guide our decisions everyone was making the same conclusions and there were no disagreements.

Our excitement for the project as we are all big music fans, we were really excited about the project but that initially led us to want to take the platform in different directions based on what each of us wanted in a streaming service.

Next Steps

We didn’t do a mobile-first approach as the research showed that mobile would not be used primarily. To develop the site further for mobile would be the first step. I would also like to explore integration with Bandcamp's current App.

Software used: Sketch, Adobe Suite, Miro, Keynote, Principle

Reflection

This was a great project to work on, it really opened my eyes to make sure the user is always kept in mind. Going forward I will make sure that it’s always about the user and not what I think the user will want.

We were so passionate about the project that when creating a persona, we initially let our biases influence information taken from the interviews. We recreated the persona by going through each insight as a group and approving it to base the second persona on.

Nobody had done any animation before and when we were looking at the prototype which looked really static, I made the decision to try and animate the prototype to give it life. I’m so glad I did this in my spare time. I used Principle and learned the basics in a couple of days which help give the prototype life.
‍