3-Hour Design Challenge – Intrepid Pursuits

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):

Feature List

  • 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 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 add the current song to a playlist​

Gathering Assets

I wrote down all of the resources I needed to recreate the player screen:

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

Album Art

First, I searched for album art for the artist singles within the example design to recreate the app’s components.

Music Album Icons
Album art icons for design challenge

Color & Typography

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

Color Scheme Intrepid Music App
Color Scheme for Music App
UI Example Design
Example screen for color and typography

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 UI Elements

I then 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.

Sketch art board for music app design
Sketch art board for music app design
Background color for music app
Background color for music app
Music app UI elements
Music app UI elements
Music app UI elements
Music app UI elements

Design Deliverable

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.

Music app design

Conclusion

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.

Moving forward, I would like to create a music app interface that engages people with interaction with the cover art. Since I was limited to displaying one screen within the design constraints, I would love to flesh out the interaction design for this application.