The audience analytics team at Chicago Public Media recently conducted a heat mapping study on the WBEZ app, revealing that over half of user interactions were only going to live radio, which significantly overshadowed other forms of audio content available.
2022
Nick DePrey
Shira Gersten
J. Kyle White-Sullivan
Oliver Holmberg
Dillon Kelley
Figma
Zeplin
Product Design
UX Research
During my time at Chicago Public Media, working exclusively on WBEZ, Chicago's NPR news station, I led the app's browse screen redesign project, which aimed to increase engagement, particularly with audio content other than live radio.
As the solo designer with the product team, in 6 months we created an updated browse screen that promoted featured stories, boosted exposure to new and changing content, and influenced user behaviors to eliminate redundant elements. My role involved analyzing existing engagement research, identifying pain points, iterating extensively based on feedback and usability, and working closely with engineers on development changes and QA testing.
Following the implementation of consistent push notifications, the redesign led to a significant increase in overall user to content interaction, with the featured story experiencing a peak of 304% and 230% for top stories within a month.
WBEZ initially designed their app primarily for live radio listening and that's what most users did. Unfortunately, this pushed other types of content below the fold, garnering less than 6% of app traffic.
Based on the data and insights from this research, we were challenged to rethink how we could design a more engaging and seamless browsing experience.
Improve content hierarchy
Identify the most important content types to highlight and restructure them, along with other content types.
Push hidden content up
Properly introduce radio highlights by giving the section more screen real estate, enticing users to scroll for more content.
Remove redundancy
Establish one, single element for the “listen live” feature and encourage new behaviors.
The browse screen had two access points for live radio—a top card and a bottom live player—making up 60% of user interactions. Removing the top card frees up space for more content and reinforces the bottom live player as a permanent feature accessible on all pages.
To simplify the design process, reorganizing the browse screen categories clarified element placements, while low-fidelity wireframes helped with structure explorations.
High-fidelity wireframes then made it easier to visualize small tweaks/changes for featured stories, radio highlights, and the latest news, as well as their combinations.
After 10+ iterations and several design reviews with the product team, we unanimously agreed on a design that elevates content visibility and highlights curated journalism.
1.
Live radio access
Eliminated redundancy by making live radio accessible through the player or the dedicated radio page.
2.
Compact newscasts
Optimized screen space with row cards, giving newscasts a distinctive appearance.
3.
Full bleed featured stories
Enhanced visual appeal with a full-bleed design, pushing stories up to ensure they are prominently displayed.
4.
Radio highlights section
Previously hidden content is now visible, allowing users to explore highlights from past broadcasts.
During development, we had to pivot and make some design changes after running into some issues.
1.
Logo overlap and faces
The logo overlapped with lead images featuring faces. We dismissed manual center-cropping due to complexity and instead opted for an opaque nav bar and adjusted aspect ratio.
2.
Button icon inconsistency
Filled buttons were inconsistent with the app’s design. We corrected this by standardizing to outlined buttons, as used on the radio tab.
After some design tweaks, regression and QA testing, and renaming categories (e.g., "Top Stories" from "Radio Highlights"), the redesigned browse screen was finalized and shipped.
With consistent push notifications, the redesign significantly boosted overall user engagement, particularly with the featured story experiencing a peak of 304% and 230% for top stories within a month.
I learned to trust myself and my design decisions, especially in removing the "Listen Live" card, even though it was the most interacted with element. The change was good and needed—it helped create a more unified listening experience and ultimately led to an increase in overall engagement, which made feel supported and happy that it all worked out.
I'm forever grateful to the Chicago Public Media product team for trusting me and challenging me throughout this project, and I will always carry these learnings with me.