Case Study

KEXP App

UX/UI Design

What's KEXP?

KEXP is a nonprofit arts organization serving music lovers through in-person, broadcast, and online programming.  KEXP operates one of the most influential listener-supported radio stations in the world, 90.3 KEXP-FM Seattle, with online and on-air service reaching over 200,000 global listeners each week.

PROJECT SUMMARY

+ GOAL — Work with a subset of the user base to gather feedback about potential improvements to the existing application.

​​+ PLAN — User Research (interview / survey) on the existing KEXP app, identify existing pain-points (if any) and move to identify a new functional feature.

+ DESIGN — Design the new app by determining look and feel, compiling a content inventory, define your app and feature visual language and design system.

PROJECT GOAL​S

+ Define and develop an additional feature into the KEXP iOS mobile app.

ROLES

UX / UI design

Challenges / Improvements

+ Using user feedback, change the KEXP app so it is easy to work with.

+ Creating a cohesive design for the KEXP app, including the extra features.

User Interview​

In the 16 basic questions in user research, the three questions to find the user's pain points and their answers are below:

Q1. What do you like the least about the mobile application?​

Q2. Are there any features you think you need but are missing in the mobile application? Please describe.​

---

Q3. What is your goal when you want to use the mobile application?

---

Persona

Based on the interviews' result, I created a persona that reflects the results of what the user's pain points are.

A quote from the user would be,

To respond to his scenario, I provided an option to set up preferences as an additional feature of KEXP application.

User Flow and Wireframe

I built a user flow that is the focal point of the how to navigate the application. It ensures that the functionality is always visible to the user. So, I opted to show the global navigation bottom.

User Flow

In the main preferences, you can select a DJ, save the song from the archives, tag songs and sort songs.

Wireframe

The wireframes show each step of the user flow.

Core Loop

As a virtuous cycle where users use the KEXP app more often, we assume the following cycle:

When you need to listen to your favorite music... Go back to step 1.
​This virtuous cycle would make it easier for the user to listen with the KEXP app for a long time.

Design

Mood board

Style Guide and Components

The contrast between the bold Oswald font and the light Nunito Sans font is a wonderful combination, matching the KEXP logo.
They unify the color scheme with the use of tinted colors based on the KEXP logo color.

Prototype​

Each icon in the global navigation has a menu title.
​Only Icons visualization is sometimes not clear meaning for users. UX point of view, showing titles of the menu is essential to make the menu contents understandable to the user.

On Boarding

Preference - Choice of DJ

Play Live Stream / Preference - DJ

Play Archives / Save the Song / Tag

Tag the Song / Sort

Each interaction expands up / down by tapping, and arrows or icons (play / pause) showing some activity. I created attempted to make the motion as unified and simple as possible, so that the users can understand intuitively.

NEXT

view ​Illustration ​