Beatbrücke.de Redesign — Christian Greven

Kontext

Etabliert. Aber veraltet.

Beatbrücke.de ist seit 2012 ein fester Bestandteil der deutschsprachigen Hip-Hop-Szene. Die Plattform bietet Free Beats, Premium Beats und Exclusive Beats mit klaren kommerziellen Lizenzen — über 3.400 zufriedene Kunden nutzen die Beats für YouTube, Spotify, Musikvideos und mehr.

Die alte Website spiegelte die Qualität der Beats nicht mehr wider und hatte massive Usability-Probleme, besonders auf Mobile. Der Moment für einen kompletten Neustart war gekommen.

Challenge

Drei Probleme, eine Lösung

01 Technisch & ResponsivDie alte Seite war praktisch nur auf Desktop nutzbar. Mobile Nutzer — die Mehrheit der jungen Rapper — hatten eine schlechte Erfahrung.
02 Music PlayerDer zentrale Player war unübersichtlich, langsam und bot keine gute Vorschau-Funktion. Beats anhören, vergleichen, kaufen — zu viele Klicks, zu viele Abbrüche.
03 Branding & StrukturNur ein simpler Schriftzug als Logo, keine klare Informationsarchitektur, veraltetes Layout und fehlende moderne E-Commerce-Standards.

Meine Rolle

Von Research bis Übergabe

Ich habe das Projekt als Lead UX/UI Designer selbstständig konzipiert und umgesetzt — von der Research-Phase über das komplette Redesign inklusive neuem Logo bis zur Übergabe an die Entwicklung.

Ich UX Research, Informationsarchitektur, Mobile-First-Konzept, neues Logo, gesamtes UI-Design, Wireframes, High-Fidelity-Prototypen, Music Player Konzeption

Gründer Strategische Abstimmung, Inhalte & Beat-Management, Markenidentität

Dev Full-Stack-Entwickler: Technische Umsetzung (intern)

Discovery

Die Community spricht.

Ich habe zahlreiche Kunden-Reviews, Kommentare unter Beats und Foren-Beiträge analysiert. Die größten Pain-Points waren eindeutig: schlechte Mobile-Nutzung, unpraktischer Player und die Schwierigkeit, schnell den richtigen Beat zu finden und zu vergleichen.

Daraus entstand der klare Auftrag: Der Music Player muss das Herzstück der neuen Seite werden — inline abspielbar, übersichtlich und auf allen Geräten top-performant.

Strategie

Vier klare Prioritäten

01

Mobile First

Komplettes Design von klein nach groß. Die Mehrheit der Nutzer kommt über Handy — das musste die beste Experience bieten.

02

Player als Herzstück

Großer, prominenter, gut steuerbarer Player — mit Waveform, Filter und Shuffle, der über die gesamte Seite nutzbar bleibt.

03

Klare Lizenzstruktur

Deutliche Trennung von Free, Premium und Exclusive Beats — direkt im Player und in der Übersicht, ohne Klickwege.

04

Modernes Branding

Neues starkes Logo, das zur Hip-Hop-Kultur passt und Professionalität ausstrahlt — weg vom simplen Schriftzug.

Design Process

Eng. Iterativ. Nah an der Zielgruppe.

Besonderes Augenmerk lag auf schnellen Ladezeiten des Players und intuitiver Navigation zwischen den Beat-Kategorien. Jede Iteration wurde direkt mit dem Gründer abgestimmt, der selbst tiefen Einblick in die Community hat.

01 Research — Review-Mining, Community-Analyse, Pain-Point-Mapping

02 Logo — Entwicklung neues Branding zusammen mit dem Gründer

03 Wireframes — Mobile-First, starker Fokus auf Player-Interaktionen

04 High-Fidelity — Iterative Prototypen Desktop + Mobile in Figma

05 Handoff — Enge Abstimmung mit Entwickler während der Umsetzung

Outcome

Modern. Mobil. Nutzbar.

Die neue Seite ist seit Launch live und wird von der Community sehr positiv aufgenommen. Rapper können endlich überall schnell Beats anhören, vergleichen und kaufen. Die Mobile-Nutzung hat sich massiv verbessert, der neue Player ist das klare Highlight der Seite.

Die klare Lizenzstruktur (Free / Premium / Exclusive) direkt im Player reduziert Fragen und Kaufabbrüche — und macht die Entscheidung für Künstler einfacher.

Reflection

Was ich mitnehme

Anders machen

Noch früher quantitative Daten (Google Analytics) neben den qualitativen Reviews einbeziehen.

Den Player noch stärker ausbauen — Playlist, A/B-Vergleich von Beats, noch tiefere Waveform-Interaktion.

Behalten

Den konsequenten Mobile-First-Ansatz und die enge Zusammenarbeit mit dem Gründer von Anfang an.

Das hat dafür gesorgt, dass das Ergebnis nicht nur gut aussieht, sondern wirklich für die Zielgruppe funktioniert.

Stack

Figma FigJam Adobe Illustrator Mobile First Music Player UX E-Commerce UX Branding User Reviews Freelance

Live

beatbruecke.de

Live ansehen →

Beat-brücke