top of page

Liz Kucharska

Sr.product designer
+ design coach

Rewind The Radio

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!

Where:

Audacy

When:

2020 (+ongoing)

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.

//PROCESS//

Concept #1

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. This is typically counter-intuitive for designing frameworks, however I was happy to accommodate with hi-fi off the get-go.

​

Results from rapid testing:

​

  • 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.

​

  • 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 looking for am/pm clock formats in this context.

​

  • 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, if a user was trying to find a show they listen to frequently.

​

  • Product owners had plans to include data relative to each aired show, such as discussed topics or segment timestamps, which would require more screen real estate than was allotted in this design.

​

​

Concept #2

Taking 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 something with horizontal interactions, a swimlane-style UI was developed. One important note was that a horizontal UI could create parity between Mobile and what the Web Player version of Rewind might become. Since we worked on the Mobile App version of this feature first, the product owners advised it would make sense to try tackling interactions that could be similarly executed in both platforms, if possible.

​

Test results & feedback:

​

  • Card idea was well received, however the remainder of the player screen left a lot to be desired - There was a lot of real estate left for player controls

  • Users wanted to interact with the progress bar in this view, but were unable to do so

  • Users wanted to see timestamps/duration on progress bars

  • Debates happened between play button & show artwork positioning (left vs. right side)

  • 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

​

​

Scrub bars, errors, etc.

After getting the initial concepst into the hands of testers, we realized a lot of logic gaps that needed to be filled and defined. One big one: Scrub bars (or progress bars, whatever you prefer.) We had so many different possible situations for Rewind that we had to capture them before proceeding too far. Segment indicators were going to be plentiful, some shows were partially re-playable, some shows were Live-Only, and we had to consider Ad breaks in Rewind as well.

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 owners and other team members:

​​

  • 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 #3

I mentioned earlier that there were plans to add more robust data to aired show objects. In order to plan for upgraded future execution, some additional concepts were designed for testing. In this version, cards were able to display topics mentioned in a given segment with the ability to play the segments in a list. This concept however was not designed or tested further due to limited backend data and tech setbacks. The blue sky situation would have been a much larger flow with Topics that could be listened to, followed by a user, and populated in a news feed. This was deprioritized, but still fun to consider as a future possibilty.

 

Final 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 is able to house more information in the future if needed. This version also works effectively on the Web platform as we have hoped.

​

Testing through this version with users had 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, but for now are serving as Advertisement indicators and topic changes.

​

The version you see in these photos  (and can play with in the actual app) is utilizing the Audacy rebrand. This feature is frequently being adjusted, tweaked, and stabilized.

//CONCLUSION//

Key Takeaways and Findings

Treading new territory is always a team effort. Along with the assistance of Engineers, Product Owners, Researchers, and Users, we were able to create a new feature that the user base was very excited about.

​

Key Learnings:

  • There are large differences between (Stop) and (Pause)  buttons and their backend functionality, and there continue to be varying expectations of (Fast Forward) and (Back) buttons in relation to Rewind audio

  • Creating an option that's flexible cross-platform and allows space for future adjustments is generally a good route to take when working with a bottlenecked engineering team

  • Concept #2 was not successful due to some shortcomings, but provided good direction for future versions and interactivity

  • It would have been beneficial to use more Low-Fi wireframes to test even more ideas, so it's important to champion the benefits on Low-Fi design work

​

bottom of page