mockup of bandcamp - add a feature project

Add a Feature - Bandcamp

Web Design, Feature Design, Style Integration
Project Brief
My task was to collaborate with my mentor and formulate a new feature to add to an already existing product. In this case, and because I'm also a frequent user, I chose Bandcamp. The new feature, which I called "Crate Digging" has been integrated into Bandcamp's existing design and utilizes features already present on the site.
Timeline
November 2021 - December 2021, additionally January 10 - 16, 2022
Design Process
  • Research: Competitor Research, Surveying/Interviewing Bandcamp Users, Creating Journey Maps, Writing up a Feature Proposal
  • Information Architecture: UI Sketches, User Flows, Simple Site Maps
  • Design: Hi Fidelity Mockups
  • Testing: Usability Testing, Data Analysis, Priority Design Revisions

Background

Bandcamp is, in case you, dear reader, are unaware, a music hosting website that has been championed by the DIY Music community worldwide as one of the only equitable spaces online for musicians to host their music. As opposed to Spotify, Bandcamp is positioned more like a record store than a streaming service (this is important later), with their main function being the direct sale of music from artist or label to fan, with an average of 82% of all money spent on site going directly to the artist or label selling the music.

Research

The Market

Bandcamp's niche is relatively unique in the music industry. As previously stated, their positioning more as a record store gives them an edge as far as artists are concerned because of their much higher payouts. Compared to Spotify, who's miniscule payouts per stream have been bemoaned by behemoths of the industry like Taylor Swift, Bandcamp is a much better value proposition for selling records. However many artists opt to put their music on both platforms with more dedicated fans opting to support artists directly by buying on bandcamp.

Soundcloud, while operating on a similar independent music hosting model, embraces a more feed based structure that favors pushing new music to their listeners than supporting "older" releases from artists.

Additional services surveyed were CD Baby and Distrokid. Similar to bandcamp, they allow independent artists to host their music without the assistance of a record label. However, their main function is to manufacture physical merchandise or host artists music on major services like Spotify and Apple Music. Because of this, artists would still be subject to the miniscule payouts that modern streaming services offer.

This laid bare the strengths of bandcamp. However, I still needed to make sure I was getting a bigger picture from other artists. Therefore I set out to perform...

Interviews and Making Journey Maps

Because part of this project was to discover what needs haven't been met by Bandcamp, I opted to interview DIY musicians from around the Atlanta and Athens, GA scenes to get a clearer idea of not just how they typically used Bandcamp, but also how they felt before, during, and after their album releases. To that effect, instead of just conducting a user interview, I had each artist make a rough journey map of their emotional states based on each of their last album releases. They are collected here:

Journey map for Drew Kirby - bandcamp research

Journey Map Analysis, Persona Creation

As you can see, each artist interviewed had a marked downturn in emotional state post release. This was attributed by them to the slowing down and eventual cessation of press, album purchases, and general "buzz". I too, have experienced this because, full disclosure, I too have released a bit of music through Bandcamp. By taking each of these artists interviewed (and removing as much of my own experiences and expectations as possible) I developed a user persona to help guide the creation of my new feature. Meet David:

user persona for bandcamp research : the fictional David L

Crate Digging - A Feature Defined

Truth be told, we actually ended up rejecting my first feature proposal. It was going to be a Spotify integration built directly onto bandcamp. However, after a frank discussion with my mentor, we discovered another, better path: leaning even harder into Bandcamp's positioning as a Record Store instead of a streaming service. I cross referenced my findings in my interviews (especially with Will Ingram of the band Wieuca) that the social functions of Bandcamp seemed underutilized, and that they didn't seem to have any fully integrated recommendation feature, with the physical actions performed in the physical record stores bandcamp is emulating: browsing the record crates, an act also known as Crate Digging.

This feature integrates what I love about browsing at a physical record store with the affordances that only a digital space can afford: both random and curated "record crates" to browse with the option to infinitely scroll through like one can only do digitally. The options for create digging are only as limited as the artist generated tags that already exist on Bandcamp: essentially infinite.

The nitty gritty: 

  • There will be 2 kinds of crates: Curated, and Tag Based by default.
  • Curated Crates can be created by users from their collections, bands, and by Bandcamp Daily (the in house blog). These will emulate "Staff Picks" crates commonly seen at record stores. Each album in a crate can have a small blurb attached to it
  • Tag Based Crates (the default setting) are generated by using Bandcamp's already existing tag system. These are akin to going to any section of a record store and just browsing.
  • The tag based crates will be continually populated by Bandcamp's library. Because artists generate tags themselves, there can be nearly infinite tags to explore throughout the millions of albums already uploaded to browse through.
real world crate digging at a record store

Information Architecture

UI Sketches

To create the design for the feature, I used the format of Bandcamp's already existing feed feature and sketched it out as an additional tab within that feature with distinct functionality explored in this sketch gallery:

UI Sketch for bandcamp crate digging feature

Simple Site Map and Task Flows

After defining the Crate Digging feature through sketching, the next step would be figuring out how it would integrate into the existing architecture of the site. Because I was using the format of the already existing feed feature on bandcamp, this proved to be relatively simple.

simplified site map for bandcampsimple task flow for bandcamp project

Design

Hi-Fidelity Mockups

With the clearance of my mentor, we skipped the wireframing stage of the design process because there was an already established design system I would be using. This shortened my designing time by a considerable amount. I utilized the design patterns already used in the existing Feed feature to ensure that the design was well integrated into Bandcamp's current feed layout.

Galleries: Feed, User Crates, Modified Album Page

Mockup for "crate digging feed" bandcamp feature
mockup for "crate management flow" bandcamp proposed featuremock up of individual album page for bandcamp project

Testing and Iteration

Usability Testing

After designing the high fidelity mockups, the next step was usability testing. Collected here are some quotes from the study:

"That was pretty straightforward. I was able to do [perform the test] within 10 seconds. You didn't even have to tell me how to do this"
"It's good that I can make my own crate... because I trust random dudes on the internet's taste over [major publications] these days"
"I love it but maybe adding some way to sort each crate or having sections for each type of crate would make it even more accessible"
"This functionality would definitely help promote the sale of music"

Priority Iteration

Building upon the accessibility considerations posed by one of the research participants, I quickly revised the feed to allow for sorting by using a dropdown and separating the types of record crates for easier browsing using a modified Accordion Menu design pattern

Before

1st iteration of crate digging feed

After

REVISED mock up screen for bandcamp project

Reflecting, and Next Steps

Because of the time constraints of DesignLab, after performing the priority revisions to my design, that was the end of the road for this project. However, I know exactly what I'd want to do if I had more time to work on this feature:

  • additional usability testing post revisions
  • designing an interface for adding user comments on crates
  • adding further social media integration for the sharing of crates
  • and, last but not least, pitching this to Bandcamp for real ;)

Reflecting back, this project was valuable for many reasons. The practice of mindfully going through each phase of the design process is surely important, but the added constraint of working within an established design system will be of the utmost importance when joining a previously existing design team.

Links:

Figma PrototypeBandcamp

Other Case Studies