Core UI Redesign

I started this entire case study redesigning ‘Now Playing’. Apple placed more emphasis in use of blurred elements and components throughout iOS 13, prominently for system materials such as the home screen dock, notifications and heavily within the UI of native apps. I wanted to adopt this design aesthetic and apply it to the Now Playing UI and the Music app as a whole.

The result you see is the ‘transparent’ theme I created (along with a ‘flat’ theme that mirrors the same plain white design in the current UI; scroll down to see more). Each design decision was made with meeting the UX goals I had in mind — to enhance functional clarity and ease of access to features (less taps) whilst upgrading the app’s visual design to match its native iOS 13 counterparts. Leverage the UI to improve the UX.

I dissect the problem and solution for each feature below, but in terms of the overall UI design, here’s what I’ve added/changed:

The background material element of the ‘transparent’ theme is dynamic and mirrors a blurred version of the cover for whichever song is currently playing; as tracks change, so does the background of the UI

Adjacent songs, previous and next, can now be seen and swiped to switch between playing which is not possible in the current UI

More contextual use of Apple’s pink system colour to differentiate between active components i.e. pink denotes active button/option/current song; black/grey denotes inactive button/option etc

Bottom navigation menu is no longer hidden in the Now Playing screen; I’ve added an option in the general music settings to show/hide the menu so users can opt per preference

Tighter composition and spacing between playback controls controls to maximise white space and create space to add in basic core features that are hidden in menus within the current UI (shuffle, repeat) as to reduce friction between user performing common tasks

Implementing singular gestural interactions to perform core music functions that are familiar and expected by users through mitigating hiding core features into menus or forcing users to tap something (i.e. swipe gesture for track change, single tap to shuffle and repeat rather than two taps to do the same thing as in the current UI etc.); perform tasks in the most minimal way possible

Shuffle and repeat are no longer hidden in a menu, less taps to find and activate; these are core basic features of any and every music app that should not be hidden away in a menu, a problem that majority, if not all, users expressed with great confusion. These functions are so prominent in the music UI elsewhere within the ecosystem (Music in watchOS and macOS, even CarPlay!); current UI requires users to go into the Up Next menu to activate both, glyphs are also tiny and barely visible in this menu

Even CarPlay has repeat and shuffle in the Now Playing UI

Track time slider now implements colour and varied weight to give clearer indication of the time elapsed thus far and remaining track time, almost like a fill effect

The volume slider has a tighter design with a smaller knob, it also mirrors the colour palette of the current volume indicator that shows/hides when you press an iPhone’s volume buttons whilst not in the Now Playing screen, I just flipped it horizontally and tweaked slightly

AirPlay now has contextual glyphs e.g. AirPods Pro in my redesign. Currently the UI has the generic AirPlay glyph no matter what audio device is being used. Adding contextual glyphs communicates clarity to the user as they can immediately see the specific device/accessory that audio is being streamed to rather than reading text or having to go into the menu to see the audio device being used

Contextual and custom glyphs throughout the entire UI to add further depth and clarity for users, the goal being to mitigate ambiguity and enhance cohesion and connectedness

A new ‘Album Menu’ button has been added (scroll down to see this feature in depth); I created a custom contextual glyph for this using a combination of SF Symbols; you can see this new menu below

Updated all the glyphs in navigation menu with newer official variants from SF Symbols; current UI has more rigid glyphs without rounded corners. I also created a custom glyph for Library in the menu by combining two official glyphs together to make one that matches the rounder and thicker weight glyphs used across iOS 13. Also changed the glyph to swipe down the Now Playing screen to a downwards pointing chevron for contextual clarity

the glyphs in navigation menu with newer official variants from SF Symbols; current UI has more rigid glyphs without rounded corners. I also created a custom glyph for in the menu by combining two official glyphs together to make one that matches the rounder and thicker weight glyphs used across iOS 13. Also changed the glyph to swipe down the Now Playing screen to a downwards pointing chevron for contextual clarity Slightly more prominent drop shadow under album/playlist artwork and adjacent tracks to convey elevation and hierarchy along the z-axis, rather than feeling too flat and part of the background material

Okay, now onto the individual Now Playing features and changes!

Music App Themes

Music App Themes

Along with the UI redesign, I decided to make some app-specific themes; some visual options in addition to the overall system them. Users can opt for a preferred visual style — some may like the “Gaussian” transparent theme look whilst others may prefer the current “flat” feel of the UI with the plain theme. If I had more time, I would have made system dark mode theme variants for both, but what you can see here are the systems light mode Music app themes.

Some users requested the ability to customise the look of individual apps rather than just the system wide themes that apply either light or dark mode. Additionally, throughout iOS 13, all the native apps use a mix of blurred and flat UI elements. I felt like this was a nice opportunity to present users with more customisable options as to make the experience of the app more personal & curated, something I aimed to implement in every feature/change.

Dock

Dock Feature

Dock Feature Demo

Introducing, the Dock! A new feature I created. The idea came to me from the home screen dock. I wanted to find a solution that could replace the bottom Navigation Menu if users opted to hide it in the settings (a new option I added) and also create non-intrusive solution to replace the current Mini Now Playing components of which there are too many variants that are obstructive and outdated (e.g. lock screen & AirPlay variants). Object blur has been applied to the material of the dock as I wanted it to be a “floating” component akin to the home screen dock.

A lot of users expressed issues with the fact there are currently a lack of options and alternatives to current UI elements like showing/hiding the bottom navigation menu and the multiple Mini Player components (i.e. variants seen in the Library and Lock Screens) lacking features or being too obstructive. Users also expressed issues with the fact there was no way to see what songs were Up Next in the Now Playing screen (or anywhere else) without tapping into the Up Next menu to see the list of upcoming songs.

I created the music Dock to solve all of these issues in one solution. If you show/hide the bottom navigation menu in the app, you can opt to use the dock instead which acts multiple elements in one. You can also use the dock and the bottom navigation menu together (in this case, the dock contents adapt to reflect this choice). The two outer buttons on either side of the playback controls adapt based on the context of where the user is within the UI. The dock houses the traditional bottom navigation menu to switch between screens, shows the next track queued in Up Next without having to leave the Now Playing screen (complete with a new custom contextual glyph I created) and houses a detailed AirPlay section to show where the audio is being played and the device information (i.e. AirPods Pro battery indicators in the above example) without having to perform multiple swipes to find out. Currently, you have to tap the AirPlay button which brings up a variant of the Mini Player component that covers the entire Now Playing screen and only shows the overall battery levels of your audio device. It is obstructive yet lacks information. The only way to find out detailed AirPlay information in the current UI is to exit the Music app entirely and swipe all the way over to the Notification Centre; too time consuming, too many taps! The Dock removes all of these issues and puts everything into one component, in one screen, with just a couple of swipes. A true one-size-fits-all solution.

Music HandOff & Playback Control

HandOff + Playback Control In Action

I can’t quite believe these features have not been implemented yet. It’s 2020. I’m perplexed. HOW?! The current Music app still does not have a Music Handoff & Playback Control feature. From my research, this is one of the biggest reasons why users choose Spotify over Apple Music. In fact, I discovered people have literally cancelled their Apple Music subscription because it lacks these (and a few other) features.

What’s even more confusing is the Podcast app does have some kind of sync feature. It tracks where you last listened in the podcast and that is reflected in the macOS Podcast app, so you can continue listening from where you left off from your iPhone. Sure, it’s not perfect or seamless but there is some kind of feature akin to continuity there. Apple is known for their products working seamlessly in synchronicity, yet one of the most obvious music features is still nowhere to be found.

Switching from one Apple product to another to listen to music shouldn’t be this counterintuitive. This is what I’m referring to regarding the lack of a music experience. Right now, you have to literally replay a song from the start when migrating over to a different Apple product. From my reasearch, it was a deal breaker for many users. I just want to go over to my Macbook and continue listening to my playlist without having to worry about starting the song again. Not only that, I want to be able to control the music playing from my Macbook on my iPhone too.

To solve this problem, I’ve integrated HandOff into the AirPlay menu. Simply tap the device you want to continue streaming your music from and it sends it over, just like the current Spotify mobile and desktop app. In addition, when you send over the audio to another Apple device, your iPhone acts as a remote for Playback Control so you can continue listening from your Macbook and control the Music macOS app with your iPhone’s Now Playing screen.

Play/Pause

Play/Pause

Play/Pause Interaction

This is more of an aesthetic choice. The current UI has the same micro interaction in that the artwork expands and collapses in size to provide feedback indicating when a user taps to play and pause a song. However, the current UI lacks showing adjacent songs. I have included this feature (see below) but wanted to figure out an elegant way to show and hide the previous and next tracks. I achieved this by adopting the same interaction feature and animating the adjacent songs to show/hide when play/pause is tapped respectively. It’s a subtle interaction touch that adds a lot of depth to the experience.

Track Swipe

Track Swipe

Swipe To Change Tracks

Akin to HandOff, I can’t really believe we are still waiting for a swipe gesture to change songs. Again, a basic core feature that kept coming up in my user research. Many users found this to be a problem. I didn’t need research to justify my solution to this problem though. It’s a very obvious feature that one would expect in any music app. Swiping is a gesture synonymous with the experience of using any touch screen and app, even more so now that swiping left and right has become a prominent gamified gesture (social media stories, dating apps et al).

Implementing this gesture is kind of a no brainer. In addition to adding in swipe, I added sneak peeks of artwork for adjacent tracks as mentioned before. Also, swiping means the user doesn’t have to look at their iPhone screen when swiping to change a track. Currently you have to look at your screen to tap the respective buttons for changing tracks and you can’t see what track was previous or is upcoming. Two small additions make a huge difference to the UX.

Mini Player

Mini Player

Play/Pause Colour Interaction

One common issue that users raised is that the current Mini Player lacks much of the basic core music functionality. The Mini Player in the current UI only houses the current song title, pause and next track buttons. You have to go into the main Now Playing screen or swipe down into the Notification Center to get access to the previous track and AirPlay.

Mini Player Track Slider

The idea behind this was to mitigate users being forced to perform extra swipes to do simple tasks. I redesigned it so that you don’t have to go into the main Now Playing screen at all to perform basic playback actions. I’ve included the artist name and core music controls as well as the most commonly used functions (Up Next, Shuffle, Repeat, AirPlay).

I added added a couple of subtle design touches. I’ve included the use of colour to indicate when a track is playing and paused. A subtle pink blur is applied to the Mini Player when a song is playing and fades away into white when paused. I’ve also turned the divider above the bottom navigation menu into a mini track time bar to show the time elapsed without having to go into the Now Playing screen or Notification Center to see the track time.

Up Next

Up Next

Redesigned Up Next List

The redesigning for the the Up Next feature in Now Playing was inspired by a culmination of the design ideas and features I had come up with. In fact, a few users in my research expressed something I identified — the playback controls in the current UI for Up Next takes up almost a third of the screen estate. It severely lacks functionality. There is also no indication for how many tracks are in the current up next list, nor does it tell us what track we are currently on in said list. The lack of emphasis on the list in the because of the playback controls almost takes away from the fact it is the focal point of Up Next.

I was able to redesign Up Next so that the bottom navigation and dock can be accommodated should a user opt for either or both to be in view and whilst managing to display more tracks in the list and with more detail (i.e. album title), all of which the current UI lacks. The dock mitigates the list being obstructed by playback controls and gives users more options to navigate and control whilst in the Up Next list. I also managed to add some more white space through making the composition of the list tighter without compromising the sizing of any elements, echoing the proportions seen in other native iOS 13 system apps. There are some other design bells and whistles added too. Main point? Less taps, more choice.

Now Playing Options