Milkcrate - Music Player App

Platform: iOS

Tools: Illustrator, Adobe XD

Scope: 1 week

Role: : UI Designer

Overview: Milkcrate is a music player app catering to users who listen to electronic style music. The app allows for a visualizer display and various audio presets. This was created as part of an Adobe XD Daily Challenge.

Mood Board

It was important to get a sense of what has been established before in music player app space. When I decided to chose electronic music, I looked at the some of album, logos, and equipment associated with the sub-genres within electronic music.

Colour Palette

While dark colors are predominant in the genre of electronic music, I wanted to contrast it with some bright colors similarly found on DJ equipment. To give a feel that the user was mixing and performing their music. I was also inspired by the early MP3 craze of visualizers used by apps like WinAMP. Looking at equalizers gave me the reds and greens to balance off the dark greys and blacks on turntable decks, synthesizers, and drum machines.

Typography

For main headlines and titles I opted to go with Republica Minor. While conducting initial research of certain electronic artists, then tended to opt for very stylistic and abstract fonts. I wanted to keep thing legible on the mobile device, with a thick font that flowed well when reading. For the body copy text, Avant Garde BK was chosen. A slim font was a good contrast in style and is widely popular with the modern EDM crowd.

Icons / Bars / Buttons / Logo

Using an existing Adobe XD UI Kit and referring to the Apple iOS Design System, I crafted these icons for usage. Certain color combinations worked better than others but also required the use of Avante Grade Bk at a certain point size for legibility.  The logo was inspired of old milk jug crates. At the height of popularity with vinyl records, DJs would be ‘diggin’ thru the crates’ looking for records to sample beats and rhythms for new songs.

User Flow

For the music player I mapped out a general flow of how users would discover new artists, custom playlists, creating and sharing their own curated playlists, and accessing their library of music. One of the added features would be purchasing additional visualizers within the music player. While it is mentioned, the mapping of doing the in-app purchase is something I’ll look into the future.

Low Fidelity Wireframes

The splash screen would serve as an introduction to the mobile app telling the user the music player focuses on the electronic music scene. Home screen would serve as the new recommendations of artists and playlists called “Recommended Crates”. Skins are top recommended downloadable visualizers available for purchase. Ideally a mini store front would be crafted, without the need from leaving the music player app to the App Store.

High Fidelity Screens

When designing the “Now Playing” section, the emphasis on the play icon on the top bar would be emitting a pulsating volume animation. The screen would drop down showing the current track. In the corner would be favourite icon stating this song was in your library of tracks. The star would be a rating for song how popular it was within the electronic music community. Below on the audio controls I added the “visualizer” icon. When pressed the Now Playing screen would shift to a full screen display of the visualizer.