KUOW Mobile App

KUOW is a thriving NPR radio station local to Seattle that recently rebranded to appeal to a younger demographic.

KUOW’s app was quickly aging out of relevance. They needed to drastically increase the functionality and center the experience on modern listening habits. I modernized the functionality, and gave the app a sharp visual approach that caters to KUOW’s younger target audience while keeping in mind their established donors.

Role
UX/UI Designer: Research, IA, UX, UI
For
KUOW, NPR Station
Type
Mobile App
Devices
iOS & Android (Xamarin)

Problem statement

[User] struggles with [desired action] because [challenge].

KUOW struggles with appealing to younger listeners to their app because the design is dated, has UX issues and users can listen to KUOW content on the NPR One app.

Goals

  1. Provide value to a younger audience through the mobile app.
  2. Incorporate the new KUOW branding.

My Role

I was the lead designer on this project. Some research was provided by the client. I was assisted in IA brainstorming by my talented coworker Gina McDonald. I also based my visual designs off the lovely typographic stylings of Jon White, and the KUOW brand style guide. Everything else you see was created by me.

• Client presentation

• Sketching

• Information architecture

• User flows

• Wireframing

• User Interface design (UI)

• Asset export

• Design QA

Programs Used

Sketch: user flows, wireframes, UI

Adobe Photoshop: photo editing

Adobe Illustrator: icon editing

Invision: prototyping

Research

First, I did a heuristic analysis of their current app and discovered some major usability problems. The worst example was the auto-play functionality on the story detail pages. This had three major issues:


  1. Interrupts users already listening to a story.
  2. Distracts user who want to read.
  3. Plays regardless of mute settings!

Old app with autoplaying audio on story pages

The user personas created during the donation form redesign provided a great place to start exploring what the new app should be. Inspired by Alisha’s listening habits, I did an audit of several popular podcasting and radio apps.


There was a great opportunity to create a hybrid app that offered on-demand stories and easy access live broadcast. I knew top of the list was the ability to create a queue, subscribe to stories and listen to the KUOW library of content with ease.

Hypothesis

If [feature] then [outcome] because of [research]

If we focus the app on a listener and audio first experience, then we will attract younger audience to the app because it will offer more value than the NPR one app and compete effectively against the popular podcast apps for listening time.

Catering to both personas

After exploring multiple options, I brought my focus back with my second user persona: Joe the Dedicated Donor. I settled on a simple top and bottom tab bar system. This provided a strong information scent to encourage Joe to explore the app.


I elevated familiar content (podcasts & channels) and grouped the less intuitive sections into a discover tab. For the home screen, I made use of a traditional news feed. Throughout the app, access to the queue is only a single tap away.


As I moved into wireframes I wanted to make sure the queue and listening experiences were dialed in. I added swipe gestures for the Aspirational Listener and an explicit more menu for the Dedicated Donor. This allows listeners to add, remove, favorite and share stories quickly and easily. I took great care planning the swipe gestures by referencing Spotify’s swipe conventions. My goal was consistency across all screens of the app and memorability.

The New Brand

This was the second application of the new branding (see the KUOW donation form for the first) and I applied the same clean, modern approach while adapting it to mobile app conventions.

Adapting to all stories

A huge consideration for the app was adapting the design to the range of stories that KUOW produces; from gut-wrenching headlines to light humor. The lovely typography choices of More for headlines and PT Serif for body was provided by my coworker Jon White. From this starting point, I chose a black condensed face for headlines. A weight that is both space efficient and capable of handling any content.


As I moved into wireframes I wanted to make sure the queue and listening experiences were dialed in. I added swipe gestures for the Aspirational Listener and an explicit more menu for the Dedicated Donor. This allows listeners to add, remove, favorite and share stories quickly and easily. I took great care planning the swipe gestures by referencing Spotify’s swipe conventions. My goal was consistency across all screens of the app and memorability.

The app home screen’s visual structure is similar to popular news apps to reinforce the consistently fresh content.


The queue is accessible from multiple points, the mini player, and both sides of the top section level headers. The queue icon (right) is always present throughout the app, and the live broadcast shortcut (left) appears at all top level screens.

The queue is a unique combination of the player controls and the up next list of stories. All swipe gestures work here, and bulk editing of the stories is quick and easy.

Visual Design

This was the second application of the new branding (see the KUOW donation form for the first) and I applied the same clean, modern approach while adapting it to mobile app conventions.

5 Star Review

My morning go-to. Love the graphics re-design. This app is reliable and makes taking a quick moment to listen in the morning easy.

Post Mortem

I wish I had spent more time on the tablet designs so they could have been more than the phone version stretched horizontally. Moving forward, I concurrently create designs for phone and tablet.


More importantly, this app was also not tested with users before release. The app was not as stable as it should have been. In the future I would do a limited release and test with users before releasing to everyone.

Conclusion

This project is the best example of my UX and UI design skills. I am proud of this app because of the consistency and polish of everything from the navigation to the swipe gestures.


It was also a pleasure to work with the folks from KUOW. I had great meetings with the client to present and receive feedback on the work. Thanks to my amazing Project Manager Tara Ward, it was one of the smoothest projects we’ve ever run. We hit our deadlines with no scramble and cultivated a great relationship with the client resulting in Moby redesigning their main website after the completion of this project.