Nechari Riley
UX Designer | Researcher

Music App X

The 3 Hour Design Challenge

The Challenge

I was given the following challenge to develop the user interface for a new music app based on the direction of a design firm:

Design the music player screen.

Choose one of two aesthetic directions and create the music player screen based on the existing PDF screens. 

The screen needs to include the following features (with the addition of one optional screen of your choosing):

  • Users can see the artist name, song title, length of a song, and album art
  • Users can play/pause, go to previous track, and skip to next track
  • Users can scrub the progress bar to travel to a specific part of the song
  • Users can toggle the shuffle on and off
  • Users can switch between repeat off, repeat current, and repeat all
  • Users can add the current song to a playlist
  • Users can navigate back to the previous screen 

UI PROCESS

Music App X

Collecting Resources

Since I only had three hours to work on the interface, I wrote down all of the resources I needed to recreate the player screen:

  • Font styles
  • Color
  • Shapes
  • Images (album art)
  • iOS status bar

I used Sketch to create and adjust the UI elements. For the album art, I searched for the artist singles and created a folder to hold the images.


Example screenshot from challenge
Example screenshot from challenge

Color and Typography

I searched for the color scheme of the existing app screenshot using the eyedropper tool to get the correct hex value.

To recreate the typography, I searched Google fonts to identify fonts closely resembling the fonts on the app screenshot. I chose Impact as the title font and Open Sans for the content.

Music App X

Base Layer

Following the dark visual style of the example screen, I created a base layer to match the color of the main app screen and contrasted it with pink highlighted UI elements.

UI Elements

I also researched all of the common UI elements from the top music players (ex. Apple Music, Spotify, TIDAL), such as the status bar, navigation, music setting(s), song time lapse, shuffle, reverse, play, and skip symbols.

Music App X

Wireframe

Finally, I added the album art and illustrated additional functionality of the interface by adding a shadow, which entices the user to interact with the album art. The users action (touching the album art) would "flip" the album card, showing details about the song, such as song lyrics.

LESSONS LEARNED

When a project is under a time constraint, it's helpful to take a few minutes to plan what tools and resources you will need before working on designing the product.

In gathering all of the elements I needed first, I was able to then adjust my design and make slight design changes to create a deep and color-rich user interface which responded well to the client's needs.