iHeartMedia: Live Console
Overview
iHeartMedia is looking to modernize the software used by their talent to run live radio shows. They want to create an internal tool that out preforms the leading software and is customizable to their radio hosts.
Role
UX Designer: UI & Prototypes
Team
Tanya Balderas: Senior UX Designer
James Prather, PhD: Senior UX Researcher
Tools
Figma & Microsoft Teams
Duration
7 months
The iHeartMedia team has a slew of internal tools that help support their radio hosts, sales teams, and creative producers. I joined their UX team to help work on the Sound (+) Live Console. A project that was set to modernize how live radio hosts ran their shows and allow iHeartMedia to custom build a software for their hosts.
By the time I had joined, Tanya Balderas and James Prather had already preformed a massive amount of research to design a healthy outline of what this software required. My responsibility was to design the interactive details within the modules of the Live Console.
Our biggest hurdle was the amount of information that the hosts need at all times. Our users felt most comfortable with a lot of visual data on their screen at once. Our goal was to understand and streamline these screens without losing the personal intricacy that this data provided.
Challenge
Radio Hosts want software that still carries familiar patterns, but is updated and modernized. How can I organize the amount of data necessary while keeping cognitive load to a minimum?
Competitors
What were our radio hosts using currently and what interactions did they need to run their radio show? Zetta Cloud was the current tool at iHeartMedia, and NexGen was a competitor (and apparently the preferred software).
Zetta Cloud
NexGen
Inspiration from Life
My responsibility as the interaction designer was to help design the interactions within the separate modules. I took most of my inspiration from the radio hosts’ physical setup. There are a lot of tactile interactions for them on their soundboards and in their studio set up. I wanted to them to have that same feeling with my designs and interactions.
The largest leaps I made in my designs were when our team worked directly with the live hosts. Initially we only showed them static images to gauge their opinions and received lukewarm feedback. When I created clickable prototypes for them, that is when they really felt that this software was real and they gave us fabulous actionable feedback.
Hot Keys
The “Hot Key” board is a way for hosts to save soundbites and play them at a moments notice. The most common use is to have short sound effects saved in these buttons. Examples we heard from radio hosts were a cow’s moo, an audience applause, and the classic “ba-dum-tss” from a drum.
The first task to was to “Audition” a sound clip. Auditioning is used by live hosts and their teams when they want to listen to a clip and not have it play on air. This is especially important for hotkeys, as radio hosts want to make sure the sound coded into the key is the sound they are expecting.
The second task was to create a new hot key page and drag a song from the library into that page. They could then change the color or the name of that hot key.
Finally the third task was testing the search functionality in the hot key module. We had suggestions to add the ability for users to search for a named hot key that already existed in their hot key pages. For example, if you knew you had a cow moo hot key titled “Cow Moo,” how would you find that?
Fun fact: our scenario for the third task was based off of a true story James heard from a radio host.
Library
We followed the same approach to test my design for the library. A radio show’s playlists are pre-set, but there can be moments during a live show when the host might want to play a certain song for a listener or find a sound effect for their hot keys.
I designed the library to be a side panel that could expand into a separate window. Our users were worried about leaving the screen of their show. They never wanted to get stuck on another page while their live-show was running. So the library needed to accessible without leaving the main screen.
In the first scenario we asked our testers to find the song “Thunder” by Imagine Dragons in their library. I wanted to check my assumptions with how I designed the search. Do they need the tabs at the top or would they just start typing?
For the second scenario, the task was to take a sound clip and move it into the Log (which is another version of the playlist).
This scenario really tested my design’s assumption that the radio hosts would expand the library into another window. Out of 5, 3 of the hosts seamlessly pulled the library into its own window.
Insights
James Prather, Senior UX Research on this project, was an ultimate wizard when it comes to collecting and analyzing user feedback. He was able to provide the necessary feedback that improved my designs for users’ sake.
- Support correct mental models & conventional mapping.
Actions: Add right click interactions (as seen in NexGen) and label search bars with more specific copy. - Provide useful feedback from interactions.
Actions: Emphasize hover and click states. Radio hosts are used to a lot of information at once, and they want their feedback to be bold. - Prevent common mistakes.
Actions: Add a locked state to hotkeys and playlist to prevent accidental clicks while the show is running.
Designing the Live Console was an extensive endeavor. The best way to communicate with our development team was with extensive documentation.
The development team was 9 hours ahead of our design team, which made direct video calls rare. The best way to communicate was through messaging, spec sheets, and jira tickets.
Spec Sheets
