2022 PRODUCT DESIGN NEWS MEDIA & PUBLIC RADIO

WBEZ Browse Screen Redesign — Improving Browse Screen Engagement

Overview

This redesign is currently live! Listen to live radio and explore local Chicago storytelling, download WBEZ on the app store.
BACKGROUND How might we ensure an engaging and seamless browse experience through a redesign? In an effort to increase user activity with other listening content apart from live listening, WBEZ set its sights on a full browse redesign. In this project I analyzed existing browse screen research and identified trouble areas, drafted multiple iterations of low/high fidelity screens based on feedback and usability, and collaborated with engineers on development changes and QA testing.

Internship project, 8 Weeks (Late March 2022 - Mid May 2022)
THE TEAM Working with the product team at Chicago Public Media (WBEZ) CPM’s product team consists of a creative set of individuals who are consistently finding ways to expand and surface curated listening and fact-based media. The team works across a range of products within web, app, and audio with the goal of highlighting and amplifying WBEZ stories through the development of meaningful experiences within all platforms.

Team: 1 product director, 1 product manager, 1 product associate, 3 engineers, and 1 product designer (that’s me)

Tools: Figma, Miro, Zeplin

Project start

RESEARCH Understanding existing app engagement research WBEZ is a live radio experience first and it was important for the team to illustrate that on their browse screen. However the old browse screen design overshadowed other experiences the app has to offer both in exposure and clicks.
Because of its emphasis on live listening and the most current news, the browse screen design pushes curated content below the fold, causing it to go unnoticed by users who don’t scroll.
IDEATION Visualizing improvements Given the data and insights derived from research, we want the browse redesign to achieve the following:
  • An optimized browse design that equally prioritizes different WBEZ content available
  • Limit interaction redundancy by omitting the listen live card
  • Boost listens on all aspects of the app

Iterations

DRAFTING Low and high fidelity wireframes Although shown together, the low fidelity wireframes were iterated first to show the team the basis on the different screen structures. By creating the high fidelity wireframes, it was easier for everyone to visualize each change. We explored a lot on how the featured story should be displayed and the formatting of the radio highlight buttons.
ITERATION 9 Proposed new browse screen After nine iterations and several design reviews/revisions with the product team, we unanimously came to an agreement that this design was the one we were moving forward with.

In development

PIVOTS Image & design continuity issues During the development phase of this project, we had to pivot and re-assess design decisions due to running into some issues.
  • The WBEZ logo overlaps with the 1:1 lead image when a subject face is nearing the top of the crop. Solutions to this were exploring different aspect ratios as well as re-introducing the opaque navigation bar instead of the full bleed
  • The filled buttons on the browse screen were inconsistent in terms of visual continuity in regards to the rest of the app. Cards on the radio tab used outlined buttons, we should carry this standard.
Another solution we explored for the lead image issue was having story editors manually center crop the images to fit well with the feature card. This was later dismissed due to the fact that it would add too many additional steps to the process of making a feature.

Final

FINAL DESIGN The redesigned browse screen The final iteration of the browse redesign project highlights the following changes:
  • Listen live from the player
    Removing the initial listen live card promotes new, but necessary user behavior; no interaction redundancy
  • Featured stories take center stage
    Highlights top of the morning stories that was once pushed below the fold
  • Designated spot for daily newscasts
    A listening experience separate from top stories has a newer and more optimized design
  • Explore more content
    Missed an important segment during live radio? Top stories has you covered, no need to skim through the past broadcast
POST LAUNCH DATA The impact of a redesign In combination with consistent push notifications, the browse screen redesign resulted in an increase in user engagement metrics. In particular, user activity with featured stories and recent highlights increased threefold.

Retropective

WHAT I LEARNED... ‍To communication frequently with engineers ‍Working on this project with Dillon (SWE), I experienced firsthand the value of strong communication and frequent check-ins. This allowed me to make sure we’re on the same page without having to compromise the initial design, and also gave me confidence that the implementation details weren’t overly complex. Whether it’s helping iron out small visual changes or understanding the coding constraints behind my designs, having that volley led to products that delivered great results to the user.
NEXT PROJECT: ‍WBEZ Push Notifications