Bandcamp

A heuristic evaluation and redesign of Bandcamp's mobile app

UX DESIGN

UI DESIGN

Background

Bandcamp is an online record store and music community where passionate fans discover, connect with, and directly support the artists they love. This project is to complete a heuristic evaluation of Bandcamp’s mobile app against Neilson’s 10 Heuristics, whilst providing redesigned suggestions.

A study conducted by Statica in December 2023, showed that 71% of digital audio listeners in the UK use a smartphone to listen to music, whereas only 36% of listeners do so using a laptop. It is therefore as important as ever for digital music platforms to optimise their user experience on mobile devices.

Objectives

In order to sharpen my focus, I made some assumptions about the user and their objectives for using the app based on the company's mission statement.
[O1] “Discover” Users want to discover new music [O2] “Connect” Users want to listen to that music [O3] “Support” Users want to purchase that music.

The heuristics of this mobile app were evaluated against Nielson's 10 Heuristics and are referenced through the project in [HX] format.

1 | Homepage

The Now Playing Bar becomes hidden when scrolled, causing confusion as to what song is currently active and makes it more difficult to listen to music [H1, O2]. Genres, artists and songs are non-clickable on Featured page, hindering users from following their curiosity to discover more music [H3, H4, O1] Inconsistent menus and styes are seen across Featured, Music Feed and Messages [H6, O3].

Using a number scale helps establish a clear hierarchy within your design system. It's especially useful when you have various shades or tints of a single color.

Solution

Now Playing Bar is sticky to ensure it's visibility. All menus are consistent even, when purchase isn’t an option; a pop up modal used to inform user and encourage them to discover more music [H3, H4, O1]. ‘Card’ design is used on Messages to improve readability and consistency with the other ‘feeds’ [H6, O3].

2 | Discover page

Additional filters (top right) are not immediately obvious what they do and whether they’re toggled which Ddetracts from music discovery process [H1, O1]. There are options to clear all filters to restart search [H3, O1] as well as no search suggestions / history to trigger memory [H6, O1].

Using a number scale helps establish a clear hierarchy within your design system. It's especially useful when you have various shades or tints of a single color.

Solution

Redesigned and positioned buttons for location and format, making it easier to understand and closer to users hand to make them more accessible [H1, O1]. Screen real estate in the top right corner is used to clear filters, providing the user with improved control [H3, O1]. Recently searched' suggestion to utilise recognition rather than recall [H6, O1].

3 | Album page

Some songs initially appear to be non-purchasable, causing inconsistencies in menus [H4], and lack of information to the user [H1]. When the user reaches the checkout, they are bombarded by a long list of purchase options [H8] in a non-relevant currency [H2], without an explanation as to why they can’t purchase the digital song on their device [H9].

Using a number scale helps establish a clear hierarchy within your design system. It's especially useful when you have various shades or tints of a single color.

Solution

Lock icons on the non-clickable tracks, with a pop up modal to explain that purchase is required to listen [H1]; this then encourages user to purchase [O3]. Purchase options are then grouped by format to reduce visual load [H8] and an explanation is provided that digital downloads are only available on desktop [H1]. I believe this is due to Apple’s in-app purchase fees.

4 | Now playing

The user can listen to songs they’ve purchased or songs that are on their Wishlist. Although you can listen to unowned tracks in full, you don’t get access to simple features such as playlists and queuing, which can be confusing when listening to a mix of owned and unowned tracks; and there is little explanation to the ‘rules’ in play here [H1, H4]. No time scrubbing options on this screen when listening from Bandcamp Radio (even though it isn’t live) [H4]. No suggestion to recover from ‘error’ on empty state [H8].

Using a number scale helps establish a clear hierarchy within your design system. It's especially useful when you have various shades or tints of a single color.

Solution

For owned tracks, queue and playlist buttons are added to the main screen to encourage their usage and therefore more listening [O2]. For unowned tracks, add to Wishlist button is added to encourage purchase [O3], as well as clickable lock icon to quickly indicate the track is unowned [H1], along with an explainer modal to help users recover from error and encourage more music discovery [H8, O1].

5 | Bandcamp radio

The main page is quite overwhelming, with little information available to what the radio is (e.g. conversations or music), and no information about the previous shows. No use of text hierarchy (e.g. bold text) to direction user’s attention. Again, inconsistent menus where purchase options aren't available.

Using a number scale helps establish a clear hierarchy within your design system. It's especially useful when you have various shades or tints of a single color.

Solution

Use of hierarchy, modals and labels to improve readability and encourage listening.

Owned and non purchased tracks
A user can listen to songs that they either own or are in their ‘wishlist’. Whilst you can listen to most songs even if you haven’t purchased them, the current system seems to incentivise purchase through poorer user experience, such as inability to add to playlists and queues, but this isn’t communicated clearly to the user, leaving confusion. Similarly, in albums, often selected songs are available to listen to, but others aren’t, making it difficult for the user to know if they are going to like all the songs before purchasing.

My personal opinion is that the user should be incentivised by more concrete means, for example, all non purchased music is limited to 30 seconds of playback, allowing the user to hear before they purchase as well as the ability to integrate that song with their current listening experience (e.g. in playlists and queues).

Availability to purchase on mobile device
Some songs appear to be unavailable to purchase, and there isn’t much guidance as to why, leaving confusion, and less chance of purchase. After doing some digging on Bandcamp’s desktop site, I realised that all songs are actually available to purchase, but they don’t allow purchases on mobile (I believe due to Apple’s in-app purchase fee). The songs that are ‘available’ on mobile are actually linked to external sites to purchase physical products such as CDs, Vinyl and Merchandise.

Flexibility of use
When trying to discover new music in the shoes of the user, I often found myself trying to click on the name of an artist or label after listening to one of their songs. This freedom is very important to allow the user to follow their curiosity in the pursuit of discovering new music.