Ah, Google Play Music. In the Android community, it's one of the most beloved services while simultaneously being one of the most criticized apps.
GPM was officially unveiled way back in 2013, and while the service has expanded and evolved over that time, the app layout and design have surprisingly changed very little. That makes it a prime candidate for the good ol' Pixel Shift treatment.
So where to begin?
Thankfully, for this Shift I don't have to make too many assumptions about what improvements people want to see. The Android community has been quite vocal about their dissatisfaction for some time now, and there was even a fairly large Reddit thread on the subject recently. So with that feedback and my own first hand experience, I determined these to be the most common areas of complaint:
- Cumbersome / confusing navigation
- Ugly player UI
- No dark theme
- Lack of transitions / animations
With these items in mind, I went to work!
First on my to-do list was to improve the navigation. Currently the app tucks everything away in the side navigation drawer. While that keeps things looking relatively clean, it also obscures everything the app has to offer, while also slowing down the user every time they want to switch to a different part of the app.
Instead, using a bottom bar would greatly enhance the experience by surfacing each key component of the app (Home, Discover, Library, Radio, Podcasts), and allowing instantaneous switching between each.
Next, Google Play Music's primary color is a bright and vivid orange. While certainly eye-catching, it can be quite overbearing when used in large blocks. So, I decided it'd be better to use it as an accent. However, that posed an other challenge: accessibility. The particular shade of orange that GPM uses fails nearly every one of the minimum contrast standards (set by the WCAG 2.0). That makes it unsuitable to use in most text.
So I did my best to only use the orange in places where contrast isn't an issue (like icons). However, I did have to compromise in two places: tabs and buttons.
For tabs, I had a couple of options. The first was to make the active tab text label black. However, the tab indicator line alone was enough to clearly convey what tab was active. To compensate, I could drop the opacity of the adjacent tabs' text, though that would cause those text labels to subsequently fail the contrast standards. The second option was to color the active tab text label orange. With this option only one text label fails the contrast standards (the active tab). Though, the rest of the content on screen should provide enough context for the user to deduce what tab they're on.
Buttons followed a similar logic. On a flat button, the text can't be black, since it would no longer be clear that it's an actionable button. The whole button could be orange, though that resulted in the button overpowering the surrounding content. Additionally, white text on an orange button still failed the contrast standards, and black text looked quite bad. So ultimately, another compromise had to be made.
With those considerations out of the way, let's move on to the good stuff!
The most obvious place to start with the app was the Home screen.
A common complaint among GPM users is that the current app essentially hides recent activity behind a small button at the top of the screen. Often it blends into whatever suggestion card it's shown over, and its position and small size make it both hard to reach and easy to miss when trying to tap.
My solution borrows the current design of the Play Music website by placing recent activity in a row above the suggestions. That makes it easier quickly see and resume a song, album, or playlist.
Below recent activity, I placed suggestions. They're definitely a key feature of the service (thanks to Google's Songza acquisition and the recent integration of machine learning) and deserve to be prominently shown on the Home screen. That said, I chose to compact them a bit. That allowed more to show on the screen at once (up to 4/5 from the previous 2/3), while also creating a consistency with the rest of the app's overall layout.
In an effort to streamline the app's navigation, it made a lot of sense to combine the current app's separate Top Music and New Releases into a single nav point—Discover.
Users can still switch between the two by swiping between the tabs. Also, both can be filtered by a single genre dropdown menu at the very top.
Additionally, I added a videos section to Top Music. It's not clear if the average GPM user realizes that their subscription also allows them access to a massive library of music videos on YouTube and through the YouTube Music app. However, I believe that there's a huge opportunity to make that more apparent—not only in Discover but in other places (like artist and album screens) too.
Overall, Library is pretty straightforward with a few standout tweaks.
First, I greatly changed the overall look and layout of the app's auto playlists. While they can be useful, I assume that the average user likely cares more about their own custom-made playlists. So auto playlists shouldn't have the same visual weight as the user's. Additionally, I added a 'downloaded' playlist so that users who prefer to store their music locally can more easily jump straight to it.
Next, I changed the artist screen to a list view rather than a grid. This made the list much easier to quickly scan and navigate. Also, using circular artist images here is more consistent with their use in other areas of the app.
Finally, I added a sort action to the album and song screens. In addition to the default alphabetical view, it could contain options to sort by artist, play count, release date, etc. This would allow users with extremely large libraries to more easily find the music they want.
Ah, the player UI. Perhaps the most contentious part of the entire app, and yet also one of the only parts that has remained the same since the app's introduction over 4 years ago.
Chief among the complaints: the cropped album cover art. That was an obvious and easy fix. However, rather than have the album art display full-bleed at the top of the screen, I instead chose to scale it down a bit. Doing so means that nothing will have to overlay or obscure it, while also allowing the action icons to be clearly visible along the top.
Next, I thought this would be a perfect place for the app to take advantage of Android's palette API to extract colors from the cover art and apply them to the different player elements. Not only does this extend the cover art's style to the entire UI, but it would also create some consistency between the app and Android O's new media notification style.
Additionally, I spaced the scrub bar and media controls apart (with the song title, artist, and album in between) to allow adequately sized touch targets and avoid any accidental mis-touches of what would otherwise be adjacent elements.
Another common complaint is that the app's menus are both confusing and still using a Holo-era design. Given the large number of options, adding icons to each of the menu items would make the menus much easier to quickly parse and understand. As for their look, modernizing the menus to match Material Design only requires a few simple tweaks (removing the dividing lines and size adjustments).
Finally, I determined that because the queue is frequently used by users, it should be accessible by a swipe (or tap) from the bottom of the screen where it's easier to reach (rather than through a button at the top of the screen).
If /r/Android has taught me anything, it's that they want to #darkthemeallthethings.
In all seriousness, though, a dark theme can have several benefits:
- It provides choice to the user
- It would reduce eye strain in dark settings or at night
- Some people with impaired vision might find it easier to use
- Depending on the phone, it could even positively affect battery life (if only slightly)
To complete the whole experience, I also used Framer to create few quick prototypes that demonstrate the most common interactions I think a user would take. While these kinds of animated transitions aren't critical, they do provide an additional layer of polish, fluidity, and delight.
So there you have it, Google Play Music redesigned! But a design is only as good as the feedback it receives. So tell me, how do you like it? Did I effectively address the issues? Anything I should have done differently or added?
Oh, and if you're hiring and like my work, get in touch!
Thanks for reading!