KEXP

NEW FEATURE ON THE KEXP APP

project role

SVC student

UX designer

Visual designer

process


Personas

User flow

Wire frames
Mood board
Style guide

UI library

Prototype


BACKGROUND


KEXP is a non-profit arts organization based in Seattle, WA. KEXP operates a listener-supported radio station, 90.3 KEXP-FM Seattle. It offers on-air and online music service and reaches over 200,000 global listeners each week. Its mission is to provide music programming that is relevant to music lovers of all ages.

Currently, KEXP has a mobile app that can stream music from the live on-air show and can also play recently aired shows that have been archived.

scenario

“As a music app user when I drive, I want to have a simplified car mode version of the music app so I can quickly and easily pick a playlist I like and focus on driving. Tap and go.”

discovery

I interviewed two people about how they use music streaming apps and created a persona. One user needed a simplified version of the music app that matched his specific task or situation, such as driving. For example, the user wanted to easily pick a playlist and focus on driving without having to fumble with settings. His pain points were too many extra visual elements on the screen.

sorting + organizing

I wrote all the persona’s goals and frustrations on post-it notes to organize them by category.

defining the problem

I focused on defining the problem into one sentence to show the Who, What, and Why in order to best create a user flow that fit the needs of the persona I created.

User Flow

I sketched out a user flow showing the steps needed to fulfill the task of easily listening to a playlist in the car. The steps had to be simple to enable the user to play a song from a favorite playlist using the fewest steps possible.

Wire frames

I sketched out what visual elements needed to be on each screen so the user could easily navigate the interface and get to the song he wanted to hear.

Wire frames

I highlighted where the user would tap to move from screen to screen.

Visual Language

mood board + Style board

• Colors: KEXP’s magenta and purple lights used in live performances inspired the color palette. I added orange to be the accent color because it stands out over white and purple backgrounds.

• Texture: One particular song I heard on the app inspired me to create a scribbly surface for the background of the app.

• Typography: For the car mode version of the KEXP app to be successful, I needed to make sure the typography was functional, clear, and legible; therefore I chose Akkurat in regular and bold weights.

• Icons: The car mode version of the app required bigger icons and fewer words per screen to help the user navigate the app faster.

solution

User Testing

I tested my app on the person I interviewed. During the test, I observed him using the app and I listened to his comments as he interpreted information and made decisions on each screen.

Where could i go from here?

I’m intrigued with the concept of designing UI and UX based on the user’s situation. I’d like to explore more projects through this angle. A full comparison between a car mode version of the app and the full mode version of the app would be interesting to do. Then I could truly see how simple the car mode version can be.

What did i learn?

In the design process, I realized that sometimes it is difficult to separate my needs from the user’s needs. Given that issue, creating a user flow for the user’s specific wants and needs on each step, on each screen, is important.

Using the app called Mirror in Sketch to see my designs live on a mobile screen as I was designing them was instrumental to seeing how the size of all visual elements would look on the phone.

Prototyping was essential in determining if the user flow was working.