Bandcamp — Case Study (Conceptual Project)

Project overview

Bandcamp is a music sharing platform where fans can buy music directly from artists and labels. 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.

Brief

· Create a platform for musicians to perform live on Bandcamp

· As a member, you can receive recommendations of live-streamed gigs based on previous music you listened to

· Fans will need to be able to donate to the artist

Process overview:

Empathize: Screener questionnaire, User interviews, Competitor analysis

Define: User persona, Experience map, Storyboards

Ideate: MVP, Sketched wireframes

Test: User testing, Iterations, Animating and prototyping

Timeframe < two weeks

Empathize

User Interview

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.

Affinity Map

It was at this point that one thing became very clear. 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.

Define

Competitor research

There were two sets of main competitors that we looked at for our competitor analysis. Those who outsource the player to a third party (direct) and those who offer a full streaming platform (indirect). The direct competitors are music companies that offer either purchased or streamed music. The indirect competitors all have streaming capabilities, some of which are used by direct competitors. Bandcamp will be offering a live stream platform and therefore will not be using a third-party provider.

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 from the research, we created our persona (Arabella) persona based on key insights from the user interviews

was created

looking at how the experience currently was for Arabella by using a competitor’s product and creating an experience map to locate the 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

Ideate

MVP

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. The research showed that 89% of users (118) choose to watch music on desktop. This allowed them to not only get the full functionality of the site but also provided a much larger picture to watch. Something that is important for live events, especially if you’ve ever watched one of Sophie Elis-Bexter’s live Instagram videos. Not exactly a live gig but very entertaining with her trying to sing with 3 children running around causing mayhem.

Lo-fi Prototype

I chose to do it based on the MVP to avoid any of my biases influencing the initial design. This allowed me to base the key decisions on the research rather than how I wanted it to look and feel.

Test

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.

As this was only the MVP, there was feedback from users that were reoccurring, such as “I would normally expect to see a chat bar” and that further feedback was needed after donating. As it was in low fidelity some points came up about navigating through the site seamlessly, but we were sure that when we increased the fidelity all of the concerns would be addressed. 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.

Testing insights plotted on axis (1st round of testing)

After selecting the 7 insights to address in our next iteration (circled in red): adding an identity for the music feed section, disclosing the total donation throughout payment, pop up for sharing function, clarification of what “live” actually is, making the artist page clear on how to get to the live stream, and adding a chat function that was hideable. 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.

Low-fi prototype (annotated for 2nd round of testing)

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.

User testing over zoom

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.

Axis of functions

Final Wireframes

Live stream key pages from high-fi wireframes

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.

I took the lead and animated it using Principle (PrincipleForMac) in the hope it would show off the vision better. I had never used the software before but had heard that it was good for animation.

Final Prototype Animation

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.

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.

Software used

Sketch, Adobe Suite, Miro, Keynote, Principle, Zoom

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.

Explore integration with Bandcamp's current app or make it a complete stand-alone app.

--

--

--

Love podcasts or audiobooks? Learn on the go with our new app.

Recommended from Medium

We helped ATG learn to trust the design process and develop their new game, Big9, in a…

VirgoX Telegram Sticker Contest

Finest-5 Product reads #23

Product Update 7–13–17

Being colorblind in a world full of color

A hand drawn picture of wireframe designs for a product.

Design Thinking — unlock your brain (part 2).

001 | Daily App Review | UpRight

Woman using UpRight device and app

Research Methodology

Get the Medium app

A button that says 'Download on the App Store', and if clicked it will lead you to the iOS App store
A button that says 'Get it on, Google Play', and if clicked it will lead you to the Google Play store
James Pearson

James Pearson

More from Medium

Case Study: ‘GreenTime’- Concept App

Ironhack project 2 —  E-Commerce/Practitioners Website

Case Study: Sukkari Website

MyPetCare Application Case Study