Bandcamp: Adding a Feature

Adding a feature to an existing mobile app

View Prototype

Project Overview


Bandcamp is a music platform whose mission is to "help spread the healing power of music by building a community where artists thrive through the direct support of their fans, and where fans gather to explore the amazing musical universe that their direct support helps create." Artists are able to sell products, whether it’s digital music, vinyl, t-shirts, tickets, or cassettes, and receive 80-85% of their revenue after processing fees. Their recent "Bandcamp Fridays" initiative has helped allow fans directly support artists by waiving processing fees on the first Friday of the month in response to the COVID-19 pandemic.

While music fans have successfully helped cover rents, mortgages, groceries, medications, and more, many have brought up potential opportunities for improvement in addressing the latter half of Bandcamp's mission for allowing fans to explore the vast universe of music that their support helps create.


  • To design a new discovery feature within Bandcamp's current platform
  • To smoothly integrate added features within the existing mobile app

Project Scope

Mobile design, branding


Figma, Adobe Illustrator, Adobe Photoshop, Hand Drawing, Zeplin


UX Designer (Research, Visual Design, Interaction Design, User Testing)


2 weeks (80 hours)

The Challenge

Fans are struggling with finding worthwhile music in an oversaturated sea of recommendations.

In today's day and age, it can be easy to feel burned out from all forms of media -- whether it's television, movies, books, or music, the constant output of new creative media can be overwhelming to the point where new experiences stop feeling novel. Within the music industry, it's common for music fans to struggle with finding meaningful music that sticks with them in an oversaturated sea of recommendations.

The Solution

Help users build meaningful connections by humanizing their music experiences.

While computer generated algorithms are great at suggesting music through objective and quantitative data, we lose a degree of personality by stripping these recommendations of their subjective qualities that only a human ear can detect. Encouraging users to build their own connections through music -- be it with artists, albums, or even other users -- is a potential solution in addressing the burnout many listeners tend to experience while navigating the vast universe of music.

Why Bandcamp?

Bandcamp's mission differs from many other traditional streaming platforms in that its focus is set on both the fans and the artists. With the recent successes of their Bandcamp Fridays initiative, it is clear that there is a demand for this direct connection between artists and fans that cannot be found through other platforms.

Design Process

5. Test

Usability Test

Affinity Map

Priority Revisions

4. Prototype

Brand Identity

High-Fidelity Mockups

Live Prototype

3. Ideate

Project Goals

Product Roadmap


UI Requirements

Task Flow

User Flow

Low-Fidelity Mockups

2. Define

POV Statements

HMW Questions


1. Empathize

Research Plan

Market Research

Competitive Research

Heuristics Evaluation

User Interviews

Empathy Map

User Persona

1. Empathize

  • People use the Bandcamp app to stream music on their mobile devices
  • People are willing to discover new music 
  • People are willing to support their favorite artists
  • People listen to music recommendations from people they follow
  • People are open to sharing music with friends and followers

Research Goals

Research Plan

  • Identify Bandcamp users and their goals, needs, frustrations, and motivations
  • Collect user demographics of users on Bandcamp
  • Discover key trends among music-related mobile apps
  • Understand a user’s journey within Bandcamp’s mobile app
  • Determine strengths and weaknesses of competitors of Bandcamp

I created a plan to assist in empathizing with users by compiling overall goals, questions, and assumptions relating to Bandcamp's mobile app.


I began my research by analyzing data that is readily available to understand industry trends, demographics, and company-specific strengths and weaknesses related to Bandcamp's user base.

Secondary Research

I analyzed current trends in the music industry and general user demographics. This shapes a general image of what the target audience is and some of their broader goals and motivations related to music.

Market Research

Comparative Analysis

I conducted additional research on Bandcamp's top competitors, noting key strengths and weaknesses that set them apart to gather further insights on what succeeds within the music industry from a business' point of view.

Direct Competitors

Indirect Competitors


After learning more about the music industry and related competitors, I began searching for more personalized findings by conducting research on a first-person basis.

I gathered users of Bandcamp's mobile app for interviews by reaching out  to various music communities on Reddit, Discord, and Slack. After finding a total of five (5) participants, I began conducting 1:1 interviews to seek insights on their personal experiences with Bandcamp and with music.

User Interviews

During user interviews, many participants were willing to share music on Bandcamp that they either created or supported. These albums are shown below, and will be used for future project screens in wireframes and prototyping. Check them out!

Artist Showcase

by Luftjutsu
by Sally Pilgrim
Wasted Years Together
by Pale North
Invisible Ax
by 4th Curtis
by Sara Finkle
by Giraffage

I broke down key statements derived from the user interview transcripts and sorted them into identifiable patterns showing common themes and occurrences between participant interviews.

Using the top five (5) most common patterns, I drew insights to narrow down five (5) key user needs that I will focus on for the define and ideation phases of the project.

Empathy Map


  1. Users like to bond over shared connections made through music.
  2. Users feel good about helping out artists in times of need through direct support.
  3. Users seek humanized music recommendations from other users over algorithms when searching for new music.
  4. Users treasure personal connections with artists they listen to.
  5. Users feel burned out from the selection of music available nowadays.


  1. Users need to be able to share their personal music experiences with other people.
  2. Users need to see how much their support has benefited artists.
  3. Users need to identify with other people’s music tastes.
  4. Users need to be able to have meaningful interactions with artists.
  5. Users need inspiration for new types of music

After gathering insights, I took to the existing Bandcamp iOS app to assess its usability in its current state through Nielsen's 10 heuristic principles. Below are some noteworthy concerns that came up during this evaluation.

Heuristics Evaluation

Match between system and real world

Navigation icons for a user's profile (heart) and Bandcamp's integrated radio (waves) may be misleading to new users as they do not bare resemblance to their expected iconography.

Flexibility and efficiency of use

App settings can only be accessed on the user's profile screen, which can be difficult to locate following up on the previous point.

Help users recognize, diagnose, recover from errors

Due to iOS limitations with selling digital music, users are given directions for how to circumnavigate purchasing by using the Bandcamp mobile website. This restricts the possibility of digital music sales when considering new features for the product.

With all of the insights gathered from market research, competitive analysis, user interviews, and empathy mapping, I generated a user persona that reflects users’ goals, needs, frustrations, and motivations within music. This persona will represent the primary user group throughout the define and ideation phases. Meet Ally.

User Persona

Ally is a 26 year old student who has been attending online classes since the pandemic hit. During lockdown, Ally looked to music to fill up her spare time by searching for new artists and interacting with local bands and musicians. She has been working on building her personal vinyl record collection and is excited for venues to start opening up again so she can see her favorite artists and attend local gigs.

  • People use the Bandcamp app to stream music on their mobile devices
  • People are willing to discover new music 
  • People are willing to support their favorite artists
  • People listen to music recommendations from people they follow
  • People are open to sharing music with friends and followers
  • Identify Bandcamp users and their goals, needs, frustrations, and motivations
  • Collect user demographics of users on Bandcamp
  • Discover key trends among music-related mobile apps
  • Understand a user’s journey within Bandcamp’s mobile app
  • Determine strengths and weaknesses of competitors of Bandcamp

Assumptions (Revisited)

Bold = Validated by data

Italic = Inconclusive, not enough data

Before moving onto the define phase, I reviewed goals and assumptions made in the research plan and checked if they were either validated by research or inconclusive due to insufficient information. This will further define a path for generating ideas to address user goals, needs, frustrations, and motivations.

Research Goals (Revisited)

Bold = Goal met

Italic = Inconclusive, not enough data

Before we continue...

2. Define

I began to brainstorm potential solutions by framing user needs from Ally's point of view, and created POV (point of view) statements and HMW (how might we) questions from the user insights gathered from the empathy mapping exercise.

POV Statements + HMW Questions

Now that we've defined some pain points from the user, we can start addressing these problems through various methods of brainstorming. Once we've generated ideas, we can start strategizing by narrowing down potential solutions that will help inform design when building the product.


Using the HMW questions revealed in the previous exercise, I began brainstorming potential solutions to each question through a mind mapping exercise so as to break down each problem and generate multiple solutions taking all factors into consideration. The exercise was completed a total of ten (10) times, twice for each HMW question.

Individual Brainstorm

View Document ⟶

Afterwards, I conducted group brainstorming to get a fresher perspective from other individuals with unique experiences so as to explore a wider variety of potential solutions.

View Document ⟶

Group Brainstorm

3. Ideate

With the solutions from the mindmapping exercise in mind, I can start selecting features and considerations that will address the problems defined in research. I created a Venn diagram comparing business goals and user goals with technical considerations to identify overarching project goals that will assist in knowing which features to move forward with by determining whether they meet common goals considered for the project.

Project Goals

I used my mindmapping exercise and additional competitive analysis to identify  features that address the project goals identified in the Venn diagram. These features were then prioritized by their potential impact on the product and the cost and effort required to implement them.

Product Roadmap

Information Architecture

With the primary user identified, potential features considered, and overall project goals established, I can now focus on the structuring, labeling, and organization of content for the product. This begins the early stages of interaction design.

I created a structure for the product to lay out parent screens, child screens, and features as they are in the current existing iOS app. I then selected key features from the product roadmap based on their priorities and number of goals accomplished through each feature, and implemented them in the app's current framework.

App Map

I then put together a fluid document to detail specific elements and features that will need to implemented for both the designer and the developer to reference.

Tasks were created based on the user persona’s goals, needs, frustrations, and motivations identified during research. These tasks address user needs and how they would be fulfilled. Each task was then elaborated on to dictate what essential pages, features, and actions would need to be created in order for each task to be completed.

This document will be referred to and updated throughout the ideation phase as sketches and wireframes are developed.

UI Requirements

User Tasks

  • Ally wants to find new music that suits her tastes.
  • Ally wants to find users with similar music tastes.
  • Ally wants to write about a memory she had with a song she saved.

Screens to Design

  • Home
  • Search
  • Music Roulette
  • Music Roulette Settings
  • Profile 
  • Music Diary 
View Document ⟶

I generated three paths using features from the product roadmap to show how Ally would accomplish three different tasks based on the sitemap. These paths help us visualize Ally's journey while using the product, and detail specific actions and pages that will need to be designed and further developed.

Task Flow

Expanding upon the previous task flows, I made a flowchart to visualize different scenarios in which the user would complete the tasks given. Each scenario takes into account different entry points within the user's journey -- whether they are a new user, a returning user, or a stranger to Bandcamp. This diagram determines the different user interactions, decisions, and entry or exit points that may arise while using the product.

With the groundwork for the product laid out and visualized, I can now move forward with creating a user interface.

User Flow

4. Prototype

After determining what elements, features, and pages were required for the product, I was able to create preliminary designs for key pages that will be used for prototyping and usability testing.


To begin wireframing for the website, I made hand drawn sketches including features and elements listed in the UI requirements for the product. Three homepage layouts were created based on market research, competitive analysis, and user goals and needs derived from empathy mapping.

Hand Drawn Sketches (Low-Fidelity)

Before moving forward with higher fidelity wireframes, I familiarized myself with Bandcamp's brand identity by researching and compiling existing elements located on Bandcamp's iOS app and website.

I gathered images of the different types of graphics, colors, and typefaces that were used on Bandcamp's platforms and compiled them in a mood board to reference for inspiration.



View Document ⟶

I then looked at Bandcamp's brand logo and gathered as many variations of it as I could find before vectorizing them for use within this project.

Brand Logo


Style Guide





Bold, Erratic, Dynamic

Building off of the logo design, I created a document further define brand image by specifying fonts, colors, logo usage, and imagery based on the existing platforms and inspiration gathered from mood boards. This guide will assist in designing the user interface for the product.

Using the mid-fidelity wireframes, I mapped out interactions in Figma to provide a functioning desktop mockup of the product for users to interact with during usability testing. Each page was linked in a manner that would allow the user to complete all task flows assigned from the UI requirements document, based on Ally's journey in the user flow diagram.

High-Fidelity Wireframes

Music Roulette

Music Diary

Using the wireframes, I mapped out interactions in Figma to provide a functioning mockup of the app for users to interact with during usability testing. Each task from the UI requirements document can now be acted out through the mockup.


View Prototype ⟶

5. Test

Participants were recruited to complete the three tasks from the UI requirements document by using the working prototype, and were requested to verbally describe their thought processes and decision-making while performing said tasks. These tests help with further understanding user behavior and preferences while using the product, and, most importantly, ensure that the product actually functions and works as expected.

Usability Testing

Evaluative Research



Think Aloud Testing

Participant Criteria

  • Total of 5-10 participants
  • Ages 18-60


Usability testing is complete if all participants are able to complete their assigned tasks with a 90% or higher error-free rate, meaning that a total of 10 or more slips or mistakes would deem the product unusable in its current state.

During user testing, 100% of participants were able to complete the test. On average, participants made 1.8 slips and 1.2 mistakes per test, resulting in a 97% error-free rate, thus completing the test.

Since all participants were able to complete the test within the desired error-free rate, I was able to break down transcripts of each participant test into bite-size statements, and grouped them by common themes and occurrences among each  session throughout usability testing. These insights will be used to generate recommendations to be implemented in future prototypes.

Affinity Map

Understanding icons
Music feed
Saved music
Overlooked features


  1. Users were misled by icons that didn’t match their expectations
  2. Users opted to use the music feed as their first choice for discovering music
  3. Users were unsure of what they could do with the music that they liked
  4. Users skimmed through onboarding and were unaware of key features


  1. Add labels to navigation icons for clarity***
  2. Allow access to music roulette from music feed
  3. Let users view collection of saved music through music roulette
  4. Minimize onboarding with images and examples of interactions for key features

***NOTE: Since we are adding a feature to an existing app rather than an app redesign, this recommendation does not fit within the scope of the project and will not move forward in revisions.

With the design recommendations gathered from usability testing, I can now update the prototype to a more current state.

Recommendations from usability testing were plotted on a matrix based on their impact on the product’s functionality and the effort required for implementation. This well help when working within a limited timeframe, and guide development on a more concentrated path to maximize efficiency.

Prioritization Matrix

Priority Revisions

Using the recommendations from the prioritization matrix, I made revisions to the wireframes to improve usability and functionality before finalizing the design. The recommendations were implemented by order of higher impact to lower impact.

Final Wireframes (High-Fidelity)

Music Roulette


Music Roulette

Music Cards

Music Diary

Adding an Entry

With the high-fidelity wireframes created, I can finalize the prototype and ensure that all prioritized revisions have been picked up so as to maximize usability and efficiency.

Revised Prototype

View Prototype ⟶



Before wrapping up, I created a document containing all UI elements that wereused in the final wireframes and prototypes to reference for consistency across the product as the overall product develops.

This document is to be revisited and updated regularly as changes are made throughout development.

UI Kit

View Document ⟶



Working with an existing app showed me new restrictions that I haven't worked with in past projects, mainly regarding sticking within the overall scope and focus of the project. This was apparent during usability testing when participants ran into issues with iconography and labels. Moving forward, these observations regarding the existing app may be worth bringing up to Bandcamp as potential design recommendations, however they had to be left out of the design as the project's scope is limited to adding a new feature.

Another interesting challenge was the decision to work closely with business goals over user goals. During secondary research, I found that Bandcamp's creators were vocal about Bandcamp being strictly a music platform and not a streaming service, while users expected otherwise. Since this project is proposing a new feature, I decided to work for the intended audience, in this case being Bandcamp stakeholders, so as to set a more direct focus in moving forward with the design.

  • Due to taxes implemented by digital sales by Apple, Bandcamp's iOS app did not allow for in-app purchases of digital music. As a response, features considering digital music sales were not considered during ideation.
  • Interview and usability test participants were gathered digitally from online communities and a personal network of friends and family due to the nature of the COVID-19 pandemic. This may have resulted in potential biases when searching for user insights.

The process demonstrated is ongoing. The product will continue to go through iterations while revisiting various stages presented in this case study throughout development and release, in no particular order. All necessary changes or updates will be made accordingly as the product continues to be maintained throughout the process.


Based on the findings during usability testing, design recommendations may be brought up to a representative of Bandcamp regarding the usability of their iOS mobile app. A presentation would be made documenting the research and testing phases of this project to present a possible improvement for Bandcamp's usability by adding labels to their icons.

With the most recent revisions, the product is ready to be handed off to the developer. All documentation and necessary files will be sent accordingly using Zeplin to ensure that the developers will have all the necessary information to continue with building the product.


Next Steps

⟵ Previous

Next ⟶
Lucky 13