Despite being the core of iHeartRadio’s business, 800+ live radio stations lacked a dedicated space within the mobile app. How can we create an in-app representation of a terrestrial radio station experience?
My Role
UX research, strategy, prototyping, and visual design.
Timeline
Sep - Nov 2019
Partners
Helen Maxwell, Product Manager
Elise Masanga, UX Designer
Selecting an artist, playlist, or podcast would take the user to a profile page. Conversely, selecting a live station would open the full screen player and begin playback.
Overview
Radio serves as a familiar companion for millions of listeners across the United States, and it continues to be the core of iHeartRadio’s digital experience. Despite their importance, live radio stations lacked dedicated profiles within the flagship mobile products—something other content types always had.
There had been previous attempts to rectify this, but for one reason or another, the projects always stalled. Finally, a multi-disciplinary squad formed to tackle the live radio experience, and we received the official green light from leadership to create this new experience. Acting quickly, the squad aligned on the following goals:
Increase engagement with live stations. Users would have an opportunity to explore station content that was only available on web, like recently played songs, blog posts written by DJs, and contests.
Introduce new artists and podcasts. By displaying recently played tracks and station podcasts, live station profiles could serve as a gateway for users to discover new content.
Create consistency across content types. Despite being the most-streamed content type, live stations did not have their own profile pages like artist radio, podcasts, and playlists. This inconsistent experience had long been a pet peeve within the organization.
Pressure-test design patterns. This was the first major initiative to use iHeartRadio’s new design system, Companion.
Most importantly: these new profiles could not negatively impact streaming numbers or downstream retention.
Previously designed mockups with legacy UI. We used this as a baseline for any new work.
Challenge
My initial assumption was that since there were so many previous attempts to get this project started, there was no need to start from scratch. As I read through the existing UX research, however, I noticed holes in the data:
Competitor analysis was limited to a handful of screenshots that were useful in identifying content similarities, but was out of date and lacked real analysis.
The existing mockups used legacy designs. We’d need to not only completely update the UI, but create new components that did not exist yet in the design system.
User testing results were skewed due to leading questions in the script.
I connected with another UX designer to assist with competitor analysis; I also created an InVision prototype with the legacy mockups to retest with users.
The MVP above-the-fold design. Additional challenges to this project included creating logic accounting for missing data points from stations, as well as how the profile would scale to international markets.
Solution
Once the prototype was complete, I rewrote scripts and with the support of another UX Designer, built two separate tests in UserTesting aiming for insight into these points:
Usability We know need to update the UI, but can we maintain the hierarchy? How easily can participants complete tasks related to the experience?
Expectations Are participants satisfied with the content on the page? Can we measure their engagement?
Participants were current iHeartRadio users who had listened to a live radio station within the last three months. There were no restrictions on age, but all were iOS users to match the existing prototype.
Results
Results from both tests were surprisingly positive, and I was able to deliver the following recommendations to product and leadership:
Keep hierarchy mostly intact. The current order of content did align with user expectations and interests, but we should consider minor adjustments to better align with current business goals. For example, podcasts have become more important in previous years, so placing that module further up the page may help with awareness and engagement.
Remove features with high friction points for MVP. Tasks around contacting the local station were met with confusion. The feature was not deemed as essential by participants, and including it in MVP would require additional work that might have held up the entire project.
This synthesis, combined with the new competitor analysis, resulted in more than enough info to move forward with visuals. Further discussions between product, engineering, and design helped narrow down what the MVP product looked like—including how the live profile would localize in international markets—and what would need to be released in future phases. Several new design system components were necessary to implement the design, and much consideration was made to ensure that there was ample time for QA testing.
Snapshots of the current live profile experience. Updates since initial rollout include expanded schedules and new content carousels.
Conclusion
The MVP was A/B tested early in December 2019. As soon as analytics could confirm the new experience did not negatively impact stream rates, the rollout was expanded to 100%.
Initial reactions from users were positive, and the squad continued to introduce new features and updates to enhance the experience, like expanded schedules and new content carousels. Today, live profiles are the most-visited page type in both the iOS and Android apps.