Datpiff

Datpiff

UX/UI Music App

Datpiff is the authority in free mixtapes, during my extensive history with the Samsung Galaxy lineup this was the only way to download new music to listen to and keep up with the music community. After finally switching to Apple I realized how easy it was to access and download all the newest music, keep up with my favorite artists, and find out what is trending. Apple had it figured out, but there needed to be an app that would allow that experience throughout all platforms no matter what device you own. I knew Datpiff had the potential to fulfill all the frustrations Galaxy users ran into when it came to music, but it needed to actually take those users into account when trying to improve the app overtime. I want Datpiff to not just be the authority in free mixtapes, but the central hub when it comes to the music community and broadcasting your music to fans. But they gave up on updating the desktop version and the mobile app is not living up to its fullest potential, now they look completely different and it can get confusing to users. This Datpiff redesign will ensure there is a cohesive design strategy for both the desktop and mobile version and make sure there is an app that allows you to securely keep up with the latest music and ever-changing music community, as well as offer artists whether famous or up and coming all the same opportunity to voice their work to fans worldwide.

Personas

I interviewed many different people, some of which I knew were users and some that have never used the app. Using underlying information I took from them, I created 3 different personas based off of the interviews.

Minimum Viable Product

This section links users wants, needs, and frustration with real elements that will be included in the design of the app.

Profile / Mixtape Analysis – As a user I would like to have an option to create a profile with my pictures and information. I want to be able to have a platform that allows me to share my music for free. The hip hop community is hard to keep up with and is always changing, plus for artists trying to get their shot it can often be very hard and confusing to get your product out there and see how well your projects are performing. I want to be able to have people comment on my projects, like them, download them, and all of this data should be displayed back to me in an easy to understand way so that I can see how to improve upon the work I already have out in the world.  

  • Profile with images and information about me displayed. 
  • Mixtape analysis to show me how my projects are doing and how to improve. 
  • Comments section for people to be able to engage with me and tell me what they think of the project. 
  • Like option so that my projects could possibly make it onto the hottest page.  

Home – As a user I would like a familiar page to land on every time. I want the home page to be based on me and display music specifically picked for me. The app should take my listening history and formulate sections of music curated specifically for what I might like. The home section should have a bunch of different options and sections so that I always have something new to listen to. 

  • Page that displays music curated specifically for me based on my listening history. 
  • Display a lot of different options so there is always something new.  

Hottest – As a user I would like to be able to keep up with what is trending, what other people are gravitating to, and new artists. The hottest page would be a goal for any artist to hit no matter if you’re a famous musician or an up and coming artist. The hottest page should be a collection of all of the hottest music out at the time, It should take the likes that people get and the activity on their page and establish a list of who is the “hottest” most liked, and most active user. The hottest page should have a lot of different sections so there is always something new. 

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

Liked – As a user I would like a way to save all the music I like online, so I don’t have to download every single song that I like. I want to be able to just like the mixtape or song and have a list generated. The liked page could just be a list of all the mixtapes I like, because I want to be able to find the music I want very fast. 

  • Page that displays a list of all the mixtapes or songs that I liked. 

Downloads – As a user I would like to be able to have a log of all of the music that I downloaded in the  past, in case I get a new phone or need to share the information with a friend. I want there to be a list of my downloads collected for me so that I can see all of them in order. 

  • Page that displays a list of all my downloads in order. 

Lo-Fi Wireframe

Simple wireframe sketches of what I want the app to eventually look like. It is crucial to get ideas down on paper and design specifically for the users needs without all of the pressure. Sketching out ideas and troubleshooting problems in this step make it much faster once we get into the actual design.

Inspiration Board

I wanted the website and app to be simple interfaces that really let the music shine. Music is the heart and sole of this whole brand and keeping that community aspect while offering an approachable yet modern revive was very important to me. Spot color 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 these images*

Logo

I wanted the logo to be familiar yet modern. Datpiff was created around the hiphop community and I thought a nice stern san serif would be a great fit. The design pays homage to the old look yet offers a familiar option that users will recognize and embrace.

Icons

Colors

This darker, slightly muted color palette also pays homage to the old look but offers more cohesive options when it comes to the design. These colors offer a modern twist on the classics that everyone loves and allows possibilities that weren’t at all possible before.

UI Elements

After all of the troubleshooting and design is all figured out, there is a specific way that everything has to be laid out. Everything is narrowed down to the exact pixel, and if I need to handoff this file to someone else to work with they need a guide to keep everything consistent.

Final Prototype

Test Datpiff Out

Test Datpiff Mobile