Case Study: Redesigning a live radio mobile experience

KEXP Mobile App

 
 
 

my Role:

Visual + UI Designer

THE framework:

10 Week Case Study Project
Seattle School of Visual Concepts: UI & Visual Design for Mobile Apps
Instructor: Jim Catel

IN A nutshell:

UI project with an emphasis on user flows. I concepted, wireframed, and built a visual system for an updated KEXP app.

 
 
 
 
KEXP-Hero.jpg
 
 
 
 

About the Project

RESEARCH:

KEXP is a listener powered non-profit arts organization.Using their existing website and app as a guide, we researched their brand and business to define user personas. We dived deep into every kind of potential user and what they each would be trying to accomplish when using the apps. The persona goals and pain points helped us identify the problems we wanted to solve with the app redesign.

PROBLEM STATEMENT/GOAL:

Build simple user flows to give listeners easy access to current and archived content and encourage them to discover more. Update the visual system to appeal to a diverse audience.

 
 
 
 

User Experience Brainstorm Exercise:

IMG_4002.jpg
 
 
 

User Personas:

 
 
 

The Visual System

 

VIBE:

discovery focused, eclectically curated, fun and approachable

COLOR:

Using mostly black and white with pops of yellow keeps the app feeling branded but minimizes competition with the eclectic content from the musicians and album art.

LAYOUT:

A clean and very minimal layout style makes it easier to navigate a content heavy and experiential app.

Photography:

Black and white photography helps make a consistent system out of content in a huge variety of photo and graphic styles.

Typography:

This is where the KEXP brand expression shines. Big bold, type and a helpful but straightforward tone of voice help guide the user through the app and encourage them to discover more.

 
 
 

Mood Board:

Oiselle-Moodboard-1.jpg
 

Style Guides:

KEXP-Type-and-Color.jpg
 
Type-Styles-and-Icons.jpg
 
 
 

The Design

I designed a home page with banners that link to discoverable content, app navigation, a media player, band info pages and a user flow for making a donation, for an overall user-focused and fun to explore app experience.

 
 
 

Home Screen:

Home-Page.jpg
 
 

Donation Flow:

 
 
Artist-Screens.jpg
 
 
KEXP-Media-Player.jpg
 
 
 
Icons.jpg