KEXP
A mobile app with a fresh new look ✨
There’s an app for that
OVERVIEW
For many Seattle locals, KEXP is a household name known for its music radio station but are often unaware of their mobile app.
KEXP’s legacy began in 1973 and to this day they play to an audience of over 200,000 listeners each week. Their efforts in spotlighting local musicians has garnered a lot of respect and support over the years.
KEXP’s Live on KEXP segment has especially grown in popularity, boasting millions of views per week on their Youtube Channel. It’s personally one of my favorite things about KEXP as well, and I wanted to find a way to bring it onto their mobile app as a new feature so others could learn about it. But there were other user problems to solve as well.
MY ROLE
My assignment in this project was to design a new feature in KEXP’s mobile app. This was done by conducting User Research through the form of User Interviews, Personas, and User Flows. Additionally I freshened up their Brand Identity. The final design features a video menu that showcases KEXP’s iconic “Live on KEXP”.
TOOLS
Figma (Wireframing, Prototyping) • Google Forms
The problem.
No onboarding or tutorial; landing page seems confusing.
There is no Live on KEXP feature
Favorites page, maroon color contrasts the rest of app
From a user’s perspective, the overall purpose of the app lacked definition and needed design consistency. The hero of the app is primarily radio and the Listen Live sessions, so implementing Live on KEXP video sessions seemed like a great added feature to draw in more traffic to the app.
RESEARCH
To start my research, I wrote out a User Interview survey using Google Form to get people’s first impressions of the app - what worked, what didn’t, and what they would want added.
The interview I conducted involved 7 participants.
Question topics covered …
Music listening preferences.
What’s your preferred music listening method? (i.e. streaming, live performances, radio, etc.)
KEXPerience.
What has been your experience with KEXP? Do you listen to their radio? Have you watched Live on KEXP performances?
User testing.
After downloading the app, what wasn’t intuitive? Was it easy to navigate? What would you change?
Highlight responses from my user interview.
A BRAND NEW FEATURE
Live on KEXP
With nearly 2.5 million subscribers on Youtube, KEXP’s Live on KEXP videos provide most of their viewing traffic and I wanted a way to bring this to their mobile app. Based on the user interview responses, others wanted this as well.
Speedy Ortiz performing at Live on KEXP.
My user persona - Jason - wanted to find more ways to watch Live on KEXP so he could enjoy his favorite bands and artist performances wherever he was.
As a way to validate my feature choice, I built a Core Loop to ensure continued use of the app and a new investment in KEXP.
Start
The Annotated Sketches shows Jason’s journey, starting from the Nav Bar, and selecting “Live on KEXP”.
Choose
The Live on KEXP landing page gives Jason a list of video options to choose from.
Play
Once Jason selects a video and plays, he has several next step options. In this scenario, he chooses to add the video to a new playlist.
Save
Adding to a playlist is simple. With a click of a few buttons, Jason can add his video to a playlist for watching later.
DESIGN
My design process involved getting to know the history and roots of KEXP and their listeners, while considering what other competitors (i.e. Spotify, Apple Music, Tidal …) were doing.
I compiled five branding words that best captured my vision for KEXP’s new mobile design.
STYLE GUIDE
Color - My style guide was influenced by the color choices that were dark in nature but had pops of light. The yellow/turquoise gradient introduced a sense of modern look that provided an edge to its overall design.
Type - Gilroy was selected as the header font as it added a contemporary, geometric shape, which provided enough contrast with the versatile and familiar subheader/body font, Roboto.
UI Components - Clean lines, plenty of spacing and padding, and a minimalist overall design. The gradient colors add a touch of flare and modernism.
Grid + Spacing - A 6-column grid on a 375px viewport.
Icons - All the icons designed and built for this project.
Images - A loading screen animation concept, as well as some header hero images from the Home and Live On KEXP pages.
Logos - Original design of KEXP’s logo was left intact and replaced with variations of colors from my style guide.
Navigation - A fixed bottom nav bar menu that was implemented into the final design.
FINAL DESIGN
PROTOTYPE
Video - A User Scenario walkthrough of adding a Live On KEXP video to a new playlist.
Final Thoughts
My final prototype displays a brand new KEXP look:
One that establishes familiarity and consistent navigation through the bottom nav bar, solving the problem of the confusing navigation on the app
A consistent design across all UI components
A new “Live on KEXP” feature for Jason to enjoy, viewable right from the app
Continued Efforts
Due to the 10-week timeline for this project, if I had more time, here are areas I would continue working on:
Further iterations based on user test studies
Rebuild the rest of the App’s information architecture