DatPiff Music App Redesign — UX Case Study

9 min readJul 12, 2020

Introduction

For the case study, I will be focusing on the music streaming service for DatPiff. DatPiff is an online distribution platform that was launched in 2005. It specializes in hip-hop, rap, and urban music.

Target demographic:

· Aged: 18–30 (millennials).

· Hip-hop/rap fans

· Digital savvy enough to stream music

All aspects of this case study have been done and managed by me.

I will be focusing on the app’s homepages, menu navigation and music player layout. I’ll focus on these issues as the DatPiff app doesn’t have many similar features to its competition (top 10 music apps in the Apple app and Google play store). The current format is outdated which is bad for business and to attract new customers it is in the best interest for DatPiff to modernise their app. The difference in app layout goes against Jakob’s Law [1], “Users spend most of their time on other sites. This means that users prefer your site to work the same way as all the other sites they already know.” Competitor apps have a similar look and feel with each other, allowing users to move from one to another without feeling disorientated.

The different layout complicates the journey for new users who have used a competitor streaming service, consumers then have to figure out how to operate within the app. This journey goes against Hick’s Law [2] which states “the time it takes to make a decision increase with the number and complexity of choices.” A journey a user isn’t used to can be bad for business as it may overwhelm the user, potentially forcing them to leave and go to a competitor with a process they are familiar with. The design should focus on making navigation and selection easier for the user.

My Focus

Design Problems

Here’s a list of the features the current DatPiff app doesn’t have:

· No tab bar to navigate — tab bars are becoming more popular and replacing the hamburger menu [3]

· Menu is a burger bar on the side with options- which more apps are moving away, especially music apps. The hamburger menu is seen as a navigation obstruction [4]

·Player isn’t at the bottom when on other pages, but a small circle in the top corner — which goes against the design of their competitors

The difference in interface not only goes against the grain of what their competitors are doing but also how other apps in different industries design their apps. DatPiff goes against Jacob’s law by excluding tab bars and using a hamburger format which may disorientate users.

These are the changes I’ll be making:

Bringing in a tab bar in replacement of the hamburger bar
Having a full-length music player rather than the track
Creating an artist page as DatPiff don’t centralise pages for the artist

Research

To prove my thesis I created surveys, read through app reviews and used social listening to learn about streaming consumers.

I wanted to focus on:

What consumers enjoyed
Their pain points
What service(s) they are currently using
User satisfaction from these services.

I also compared different music streaming services to see the similarities and differences between the interfaces, layouts and experience for users.

User comments

Comments from users in the app store state DatPiff have failed to move on with new changes in phone innovation e.g. the removal of a home button on the latest phone models. “They need to optimise their UI with the iPhone X and later…” Users using DatPiff have identified the current issues with DatPiff. Complaints state that DatPiff hasn’t optimised their UI for one of the latest iPhones, which may alienate users with newer phones.

Survey

Through my own research, I was able to see what DatPiff users felt about the UX/UI of the app. I needed to find out more about music app users, what they like and don’t like about the apps they use. I targeted millennials who use streaming services and have an affinity with hip-hop. These findings should help me establish what issues need to be addressed which would enhance the user’s experience.

I was able to get 22 different survey-takers with the majority being aged between 25–34.

Full coverage of the survey: https://www.surveymonkey.com/stories/SM-H2WKV79D/

Competitor Research

With my survey results, I turned my attention to what the competition is doing successfully and what can DatPiff do to improve the user journey. The majority of the top music apps (as noted earlier) all have tab bars at the bottom of the screen and have moved away from the hamburger menu. Here are some of the other features DatPiff do not offer which their competitors do:

The majority of the apps have suggested content on the home pages organised with information e.g. new releases, recommended for you etc
DatPiff currently operates with no artist page but just a list of the artist’ discography. The other apps have artist pages rather than just an overview of the artist discography
The majority follow the same music player format whereas, DatPiff has the tracklisting on the page with their gamification

Direct competition

DatPiff has a different genre-specific music catalogue which isn’t available on the top 10 music streaming services. The DatPiff catalogue is exclusive to only a select few platforms, including “My Mixtapez”. My Mixtapez has a large amount of content which sits on the DatPiff platform, some content which sits on the top 10 streaming services and has a similar interface to the top 10 streaming services. As well as an ad-supported service, My Mixtapez also has a paid subscription service which DatPiff doesn’t. DatPiff currently has the following advantage over My Mixtapez on Facebook and Twitter, but My Mixtapez has 400k more followers on Instagram than Dat Piff.

DatPiff and My Mixtapez focus their catalogue on hip-hop, and the results from the survey I produced showed 75% of music streamers listen to hip-hop. The survey results also displayed if a user were to leave a streaming app to go to another, the user interface being similar to what they are used to is very important. 59% of users rated this as either a 7 or higher out of 10. By these results, DatPiff’s current interface is not only potentially an instant shut off for a large portion of users, but they are also pushing that potential audience to a direct competitor.

User Personas

With my survey results, I was able to create user personas to help me visualise who the target audience is, why they would use the DatPiff app and what is important to them when streaming.

User Prediction

With these changes, I predict an increase in users as the layouts would be more aligned to streaming services consumers are used to. This allows users to focus on the content and not having to think about basic navigations. The current DatPiff app layout differences could force users to leave the app as it’s something they’re not used to (Jacob’s Law).

My prediction is based off DatPiff’s catalogue is extremely limited as it’s only mixtapes but from my survey, the majority of users used Spotify (77%) and the biggest listened to the genre was Hip-hop (75%). The appeal of a similar interface which is closer to Spotify’s could entice these fans to stream mixtapes on DatPiff (which is free).

Low-fidelity wireframes:

Mid-fidelity wireframes:

Results of prototyping:

Once I developed the mid-fidelity prototype, I conducted tests amongst different users to see what could be improved with my design.

User comments who had tested the prototype

After speaking to different users, I was able to focus on changes to enhance the user’s experience and keep elements which were successful. During the process, My Mixtapez updated their app moving their ad banner on their app which is reflective of a critique of my design.

The Solution

The redesign focuses on making the user more comfortable with DatPiff by aligning the layout to be more similar to the rival apps. The focus is on the homepage, music player and artist pages. 77% of my survey takers used Spotify and rated their happiness with service 8/10.

Creating navigation journeys which are familiar and smooth, reducing confusion and minimise the pain points. DatPiff doesn’t currently have playlisting, includes ads and has a limited music library. The changes focus on the Aesthetic Usability Effect.[5] “Aesthetically pleasing design can make users more tolerant of minor usability issues.” Functions and limitations which negatively affect DatPiff can be masked/forgiven through a better-looking layout which enhances usability. Creating a positive response in the user’s brains and can lead them to believe the application works better.

List Of Changes

Removing the hamburger bar for the static navigation bottom bar to look like modern-day apps (Jackob’s law)
Changing the player to reflect how its competitors' players function. Both in full and smaller on the top player (Jakob’s law)
Organise home/landing pages into types (singles, mixtapes, new releases, suggested for you) to help user navigation (Jakob’s law and Hick’s law)
Creating artist pages

As this was my case study, I had to learn a lot around putting together a UX case study. As the only person doing this, I had to look at the UX process from all angles:

Finding and identifying the target market
Getting users to test my prototype
Identifying the UX issues and not complicating my process

As it’s also a pandemic, prototyping had to be remote. Due to the testing being on the users time rather than an interactive set session, it made follow up questions follow up questions difficult. Without seeing their journeys, it also didn’t allow me to question some of their choices to further build out my design.

For my design, I leaned into Jacob’s Law and the current UI trends on mobile apps. Similar layouts allow users to feel comfortable with new apps. Most people have grown tired of bouncing between too many apps or learning how to use a new interface after every new download [6].

Final Prototype

Test the final web prototype here: https://xd.adobe.com/view/811d80a1-8769-48ca-5260-4376ab8c0907-f72c/?fullscreen&hints=on

Conclusion

The project gives me an understanding of some of the barriers you may face when redesigning and how improvised thinking can help the results of the project. I was able to connect with different people through different channels as it was a pandemic, which did help me with my data.

Video sessions could have been used to better find define my results as I couldn’t conduct any research groups in person. Other wider research could have taken place to better my results. For example, interviewing users of DatPiff and/or My Mixtapez as they both share the same catalogue.

Resources

[1] Jacob’s Law: https://lawsofux.com/jakobs-law

[2] Hick’s Law: https://lawsofux.com/hicks-law.html

[3] Tab Bars are the new hamburger bar: https://uxplanet.org/tab-bars-are-the-new-hamburger-menus-9138891e98f4

[4] Death of the hamburger bar: https://uxdesign.cc/death-by-hamburger-2d1db115352a?gi=7dc54bf980ea

[5] Aesthetic Usability Effect: https://lawsofux.com/aesthetic-usability-effect.html

[6] Ever Wonder Why Your Favorite Apps Are Starting to Look the Same? It Might Be a Good Thing: https://www.inc.com/yazin-akkawi/ever-wonder-why-your-favorite-apps-are-starting-to-look-same-it-might-a-good-thing.html