Datpiff

UX/UI Music App

The current Datpiff website hasn’t been updated since its launch in 2005; the design is outdated, there isn’t a clear hierarchy, and there are many challenges from a usability perspective. The design of their current mobile app isn’t cohesive with the design of their website, making it extremely difficult to associate the two with the same brand. This redesign ensures a cohesive design strategy for desktop and mobile versions. It allows users to keep up with the latest music and offers artists the same opportunity to promote their work to fans worldwide, whether famous or up-and-coming.

Personas

After interviewing multiple users with different levels of exposure to this app, I used their underlying information to create three distinct personas.

Minimum Viable Product

This section links user wants, needs, and frustrations with real design solutions.

Profile/Mixtape Analysis – Users should have the opportunity to create a personal profile free of charge. This profile would allow musicians to promote their work and instantly see performance data in an easy-to-understand dashboard. Providing these users with a way to see how the public is responding to their work and offers insights into how to improve for their next project.

Profile with images and information about the user displayed.
Mixtape analysis to show users how their projects are performing and how to improve.
A comments section for fans to engage with projects.
Like option on each project that influences the hottest page.

Home – Users should have a familiar page to land on every time they enter the website or app. The homepage will be personalized based on each users listening history and formulate sections of music curated specifically for their interests. The homepage will continuously feature different music options and sections so users always have something new to listen to.

A page that displays music curated specifically for users based on their listening history.
Display different options so there is always something new.

Hottest – Datpiff should allow users to easily keep up with new and trending music. The hottest page will be a collection of all the most popular music at any particular time. This page will base its trending assessment on project likes, comments, and activity.

Page that displays all the hottest mixtapes.
Display different options so there is always something new.

Liked – Users should have a way to save the music they like online so they don’t have to download every song they’re interested in. The liked page will generate a list of the mixtapes and songs that the users has liked to provide quick and easy access to the music that interests them.

Page that displays a list of all the mixtapes or songs that a user has liked.

Downloads – Users should have access to a log of all the music they’ve downloaded. That way if a user switches or gets a new device they will have quick and easy access to their entire music library.

Page that displays a list of all the music a user has downloaded.

Inspiration Board

Music is the heart and soul of Datpiff, and keeping that community aspect while offering an approachable yet modern revive was very important to me. Simple icons, gradients, drop shadows, rounded corners, and simple stats pay homage to the old look while also bringing a fresh new approach.

(I do not own the rights to the images in the inspiration board displayed above)

Logo

Datpiff is centered around the hip-hop community, choosing a stern san serif to fit into hip-hop’s bold history while offering a sleek modern feel. The design pays homage to the old logo and provides a friendly alternative that users will recognize and embrace.

Icons

Colors

This darker, slightly muted color palette offers a modern twist on the classic Datpiff colors. Allowing for a more cohesive and elegant approach to the website and app.

UI Elements

After completing the redesign, there is a specific way to implement everything. To ensure seamless handoff, every element is measured to the exact pixel to keep the design and end product consistent.