The Trials and Tribulations of Sports Radio

Imagining a new way to schedule and view live events for Talent and Program Directors

👋🏻 Company

iHeartMedia

🎁 Deliverables

Wireframes, Mockups, Prototypes

🗓 Timeline

Feburary 2022 - August 2023

Sports are... unpredictable

Have you ever sat down to watch a football game at home only for it to be delayed or canceled because it's violently storming on the other side of the country? Well I have. It stinks but at least it usually doesn't ruin my day. However for someone working in radio? It ruins their entire vacation. Whenever a live event is broadcasted and something happens to the original schedule, the radio team is left scrambling. They have to quickly switch over to a backup program, music or an other event, and be ready to switch back whenever the original event resumes. Yeah, they have to PHYSICALLY click the buttons to switch it. Wild. This has been ruining radio Talent's vacations, forcing them to literally work from wherever they were in the world during their time off. Not only was it a legal worry but also just not fair. We needed to fix this.

The users needs had outgrown their system

The current scheduling system they were using looked generally like any other old calendar. Events were scheduled directly after one another in single lanes on each day. No room for overlap. General information was presented on each event but more details could be found by hovering over the event. Overall there was nothing wrong with this system, the user's needs had just outgrown it. The radio industry is, well, ancient. We have the tools to make this process smoother by automation so let's get to work!

If it ain't broke, don't fix it

Our lives are full of calendars. We've got them on our phones, laptops, fridges, and walls to keep track of life, work, and social events. We already have mental models of what a calendar looks like and how it should function. So why go against that? I pulled inspiration from some of our favorite calendar applications as well as creative shots from Dribbble to inspire our specific challenges. I need to show multiple events running alongside each other, but indicate quickly to the user which is actually actively playing out to the listeners.

Learning a UX lesson the hard way

This was my first real project, on my own, fresh out of college. Obviously my professors taught me well but sometimes we all get ahead of ourselves. At this stage in the process I jumped a little too far ahead in wireframing, making the entire calendar and introducing colors. As you'll see in later wireframes, I took a couple steps back but I still got some great information out of these wires. I got a few notes about internal workings and technicalities like radio show titles BUT my biggest take away was to not overwhelm the user. Having all the lanes filled all the time, is not a reality. That lead to questions about how to present the three lanes to the user and how events were going to be added into each lane.

If we read left to right, do we read priorities the same?

Before I had the opportunity to find answers to the questions I was left with after the first round of wires, I was faced with a stakeholder battle. Which order should the priority lanes go in? One stakeholder thought it should be "Priority Lane 1", "Priority Lane 2", then "Regular Scheduled Programming". However the other stakeholder thought it should be flipped. The question was which made more sense to read first, the regular schedule which would always be there? Or the live event that was going to be overtaking everything else going on at the same time? I worked with my research partner to get to the bottom of this. We decided that since we read left to right, the left lane should always be full. Otherwise jumping across two empty lanes to the third lane to read events majority of the time was awkward and didn't make sense. We brought our decision to the stakeholders and they agreed. Onward to functionality!

Creating events and lanes

When we first began designing, we decided on three lanes: a regular schedule, special event lane two and special event lane one. How I wanted to present this information to our users was the next challenge. The main two ideas that were presented came in the forms of visually defined lanes and assumed lanes based on events added. One of the perks of the assumed lanes was that it was a more flexible model. Events would stay larger until other events were added with higher priority. However this could create inconsistency across the calendar. Some days would seem full while other could seems scarce when that was not the intended purpose at all. Not only that but I wanted the user to be able to look and quickly assess whether or not they had a special event coming up or on a specific day. Therefore I moved forward with the predefined lanes which provided easy scanability for the user.

Our new live event schedule begins to take shape

Here is where you can really see my idea begin to take form. The regular schedule lane is always going to be full since it is what would normally be playing whether or not there was a special event happening. In the second and third lanes we have our priority lane two and priority lane one. The reason the middle one is labeled two and the far right is one is because of what we think in our minds when we say priority. There was a lot of back and forth at first when labeling the lanes. There was debate about two technically being the higher number but one always coming first. We eventually realized one would be the most recognizable because what's most important is always "priority one" in our minds. Therefore whatever was farthest to the right at the time of airing is what would be playing out to the audience. If there was an issue with any live event in the second two lanes, the broadcast would immediately drop back a lane into another scheduled event making sure something relevant is always being broadcasted to the listener.

Back to the basics

After finalizing my wires, it was time to put it back into high fidelity. I mocked my new design into the original format that was created long before I came to the company. Of course it wasn't bad, but it fell a little flat. There was opportunity here to make it a little more active and use colors that made sense. Just because dev used purple when first creating this tool didn't mean we had to keep it. I began a color exploration that dove into different colors and their subconscious meanings.

Choosing colors with purpose

Not only did I update some of the buttons on the screen to match our new design system, I brought in new calendar colors. I chose green for our events which were the highest priority at the time and would be broadcasted to the listeners and blue for those that were dormant but could be activated at any moment need be. Both of these colors already have meaning to us, especially in the technology world. Green means success or priority but not stressed like red. Blue means active, stable, or consistent. Giving purpose behind small design choices is so important. Of course the purple was pretty but why miss an opportunity to create a design with purpose?

A schedule that finally allows our users to relax

With this new layout our radio Talent are finally able to enjoy their vacations no matter what happens. A rain storm causes the Nascar race to be rescheduled? No worries we have a Nascar talk show for back up. A rouge donkey somehow makes it onto the court of the NBA quarter finals and they have to delay the game? That's okay too! We've got one of the other quarter finals to back that up as well.

I'm sure you still have questions... Like how do the users schedule their events? What if they want to add the whole Texas Rangers season to their schedule? Well I had the opportunity to tackle all of those. Ask me about it!

Wanna hear more? Reach out, let's chat!