Get closer to the artists you love.

 

Type

Visual Design

Timeline

4 Hours

Platform

Mobile

Obviously, music plays a huge part in many people's lives, whether you're into hip-hop or heavy metal, classical or contemporary. We all listen to music in some form or another.

A quick search on Dribble can give you a glimpse at how many designers have tried their hand at a music player. So I figured I would give it a try. 

With the added pressure of submitting a presentable piece within a few hours, I had to iterate quickly.

So it was time to get started.

 
 

What’s everyone else doing?

This was the first question to ask since touchscreen music players first came onto the scene they have followed a pretty similar layout. So I decided to take a look at some popular music players and see how they decided to lay out information.

Many current generation music players follow similar patterns for the location of the buttons.  With controls near the bottom, play in the middle, next and previous adjacent and a sliding progression bar located above the main controls.

They also feature album art in the centre, Spotify's alternate player actually blows up the artwork into a full screen take over with a dark gradient overlay and a highlight colour that is based on the background album art. 

 
Competitor Analysis.png
 
 
 

The Freshman Release

This first attempt was based on Spotify's alternate look, which features an emphasis on album artwork and a more minimalist control setup. To assist with album recognition I opted for a gradient mask that was made up of each album's most prominent colours.

These choices created some issues, the gradient mask meant that controls and copy had low contrast and low legibility. And by having no album art in the centre there was an abundance of white space, which threw off the balance of the interface.

First Release.png
 
 
 
Sophomore Edition.png

The Sophomore Album

With this iteration, I decided to remove the gradient and replace it with an acrylic effect, which is a major component of Microsoft's Fluent Design System.

This change allowed for text to placed over the mask, remaining a high contrast enough to be legible while also created a similar effect as the previous iterations gradient mask.

During user testing a lot of people said they really liked the personalization and uniqueness that every screen had, so I decided to follow that insight. By including animated sound waves that would move to the music.

 
 

Getting the band back together

After a couple months I decided to revisit the Apollo project, and a lot had changed since that 4 hour challenge back at BrainStation, chief among them was the rise of the iPhone X and larger screens on phones across the mobile space. With a more gesture based control system, combined with edge to edge screens album art is starting to make less sense, for the mobile space.

With that in mind I took a page out of Spotify’s book with the full screen image, and kept elements from the previous iterations such as the sound bar (although now much smaller, acting more as an indicator than anything else).

Making the song title the most prominent feature made it instantly clear to users what they were listening to, helped them orient themselves within an album; and combined with the overlay of the image made it feel like they were looking at a poster for a concert.

 
Apollo 3.0
 

The Farewell Tour

Music is clearly an important part of our lives, and our musical tastes are unique to us. In working on this project I realized the importance of personalization in the design.

The biggest thing that kept coming up was that they enjoyed how each screen felt that it was part of the music and it really helped them quickly understand which song or album they were looking at. 

Revisiting this project was interesting especially since it forced me to revisit old designs which I now look back on and wonder what was I thinking? It was also an interesting exercise in leveraging the new age of mobile devices, where large images and bold text can truly take a central role in communicating information to the user.