Unsolicited radio app
Seattle’s legendary public radio station KEXP needed a revised app in a bad way circa 2016. This was the proposal I pitched.
KEXP brings some of the most innovative music programming on earth live into my car. And when I want to make note of a new song to download later, I could make use of an app like Shazam to identify the song and remember it for me. That is, at least, when the song is mainstream enough to be in Shazam’s library. Which, with KEXP, it often isn’t.
Fortunately, KEXP puts out their own app which has a couple of different uses. While the app appears to be mainly designed for people to listen to KEXP over their mobile device, I mainly use it to make note of those new songs I want to return to. So I listen on the radio, but tap the star to “favorite” songs on the Listen Now screen, which updates in real time even if you’re not streaming the music.
The backend of the app is rock solid. It never crashes, never forgets my history. It works great. But, as a UI designer, the front end has a series of poor design choices that are slowly getting to me. Like so many choices designers make, they aren’t breaking the experience. But they’re adding drag to user interactions. Unnecessary weight in a user’s daily interaction with an otherwise great app.
Inventory of pain points
Things that go together should go together. But in this app, they simply didn’t.
Proximity was really hindering my use. It seemed like things were clustered in arbitrary groups.
Request, Volume, and Favorite were clustered together. The More Information (oddly a gray angle bracket) icon floated in its own realm.
Why separate the volume from the other main control option, play/pause? They needed to be grouped together. And elements that needed to be kept apart end up next door to one another.
Before: Poor layout
The Favorites system does actually need to make two appearances on the interface. One favorites the song, and the second takes the user to a list of all the songs they’ve ever favorited.
But they’re right on top of one another. So every time I went to favorite a song, I'd have to stop and think about which star to push. The bottom Favorite was where it belonged. It was in the navigation, at the bottom of the screen. The problem was the top star. It needed to be up by the song information.
Go with the flow
To get a handle on what I would need this UI to do, I carefully worked out user jobs and what routes they would take to accomplish their tasks
Wired for success
Next, I laid out wireframe prototypes that I could run by friends and family for feedback
Before: Tiny banner ads
.jpeg)
After: Air break full screen ads
Sponsor
shout outs
KEXP is a non-profit that is funded by listeners and sponsors. But their current sponsor placement was almost unreadable. KEXP had ported over existing banner images from their website. The resulting images, designed to run at 728 pixels wide on a laptop now took up a tiny ribbon on a mobile screen.
So I pulled the difficult-to-read banner ads and designed a prominent ad space for the “Air Break” screen.
Hi-Fi
In the end, I wanted a high fidelity mockups to send over to KEXP. I wanted to make sure this potential client knew that I could deliver a finished design project for an engineer to build from.
