Let's go mix

Find

Preview

Download

Light theme Dark theme Mobile
MP3POOL player

A Story of Smooth Evolution

Here's how we've helped our client get his service — an mp3 pool for professional DJs — back on track, stop the traffic decrease, and restore sales growth by creating a new, modern version of its website.

PROBLEM
01
Delvin Duelas
Delvin Duelas
Customer

It all started when our client Delvin engaged us by asking to help to investigate the reason for traffic decrease which, in return, cased income recession.

At some point, he also noticed that his competitors began to pull ahead in terms of functionality and usability, so it became necessary to catch up with them.

The problem the client
came to us with

Traffic decrease caused by growing competitors
and outdated UX/UI

TheTraffic decrease caused by growing competitors and outdated UX/UImindstudios
discovery
02

Understanding
the business model

Any research starts with understanding as clearly as possible how the business works. What is a DJ pool? Here's what Wikipedia says:

A music pool or DJ record pool is a method of music distribution that allows DJs to receive promotional music to play in nightclubs and other events such as weddings, festivals, and on the radio.

Record labels worldwide send their newest releases to the pool of DJs; in exchange, the pool provides feedback on each release as well as exposure in the clubs and other venues they play in.

DJs typically pay a monthly subscription to join the service provided by these record pools.

Wiki
Mp3pool
Who are our users?

Who are our users?

The business model analysis revealed to us the two types of users: labels and DJs.

Following this, we've branched out and identifid three main types of DJs that use our system.

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

Based on users reviews, we identified the main reasons behind the churn

  • Inconvenient search
  • No bulk downloads
  • Mistakes in MP3 ID tags
  • Overall slow performance
  • Outdated look and feel
reasons

Conclusion

Having carefully analyzed the problems, we decided that we need to rework the UX of the site, add missing functionality, and update the visual style.

Unfortunately, the existing website was outdated at the core as well as on the surface, so after discussing it with the client, we decided to create a completely new solution.

However, this posed a problem: the old site had active users with active subscriptions. We had to migrate users to the new site in a way that looked like a regular interface update to them.

03
WIREFRAMING
01
Define system objects: track, video, artist, etc
02
Define correlation between all objects of the system
03
Build OOUX to get a complete pattern of the whole system
Disassembling into bricks
Any big system starts with defining its building blocks.
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
WIREFRAMES
04
WIREFRAME 1 WIREFRAME 2 WIREFRAME 3

The challenge of developing the new interface was to combine design upgrade with familiarity.

It was important to make the new system more convenient and easy to use than the old one yet keep it recognizable for existing users.

From low fidelity prototype to real design

  • UI
  • High Fidelity
  • Low Fidelity
  • Data
design
design
design
design
06
UI
Main Page

We've slightly adjusted the main page by moving focus to search and filters

Music is key, so we've rebuilt the code to make playback go on while browsing the website

UI Main Page
UI Main Page
Suggestions

No more misprints, we we've added autosuggestions to improve searching experience

UI Suggestions
Track and Video Pages

All audio and video information is now logically structured

UI Track Page
UI Video Page
UI Track Page mobile
UI Download Page
Bulk
Download

Downloading multiple tracks is now a piece of cake

Artist Page

Detailed info about artists

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 Page

Pre-releases, exlusive songs, charts, curated playlists, and top downloads

Dark Theme

Most DJs work at night, so we've created a dark theme

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 verification system

One of the problems users complained about was occasional errors in MP3 ID tags. To fix this, we've developed an ID tag validation system for all uploaded MP3 files. Now the admin can monitor the music quality and users can be sure they download correct MP3 files.

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

Another challenge for our team was that we needed to replace the old mp3pool website with the new one without users noticing the transition: all user data and subscriptions had to be preserved.

To achieve the smoothest transition possible, we've broken the process down into several steps.

01

First of all, we uploaded the site to a new server with a new domain.

First
02

After that, we've synced all user data between servers using a special API so that all users kept their active subscriptions and personal data.

Second
03

Having transferred all the data, the new server was tied to the main domain name, while the old site was moved to a sub-domain and hidden from indexing.

Third
08
Result
We asked existing users for feedback. We needed to know how they felt about the new look of the website.
Diagram
technology
09

Front-End Development

We've built the new MyMP3Pool as a Single-Page Application. It now uses Vue.JS framework and a Server-Side Rendering technology.

Back-End Development

Backend of the MyMP3Pool was written using Ruby on Rails. We’ve used FFMpeg to prepare tracks for the HLS streaming.

Payment System

All subscriptions payments management is based on the PayPal and Authorize.Net services.

Thanks for watching!
Thanks for watching!

Thanks for watching

Made by MINDSTUDIOS with love

ANDERE AKTUELLE PROJEKTE

NEBEN ZAHLREICHEN PROGRAMMIERSPRACHEN
BEHERRSCHEN WIR AUCH DEUTSCH FLIESSEND!

Schreiben Sie Uns