Contact

Work Collection

Bandcamp UI Redesign

Role

Visual Designer

Timeline

1.5 Weeks

Deliverables

Visual Design

Mobile Application

Role

Product Designer

Timeline

4 Weeks

Deliverables

Visual Design

Mobile Application

Introduction

TL;DR : This restructuring is for the iOS app cleaning areas of clutter, optimizing accessibility, and creating a clear understanding of what icons' intentions are.

All done without deriving too far from the original source material.

Bandcamp’s emphasis on creating a platform where independent labels and artists can grow and fans can directly support them was what inpisred me to improve this product for users...as well as myself.

Challenge

Balancing Bandcamp’s established aesthetic with modern usability standards, avoiding changes that could alienate current users. Another key challenge was optimizing navigation for a diverse user base, ensuring clarity and accessibility without adding unnecessary complexity. Inspired by Bandcamp's mission to empower independent artists, I aimed to tackle these paint points and create an experience that elevates both user experience and functionality.

Research

Research was conducted with users who had different needs from a music platform such as personalized artist recommendations, and resources for creators to be paid directly.

User interviews were conducted on the likes and dislikes of the product as well as how quickly they were able to execute actions in the app. Users were also encouraged to give feedback on Bandcamp compared to other music streaming products that they had used before.

Problem

• A lack of understanding as to what was the core purpose of the Bandcamp app and who the app is for. Users who were already on the app seemed to struggle on understanding icons and other mechanics of a personal profile.

• Missing Accessibility features and crowded visuals through out most screens.

Objective 🎯

• Cleaning up the interface on the home pages.
• Adding icons for accessibility (Voice Search),
• Freeing up personal space for action buttons and their text,
• Renovating checkout method for music and physical media,
• Redesigning Bandcamp Weekly online feature, and other UI improvements.
• Designing consistent visuals that will still feel familiar to existing users

Discovery

The discovery page was one of the most challenging as users liked the rough color gradient with each genre button, but still felt that each button was too crowded. Spacing in all components was dramatically improved, as well as a new and defined home bar.
A voice search option was added in new design. All improvements made with the intention to reduce accidental navigation between screens

Music Player

The music player page (bottom right corner) had an issue of integrating a purchase option with its media player, further cramping breathing room needed for users to become immersed in the tracks they are listening to.
The first design was meant to de-clutter any information that takes away from the experience of the music and the album art, and move components that can be revealed with a swipe-up motion. Features like the heart and share icons were added to further personalize a user to the artist. The problem with this design was that it felt mildly unrecognizable to the original design.

In the final design, the company colors were added to the play and scrolling buttons to familiarize users with what they see when they first open the app.
The tracks are now listed in order like the original, to be played and refreshed in the player, and each track now has a dotted action button that can be used to display more information about purchasing or sharing a selected track.

Bandcamp Weekly

The library is where users can find all their history regarding purchases and added songs. The old Bandcamp Weekly button was extremely vague, as users would have to guess it represents a chart of some kind. With the new "Weekly" button, users are greeted with a display of albums, articles, and upcoming featured artists.

The icon for Bandcamp Weekly has changed to a recognizable lightning bolt, and to avoid any confusion and create curiosity. Company colors were also subtly integrated into this page.

Purchasing and Checkout

In Bandcamp, artists can create a tier system for the products they want to sell depending on how much users want to spend. The cheapest being the ability to buy a single track, the mid option being the digital album and all its tracks included. And the highest tier is the digital album included with any physical media produced by artists.

By creating defined bubbles for the different purchasing options, users can clearly identify which product they would like to purchase; the most appealing one to artists being the physical media at the top (third tier). Each tier keeps a description in its bubble for users to compare between buying options. The new design features the original currency & converted at an estimate to the currency of where the user is located.

Conclusion & Learnings 📚

Bandcamp's premise is very promising for creators who want to grow and fund any future projects. Fans can feel even more connected to small creators via a direct donation. With a new design, new users are presented with an attractive way to build up an account for their music needs.

All users deserve something that is easily accessible, easy to find a community in and fun to use. Improvements can always be made to new designs and searching for what users want must always be key for designing a better product. The next step in this project would be creating a new user flow system that meets the expectations of testers.

Looking to start a new project?

Let's Talk!

Looking to start a new project?

Let's Talk!

Looking to start a new project?

Let's Talk!

Looking to start a new project?

Let's Talk!