KPCC for iPhone

Designing new ways for Angelinos to listen to the public radio they love.

Responsibilities:
Product strategy, Product design, Prototyping

KPCC, the second largest public radio station in the U.S., has earned a loyal audience of 700,000 weekly radio listeners. In 2014, KPCC set out to build a new iOS app with the goal of garnering an equally devoted smartphone audience. With so many options for listening on smartphones, and the convenience of broadcast radio, making an iPhone app that felt indispensable was a high bar to reach for.

Metrics and user feedback from KPCC's previous-generation iPhone app showed existing users overwhelming opted to simply consume the live stream, despite the app's many features.

Our user interviews uncovered common themes among KPCC's most engaged listeners. They loved our live broadcast, but when their favorite programs weren't on they would tune out completely, or listen to podcasts instead.

Using these inputs as a guide, we set to work exploring how to build a compelling listening-focused app. Working with KPCC’s editorial and business leadership, the product team arrived at three desired outcomes:

  • 1.Create compelling listening options beyond live broadcast
  • 2.Grow the funnel of potential KPCC members
  • 3.Use data to learn about users' content preferences
Compass Icon Created with Sketch.

Discovery

The first UX sprint focused on key customer journeys where KPCC's app could fit into people's busy lives. Creating customer journey maps helped us to think beyond simple activities and user stories, exploring the emotional and psychological dimensions of their daily lives and interactions with our app.

While there were many potential touchpoints worth exploring, we mapped three key scenarios: waking up to news, the daily commute, and casual listening. While KPCC creates content for several distinct mediums - audio, text, live events - all our customer journeys pointed toward listening as the key use case.

Casual ListeningWaking Up To NewsDaily Commute

User research informed the creation of customer journey maps, which identified key moments where KPCC’s smartphone app could support and enhance users’ daily routines.

The KPCC product team was excited about the opportunity to leverage KPCC’s great audio to build and app that fit into people’s busy lives. But excitement alone isn't enough to get a product built inside an organization - it requires buy-in across the company. Our product manager and I gathered our stakeholders together and presented our vision for a listening-focused app. This wasn't an easy sell, especially since it meant leaving important parts of KPCC's content out of the product.

My part of the pitch made the case for an audio-driven, single function app that could distinguish itself in a sea of apps competing for attention. I mapped this vision back to our audience metrics, user research and customer journeys.

Slides from our product strategy review meeting. I made the case that we had to go beyond simply repackaging our existing content - that our product had to be both remarkable and respectful of the way our service fit into people’s lives.

By putting our best pitching skills to work, we convinced our editorial leaders that we were on the right path. Creating a compelling vision early in the process was critical to building confidence among our stakeholders and getting the green light to move forward.

Now that we had agreement on a set principles and outcomes for our app, it was time to move into design and ideation.

Target Icon 2 Created with Sketch.

Design

The first design sprint was spent sketching concepts that would support distinct modes of listening beyond the live stream. Through quick rounds of iteration and feedback, I arrived at the idea that the player itself needed to anchor the experience. Screens and flows related to discovery and selection act as paths that all lead back to the player.

Once we had established a structure for the app that would support our desired outcomes, I began exhaustively wireframing the app's screens. I created flows around user sign-in and personalization; smarter, more personalized membership appeals; and voice activation.

These wireframes were imported into Keynote and rough prototypes were created to begin exploring transitions and animations. Keynote was a great tool for quickly validating the app’s design, giving me just the right level of fidelity to communicate how users would move through the app.

Flow:Adding Favorites

  1. First-time “blank slate”
  2. Add favorite shows
  3. Add favorite topics
  4. Build “Favorites” playlist

Flow:Tailored Membership Appeals

Flow:Voice-Activated Interface

  1. First-time coaching
  2. Asking for input
  3. Fetching results
  4. Loading audio

Flow:On-Demand Listening

  1. On-demand player
  2. Seek back/forward
  3. Swipe between stories
  4. View more info

Thanks to our Keynote prototypes, we quickly recognized the shortcomings in some of the flows we created. There were too many discrete concepts and sections, and discovering content felt like too much work. I needed to improve the app’s conceptual clarity and further simplify the experience. We regrouped and I set to work revising the design with the goal of further reducing the friction of discovering and selecting audio.

In the process of revising the design, we converged on two marquee features for the app:

Live Rewind, which gave users the ability to time shift their listening back seconds or even hours (thanks to some cool streaming server tech developed at KPCC).

Recommendations, a daily curated listening experience that gave users the best of public radio in short, easy-to-consume segments.

After this final round of revisions, we were confident we had the right design. Refined comps were produced for all the screens that might be in play for the first version of the app, and I focused on details and polish in Sketch before prepping assets and specs for development.

Home screen

Stroke 193 Created with Sketch.

Prototyping

Once visual design was complete, I identified areas where comps needed to be prototyped to document detailed animations and transitions. Fortunately, tools for prototyping microinteractions and native apps exploded in 2014, so there were plenty of tools to choose from.

I settled on Framer.js as my prototyping tool of choice. Its javascript-driven workflow allowed me to interate quickly, and also allowed me to hack real audio into the prototypes.

I built prototypes to communicate flows in the app where a complex set of transitions and animations needed to occur in order for the microinteractions to feel polished and delightful. I focused on the most important moments in the app: initiating and rewinding the live stream, moving between on-demand episodes, and a carefully sequenced app onboarding experience.

PausePlay

Live Stream & Preroll

Designing KPCC for iPhone was both a challenge and a delight. It was especially rewarding working across many disciplines (customer research, product strategy, UI and interaction design, even sound engineering) to bring a product to life. You can check out the final product by downloading KPCC for iPhone in the App Store.