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.
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
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
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.
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.
Usability Test
Affinity Map
Priority Revisions
Brand Identity
High-Fidelity Mockups
Live Prototype
Project Goals
Product Roadmap
Sitemap
UI Requirements
Task Flow
User Flow
Low-Fidelity Mockups
POV Statements
HMW Questions
Brainstorming
Research Plan
Market Research
Competitive Research
Heuristics Evaluation
User Interviews
Empathy Map
User Persona
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.
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.
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.
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.
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!
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.
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.
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.
App settings can only be accessed on the user's profile screen, which can be difficult to locate following up on the previous point.
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.
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.
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.
Bold = Goal met
Italic = Inconclusive, not enough data
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.
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.
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 ⟶
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.
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.
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.
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.
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.
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.
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.
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.
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.
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.
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.
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.
Evaluative Research
Think Aloud Testing
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.
***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.
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.
Onboarding
Music Cards
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.
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.
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.