Mockup of KEXP app on iPhone with headphones.

KEXP Mobile App

KEXP Mobile App

Background


As a pioneer in digital music streaming, Seattle’s KEXP radio station needed a mobile app to live up to its heritage. This mobile app concept and visual language system was created over the course of 10 weeks.

SVC Seattle: UI & Visual Design for Mobile Devices
Instructor: Jim Catel

Contributions

User Research, UI & Visual Design

Tools

Adobe Photoshop, Adobe Illustrator

User Research


To identify likely users of KEXP’s mobile app, I researched their listener base and organizational values and focus. Mobile app users were also likely to interact with KEXP on other digital platforms, so Facebook’s user reviews section proved insightful. Quotes posted in KEXP’s Facebook reviews were used to inform two personas that exemplified audience demographic trends and potential app users.

KEXP Persona 1-sheeters.

I’ve been a KEXP Amplifier for a while now, but felt moved to make another donation to KEXP today, in my daughter’s name. She is off at college now, 2,400 miles away and studying music. She is able to stay connected to KEXP with the app on her phone and we still talk about new music we are discovering.”

Love, love, love this station. Streaming daily out near Boston. KEXP knows what I want to hear (without asking!) and comforts listeners like a friend in these crazy times. Great DJ’s.”

Visual Research & User Stories


KEXP listeners comprise a broad user base defined by their deep appreciation of KEXP’s historical expertise and expansive content. My persona research indicated that the visual design would need to resonate with user’s feelings of community, discovery and authenticity.

During my visual research, I looked at how music was consumed in the past. I felt that mix tapes embodied KEXP’s emphasis on new music discovery and meticulous music curation, while also conveying a sense of familiarity and sharing between friends.

KEXP moodboard inspired by mixtapes.
KEXP Visual Style Board.

Visual Design Language System


KEXP’s musical knowledge and expertise is extensive. It was important to create a flexible system of elements and components that provided room for the KEXP app to grow and adapt over time.

KEXP-VDL-p1
KEXP-VDL-p2
KEXP-VDL-p3
KEXP-VDL-p4

Sample Screens


KEXP Home Screen
KEXP Timeline and Mini Player
KEXP full-screen Media Player
KEXP Article List
KEXP Article Detail.
KEXP Donation Carousel
KEXP active text input field.
KEXP form error field.