Case study · Music platform

Beatclap

Turning an unorthodox release process into an intuitive, error-free platform.

RoleUX / UI Design
Year2024
PlatformWeb + iOS
ScopeResearch → launch
Beatclap Trends analytics in a browser window on a violet ground — top retailer, territory and listener-behaviour cards
+30%Active users after relaunch
+15%User retention
5Core flows unified
18 wkResearch to launch
01 — Overview

One home for releases, royalties and merch.

Beatclap lets labels and artists manage releases, catalogs, contracts and merchandise in a single platform — replacing a scattered, manual workflow.

Release creation and royalty splits were the community's most-requested capability — and with the legacy platform's sunset date already on the calendar, this update was an opportunity to go out with a bang rather than simply ship a replacement.

The brief was deceptively hard: take an otherwise highly unorthodox update process and package it into something intuitive, error-free, and genuinely desirable to use.

Beatclap release wizard — Add Release details step with metadata language, title and artist fields
Fig. 01 — The release wizard: metadata, titles and artists in a guided 7-step flow.
02 — Problem

The old flow was powerful but error-prone.

Metadata, release scheduling and royalty splits lived across disconnected tools. Small mistakes cascaded into payment and distribution problems downstream.

Before touching the UI, I mined the community's own words — public threads on failed uploads, opaque royalty transfers and support queues that never answered — and clustered them into a journey map. The pattern was unambiguous: artists didn't fear complexity, they feared irreversibility. Every design decision that followed traces back to that insight.

Users needed to move fast without breaking things — which meant the interface had to make the correct path the easy path, and the wrong path hard to take.

“The process is overly complicated and filled with bugs… even after I finally managed to submit my release, I received no confirmation or timeline.”

Independent artist, public forum thread — one of dozens clustered during discovery
04 — Solution

Five flows, one consistent system.

Each flow got the same treatment: fewer decisions per screen, honest feedback, and one consistent component language.

Catalog — releases, artists and recent activity in one structured view
Mobile release creation — step-by-step flow with metadata and track upload across three phone screens
Beatstore — merch creation with colour selection, print options and live product previews
Label overview — releases, artists and recent activity metrics for a label
Contracts table — release and artist agreements with payee splits
CATALOG

Simplified access to content

All releases, artists and recent activity in one structured, scannable view.

RELEASE CREATION

Mobile-first, step-by-step

The release flow is broken into clear, manageable steps — pick asset types, add metadata, upload tracks from any device.

BEATSTORE

Customisable merch creation

Create and personalise merch with colour selection, print customisation and live product previews.

LABEL OVERVIEW

Key metrics, centralised

A clear snapshot of releases, artists and recent activity — the essential numbers one click deep, never buried.

CONTRACTS

Royalty splits, made legible

Create and manage splits — assign terms and permissions without the spreadsheet anxiety.

05 — Design system

No fluff. Consistent and scalable.

A tight token set, reusable components and clear states — built so the product could grow without the UI drifting.

A standard set of layout grids and breakpoints kept design and build fast and consistent from small screens to 1920px+, while the component set carried one visual language across web and iOS.

Beatclap component library — insight cards, artist profiles, platform connections and colour tokens
Fig. 05a — Colour, type and component library.
Responsive layout grid spec — 4-column fluid at XS through 12-column fixed at XL
Fig. 05b — Grid spec: 4-col fluid at XS to 12-col fixed at 1920px+.
Button component set — severity, state and icon variants with sizing spec
Fig. 05c — Button set: severity, state and icon variants with sizing spec.
06 — Retrospective

Shipped before the sunset — and it moved the numbers.

The redesign launched ahead of the deadline. In the months after relaunch, active users grew 30% and retention rose 15% — the community's biggest request had become the platform's strongest feature.

Take an unorthodox update process and make it intuitive, error-free, and desirable.

What I took from it

01

Find opportunities within constraints

Viewing constraints from different angles surfaced new approaches to tackle the others.

02

Leverage existing resources

Knowing where to find existing design resources and when to use them saved immense time and overhead.

03

Involve cross-functional partners early

Bringing them in from the start kept the work holistic and accounted for content and technical feasibility.

04

Simplicity ≠ fewer features

It meant reducing complexity. An extra step toward a more intuitive, error-free experience was worth the effort.