Let's go mix

Finden

Reinhören

Herunterladen

Light theme Dark theme Mobile
MP3POOL player

Die Geschichte einer Evolution

Hier erfahren Sie, wie wir unserem Kunden geholfen haben, seinen Service - einen mp3-Pool für professionelle DJs – zurück in die Spur zu bringen, den Nutzerrückgang zu stoppen und den Umsatz wieder zu steigern, indem wir eine neue, moderne Version seiner Website erstellt haben.

PROBLEM
01
Delvin Duelas
Delvin Duelas
Kunde

Alles begann damit, dass unser Kunde Delvin uns bat, ihm bei der Suche nach dem Grund für den Nutzerrückgang zu helfen, der wiederum zu einem Einkommensrückgang führte.

Irgendwann bemerkte er auch, dass seine Konkurrenz in puncto Funktionalität und Benutzerfreundlichkeit aufholten, so dass es notwendig wurde, sie einzuholen.

Das Problem, mit dem der Kunde
zu uns kam

Nutzerrückgang durch zunehmende Konkurrenz
und veraltete UX/UI

Nutzerrückgang durch zunehmende Konkurrenz und veraltete UX/UI
Die Entdeckung
02

Das Geschäftsmodell
verstehen

Jede Recherche beginnt mit dem Verständnis, wie das Geschäft funktioniert. Was ist ein DJ-Pool? Das versteht Wikipedia darunter:

Ein Musikpool oder DJ-Plattenpool ist eine Methode des Musikvertriebs, die es DJs ermöglicht, Werbemusik zu erhalten, die sie in Nachtclubs und bei anderen Veranstaltungen wie Hochzeiten, Festivals und im Radio spielen können.

Plattenfirmen auf der ganzen Welt schicken ihre neuesten Veröffentlichungen an den Pool von DJs. Im Gegenzug erhalten sie Feedback zu jeder Veröffentlichung und werden in den Clubs und anderen Veranstaltungsorten, in denen sie spielen, bekannt gemacht.

DJs zahlen in der Regel einen monatlichen Beitrag, um den Service dieser Plattenpools in Anspruch nehmen zu können.

Wiki
Mp3pool
Who are our users?

Wer sind unsere Nutzer?

Die Geschäftsmodellanalyse hat uns zwei Arten von Nutzern gezeigt: Plattenfirmen und DJs.

Daraufhin haben wir uns verzweigt und drei Haupttypen von DJs identifiziert, die unser System nutzen.

John Smith
John Smith
Club-Dj
Connie Wilson
Connie Wilson
Mobile-Dj
Morris Watson
Morris Watson
Radio-Dj

Anhand der Nutzerbewertungen haben wir die Hauptgründe für den Nutzerrückgang ermittelt

  • Unübersichtliche Suche
  • Keine Massendownloads
  • Fehler in MP3-ID-Tags
  • Langsame Leistung
  • Veraltetes Layout und Bedienung
reasons

Fazit

Nach einer sorgfältigen Analyse der Probleme haben wir beschlossen, dass wir die UX der Website überarbeiten, fehlende Funktionen hinzufügen und den visuellen Stil aktualisieren müssen.

Leider war die bestehende Website sowohl im Kern als auch an der Oberfläche veraltet, so dass wir nach Rücksprache mit dem Kunden beschlossen, eine völlig neue Lösung zu entwickeln.

Dabei ergab sich jedoch ein Problem: Auf der alten Website gab es aktive Benutzer mit aktiven Abonnements. Wir mussten die Nutzer so auf die neue Website migrieren, dass es für sie wie eine normale Aktualisierung der Benutzeroberfläche aussah.

03
WIREFRAMING
01
Definieren von Systemobjekten: Titel, Video, Künstler, usw.
02
Korrelation zwischen allen Objekten des Systems definieren
03
OOUX aufbauen, um ein vollständiges Muster des gesamten Systems zu erhalten
Zerlegung in Bausteine
Jedes große System beginnt mit der Definition seiner Bausteine.
Track
Cover
Duration
Track Title
BPM
Genre
Decade
Video
Cover
Duration
Video Title
Artist
Artist Picture
Artist Bio
Tracklist
Title
Read More
Video List
Chart
Cover
Chart Title
Update Date
Add to Library
Tracks
Play
Filter
Previous
Track Version
Track
Version Tag
Update Date
Time
Artist
WIREFRAMING
04
WIREFRAME 1 WIREFRAME 2 WIREFRAME 3

Die Herausforderung bei der Entwicklung der neuen Schnittstelle bestand darin, modernes Design mit Vertrautheit zu verbinden.

Es war wichtig, dass das neue System bequemer und einfacher zu bedienen ist als das alte, aber dennoch für die bestehenden Benutzer erkennbar bleibt.

Vom Low-Fidelity-Prototyp zum echten Design

  • UI
  • High Fidelity
  • Low Fidelity
  • DATEN
design
design
design
design
06
UI
Hauptseite

Wir haben die Hauptseite leicht angepasst, indem wir den Schwerpunkt auf die Suche und die Filter gelegt haben.

Musik ist wichtig, daher haben wir den Code so umgestaltet, dass die Wiedergabe während des Surfens auf der Website weiterläuft.

UI Main Page
UI Main Page
Vorschläge

Keine Druckfehler mehr: Wir haben Autosuggestions hinzugefügt, um die Suche zu verbessern

UI Suggestions
Track- und Video-Seiten

Alle Audio- und Videoinformationen sind jetzt logisch strukturiert

UI Track Page
UI Video Page
UI Track Page mobile
UI Download Page
Massen
Download

Das Herunterladen mehrerer Tracks ist jetzt ein Kinderspiel

Künstler Seite

Detaillierte Informationen über Künstler

UI Artist Page
UI Artist Page
UI Playlists Page
UI Playlist Item UI Playlist Item UI Playlist Item UI Playlist Item UI Playlist Item UI Playlist Item UI Playlist Item UI Playlist Item UI Playlist Item UI Playlist Item UI Playlist Item
Playlists Seite

Vorabveröffentlichungen, exklusive Songs, Charts, kuratierte Wiedergabelisten und Top-Downloads

Dunkles Layout

Da die meisten DJs nachts arbeiten, haben wir ein dunkles Layout erstellt

UI Light Theme
UI Dark Theme
UI Dark Theme Screen
UI Dark Theme Screen
UI Dark Theme Screen
UI Dark Theme Screen
UI Dark Theme Screen
UI Dark Theme Screen
UI Dark Theme Screen

MP3-ID-Tag-Überprüfungssystem

Eines der Probleme, über die sich Benutzer beschwerten, waren gelegentliche Fehler in MP3-ID-Tags. Um dies zu beheben, haben wir ein ID-Tag-Überprüfungssystem für alle hochgeladenen MP3-Dateien entwickelt. Jetzt kann der Administrator die Musikqualität überwachen und die Benutzer können sicher sein, dass sie die richtigen MP3-Dateien herunterladen.

ID Tag verification system
Thank The Gang
Thank The Gang (Remix)
Twelve'len ft Guapdad 4000
Prev Pause Next
Volume
Volume
Balance
Balance
Ride
Ride
Osiris ft Kehlani
Workship
Workship
Rustie
Migration
07

Eine weitere Herausforderung für unser Team bestand darin, die alte mp3pool-Website durch die neue zu ersetzen, ohne dass die Nutzer den Übergang bemerken: Alle Nutzerdaten und Abonnements mussten erhalten bleiben.

Um den Übergang so reibungslos wie möglich zu gestalten, haben wir den Prozess in mehrere Schritte unterteilt.

01

Zunächst haben wir die Website auf einen neuen Server mit einer neuen Domain hochgeladen.

First
02

Danach haben wir alle Nutzerdaten zwischen den Servern mit Hilfe einer speziellen API synchronisiert, damit alle Nutzer ihre aktiven Abonnements und persönlichen Daten behalten konnten.

Second
03

Nach der Übertragung aller Daten wurde der neue Server an den Hauptdomainnamen gebunden, während die alte Website auf eine Subdomain verschoben und vor der Indexierung verborgen wurde.

Third
08
Result
Wir baten die bestehenden Nutzer um Feedback. Wir wollten wissen, wie sie das neue Aussehen der Website fanden.
Diagram
technology
09

Front-End-Entwicklung

Wir haben den neuen MyMP3Pool als Single-Page-Anwendung entwickelt. Sie nutzt nun das Vue.JS Framework und eine Server-Side Rendering Technologie.

Backend-Entwicklung

Das Backend von MyMP3Pool wurde mit Ruby on Rails geschrieben. Wir haben FFMpeg verwendet, um die Tracks für das HLS-Streaming vorzubereiten.

Bezahlsystem

Das gesamte Zahlungsmanagement für Abonnements basiert auf den Diensten PayPal und Authorize.Net.

Thanks for watching!
Thanks for watching!

Vielen Dank fürs Zuschauen

Liebevoll erstellt von MINDSTUDIOS

Got a project in Mind?

Schreiben Sie uns eine Nachricht und wir melden uns bei Ihnen