Rewind the Radio // Audacy
Not-so-live-streaming broadcasts for those who missed their favorite radio show
ROLE
Lead product designer
TIMELINE
Sept 2020 inception - Ongoing
The challenge
Traditionally, radio has been live and direct - You have to be listening live in order to not miss out on your favorite show. Audacy was looking to change that: With increasingly sporadic schedules, commutes, and varying connectivity, users were missing out on what they wanted to hear. Advancements in radio technology have allowed Audacy to elevate the radio game by letting users rewind the radio on some of their major AM/FM stations for up to 24hrs!
As a competitor in live radio streaming, being able to rewind aired shows has never been done before, and Audacy was determined to be the first. This, of course, comes with it's own set of unique challenges, both on the design side as well as the tech side.
This was a very exciting opportunity as the leading designer to spearhead a completely new feature and create something that is familiar enough to be useable, but also exciting enough to get users excited to listen using new technology.
Initial Feature Requirements
All of our Audacy users are familiar with audio and video player interfaces, however in the case of Rewind, unique requirements were identified by the product team:
It had to be clear to users that select radio stations were going to be rewind-enabled.
Most shows are aired according to a repeating daily schedule. However, some sports events and news were off-schedule and sometimes NOT re-playable due to legal restrictions.
Stakeholders expressed the need to display segments in the player, for either ad breaks or topic changes that users can quickly skip through.
Users had to easily tell if they were listening to a Live On-Air show or a previously aired broadcast, and needed the ability to switch back to Live On-Air easily.
Concept 1
Results from rapid testing
Taking the predefined requirements as a starting point (and discovering more requirements as the process moved forward), the first concept was a list of playable audio as an expandable state of the player.
This concept included information such as: On-air times, rewind-specific player controls, an icon to open the expanded state of the player with rewindable content, and station/show info. The shows were ordered based on ascending play order.
The Audacy stakeholder team has a strong preference for high-fidelity designs with station context, so there were not many wireframes in this project aside from on-paper sketches, even at the earlier phases.
The good stuff
Stakeholders enjoyed the simplicity of this design, however there was a desire to test a horizontal-scrolling version. The reasoning was that Audacy users were familiar with scrolling through related content using horizontal gestures.
The testers enjoyed the clean and simple layout. However, product owners had plans to include more info regarding aired shows. Eventually, episodes would include chaptering, topics, or segment timestamps. This would require more screen real estate than was allotted in this design.
What could be improved
Live On-Air show was not prominent enough and needed more visual weight to differentiate between already aired content, and live content.
Scrub bar was displaying duration of aired content, however users were accustomed to am/pm clock formats based on radio format.
There were concerns about the Timeline Icon affordance not being obvious enough. A large portion of Audacy users are on the older side, and not as familiar with iconography (more on that later)
There was a desire to display Show artwork in the expanded state of the player for faster scanning.
Concept 2
Results from rapid testing
After gathering the feedback from the first version, a horizontal UI was tested. At this point we didn't tackle the initial changes of the collapsed player, the focus was the expanded state for now. Since stakeholders and testers were eager to see UI with horizontal interactions, a card-style design was proposed. One important note was that a horizontal UI could create parity between Mobile and the future Web Player version.
One of the key goals for future work was to deploy a similar experience between app & web. (of course, differences were unavoidable in some cases, but a cohesive experience wherever possible was desired.)
The good stuff
Card idea was well received, it was easy to understand and the horizontal swiping was intuitive.
Users wanted to see timestamps/duration on progress bars
There were some debates between play button & show artwork positioning (left vs. right side)
What could be improved
The remainder of the player screen left a lot to be desired - There was a lot of real estate left for player controls, or other utility.
Users wanted to see timestamps/duration on progress bars
Live On-Air show still was not prominent enough
Needed an easy way to jump back to the Live On-Air stream, which was not obvious in this iteration
After putting the conceptual designs in the hands of testers, we realized some logic gaps that needed to be defined.
Scrub bars, errors, etc.
All possible scrub bar states should be considered and accounted for
Episode segments to indicate ad breaks, changes in topics or chapters, and non-scrubbable sections
It should be clear to the user why they can’t scrub all the way to the end during a halfway finished show.
Concept #3
As mentioned briefly earlier, there were plans to add more robust data to aired show objects which would display topics . Therefore, some additional concepts were designed for testing the future. In this version, cards were able to display topics / chapters in an episode, with the ability to play the segments from a list.
This concept however was not developed further due to limited backend data and tech setbacks at the time. It had to be deprioritized until our backend capabilities were upgraded to allow for chaptering.
Launch version
After working through a few more card options, the current state of the Rewind player has been decided - The team proceeded with a minimal card view which could be horizontally extended and house more information in the future. This version also worked effectively on the Web platform as we have hoped.
Testing this version with users accrued very pleasant results.
Users understood how to return to the Live Stream easily, were not confused about card interactions and were able to determine the difference between Playable and Unplayable content. Segments haven't reached their full potential yet. During launch, they were serving as Advertisement and topic change indicators without readable text yet.
The version pictured in screenshots below utilized 2021 branding of the Audacy platform. Since then, Audacy launched a new look and feel of the app. This feature is being used as a core function of the app to this day.
