Mobile Audio UI

There are more music apps than ever. However, few of them are made for people like me. Instead of renting music from Spotify, I buy my own copy from sites like Bandcamp. Additionally, I have other kinds of MP3s, like audiobooks, stand-up comedy albums, and ultra-long podcasts.

I want to make four apps, each laser-focused on one type of audio. These apps will share a codebase and similar interfaces, each fine-tuned to their content.

Design and Interaction

UI, UX, and Pixel-Perfect Mockups


Check it out

Let's Talk Touch Targets

Every button in my design follows Apple's Human Interface Guidelines, with a touch target of at least 44×44pt.

My ultra-wide scrubber is easy to use with one hand, by righties or lefties.

Scrubber controls on popular apps require far more accuracy to use.

Not Hieroglyphs

I have trouble divining the meaning of the endless glyphs on my phone. Words communicate actions more clearly.

Super Scrubber

Grab the waveform from any location and slide horizontally to change your place in a song.

Color is sampled from the album artwork to tint the scrubber and upcoming tracks.

Previous and upcoming tracks are shown inline.

The current track is prominently displayed under the album artwork.

Podcast ads detected by chapter names are automatically skipped. You can also select which chapters you'd like to skip — neat, huh?

Big(ger) Buttons

Playback buttons are on by default. You can remove them for a gesture-only interface.

Tap on the album artwork to play/pause. Swipe left and right to change tracks.

Tiny Hints

The shape around the bottom buttons is a clever detail to subtly hint at something more below.


This common design pattern has been used since the dawn of GUIs — tabs!


Buttons are obvious, and gestures are fast. I created this interface so both are first-class citizens.

You can swipe horizontally, or use the buttons, to change tracks.

Swipe vertically to scroll down and use the bottom tabs.

The scrubber and buttons stay on screen.

Swipe to quickly move between tabs.

iPhone SE

iPhone 8

iPhone X

iPhone 11 Pro Max