Android 12 Music App | App Design

Naram Ziady

UX Designer
Product Designer
UI Designer
Figma

Play Music Android 12 Redesign





About

Problem:

The current music player apps on the market do not fully take advantage of the new features and design elements of Android 12 because they are not soley created for Android. Unlike Apple Music, which is tailed for Iphones, and it takes full advantage of all Iphone features. On the other hand, Youtube Music is created for all phones, which means most android functions are missing. The question is, how do you create a music app that feels familiar for most users and yet it takes full advantage of all android features?

The Goal

Creating a music player app that utilizes the new features and design elements of Android 12 while providing a consistent and visually appealing user experience.

My Role

As a UI Designer, my sole focus was to keep the designs consistent with material library. This means, taking advantage of Material library documentation and making sure the designs are accurately created in figma. Designing was mainly focused on the upcoming Pixel phone, designing with that in mind, meant I needed to learn those new little android interactions that the pixel phone presents and would then have to recreate them.

Responsibilities

In my role as a UI Designer, I led user-centric research, shaped visual design, and crafted prototypes through an iterative process. I prioritized accessibility, usability, and aesthetics, while also advocating for an exceptional user experience.



Discovery

User Research:

Research was limited to a small group of heavy music listeners that use androids, which included myself and some friends. I went to the play store and looked at the reviews for Youtube Music, jotted down all the things that people were complementing and complaining about. As well as interview my friends and jot down their thoughts and how they interact with the app. After I went to the Material You design system guidelines and highlighted the components that I would need and certain rules to follow to be able to accurately recreate it in Figma.

Findings:

Users were not very happy with the removal of Android Music and it's current replacement Youtube Music. Findings showed that users did not enjoy the video + music aspect and that browsing for music felt like browsing for youtube videos. I shared some of the same complaints. Giving the subjects the choice between a video and music platform or a music only platform, 5 out of the 7 people chose music only platform. A small amount of people, but enough for a small project such as this one. The results highlighted the need for a separate platform of music. Other findings include a design split between playlists, albums, and Lps. The new pixel shapes were just the right fit to create it.



Design

Wireframes:

The Home, Explore, Now Playing, Artist, and Library screens

Polished Designs:

The Home, Explore, Now Playing, Artist, and Library screens

Material Design:



Font

Product Sans is a modern and versatile font designed by Google that is optimized for digital interfaces. Its clean lines, geometric shapes, and balanced proportions make it easy to read on any screen size and device.

Colors

I used the colors that were shown by Google when announcing the Pixel 6 phones, it works perfectly with the general theme. The colors of the whole app also change depending on which theme the user chose for their Pixel phone.



Gallery





THANK YOU FOR READING

Creating this app was mainly an interactive approach to learning material design but the application is something that would be great to have.

Partner With Naram
View Services

More Projects by Naram