Bandcamp and The User Experience

Bandcamp is a website that invites independent musicians to freely distribute their music through it. At no charge (besides a 15% cut from each sale after the fact), a band can set up and customize their own page to stream, promote and sell their songs/albums/merchandise in a number of combinations. Once your music is up and available, you can track statistics as well for how many people are visiting, listening (which is broken down into full/partial/skipped plays too to give you meaningful insights) and buying. You set the prices and, if you’d like, your audience can too. It’s an incredibly powerful tool and it’s only getting better lately, especially in the department of interactive design.

Uploading Your Music

Last month The Commonwealth put out our first LP, Emerald City Blues, exclusively through Bandcamp and we’ve been using the website since early 2011 when we debuted with our EP, Souvenir. There’s a lot of reasons we gravitated towards Bandcamp and continue to return to it. Uploading Souvenir through the website last year wasn’t so bad of an experience, being a slimmer six-track 20+ minute album. When we were ready to do the same for ECB, I realized it was going to take a lot longer with an album twice its size and at a higher bit-rate. To my surprise, a few clever revisions to the uploading process were recently made.

The album uploader now lets you prepare multiple uploads at once (audio files too, if you pay for a pro account), and what was most helpful to me was being able to queue up all the liner notes and details for each song while waiting for big audio files to process. Instead of a page for every track within an album, they’ve nested the ability to edit each track within one page for an entire album. With credits and lyrics to be associated with eleven tracks respectively, it’s a considerable leap forward for the artist’s user experience of Bandcamp to be able to push so much content within one page, and to see the difference at a glance. Not only that, but the option to “draft” and view a preview of your page before going live with it is a much welcomed feature.

“We’ve dramatically streamlined the album creation and editing process. You can now modify an entire album’s worth of tracks in a single UI, and save drafts of your albums as you work on them. We’ve also switched uploads to use HTML5, so you’ll no longer see that annoying Flash permissions dialog every time you add new music. And you can now specify any track in your album to be featured, meaning that track will be cued up first when fans visit or embed your album.” -Ethan Diamond, Bandcamp Blog

Mobile Friendlier

I’ve been working on mobile app and web designs for iOS devices since I got out of school, but it wasn’t until earlier this year that I actually owned one that could run any of them. We tend to monitor our Bandcamp page a lot on the onset of a new release, and lately I prefer to check it when I have some downtime between everything else, but on my phone. I’ve really come to appreciate mobile friendly versions of websites, scaled to fit the screen and make the content easier and more enjoyable to see. Upon realizing that Bandcamp hadn’t offered that yet (nor an official application), it felt underwhelming to have such a great service be pretty painful to use on a smaller device. But then I’d remember that we’re not the only ones visiting in this way–worst of all, the vast majority of visitors are probably stopping by via handheld screens, and probably having an unforgiving visit especially if it’s their first time to the site.

A couple weeks go by, and it looks like Bandcamp has had a fix to this scenario in the works: every Bandcamp page is suddenly mobile friendly. They’ve written a post about the service-wide update on their blog, not to mention Billboard’s own article. If you’re reading this from a desktop and want to see the effect, simply go here and shrink your browser until you see the page transform. It’s a deep addition to Bandcamp on a few levels:

  1. It’s a website, so it’s not a proprietary piece of software that needs to have updates or be downloaded from a digital marketplace for everyone to be on the same page. It’s easiest to share Bandcamp pages with a direct link anyways, so this is just another way to add dimension to that behavior. The only bar to entry is whether or not you have internet access.
  2. It’s thoughtfully designed. Album art at the full width of the screen, and a featured song right beneath it. Entire tracklists with big play buttons and fluid navigation to individual song pages. Album info falls afterwards in the order you’d expect it to, along with the rest of the details a band might submit to their page. Bandcamp understands that people are going there to hear independent music, so they waste no time in letting them get to it, which feels even more evident in the mobile version of their layout.
  3. It’s familiar. The wireframe of a Bandcamp page hasn’t really changed since the website launched, mostly I’d argue because it’s still effective. The mobile version is a nice extension of Bandcamp’s visual flexibility, not an excuse to make jarring overhauls nor hit the reset button. Maybe it was long overdue, but it’s refreshing in an age where rapid prototyping and iterative design have a habit of putting user-experiences through a facelift or two every year. It feels complete and it works.

Desktop view on the left, mobile view on the right.

Bandcamp is a good choice for digitally distributing music not only because they take a smaller cut than other places, but because they demonstrate how they’re in touch with their users, both for artists and listeners. It’s built by a smart group of people who know their audience, providing independent artists with a space and tools to empower them–which is all we really mean when you hear somebody say the words, “We’re indie.”


Published by

Andrew Kuhar

Designer by day. Musician at heart. Video game enthusiast. Taco connoisseur.

Leave a Reply

Fill in your details below or click an icon to log in: Logo

You are commenting using your account. Log Out /  Change )

Google+ photo

You are commenting using your Google+ account. Log Out /  Change )

Twitter picture

You are commenting using your Twitter account. Log Out /  Change )

Facebook photo

You are commenting using your Facebook account. Log Out /  Change )

Connecting to %s