one sec

Audio Auditioning

Design of a module for iHeartMedia's radio talent to preview and edit audio before it airs

Audio Auditioning

Design of a module for iHeartMedia's radio talent to preview and edit audio before it airs

Audio Auditioning

Design of a module for iHeartMedia's radio talent to preview and edit audio before it airs

Audio Auditioning

Design of a module for iHeartMedia's radio talent to preview and edit audio before it airs

Try scrolling

The project and Kish's role

As a UX Design Intern at iHeartMedia, Kish was tasked with designing the entire workflow for talent to audition audio tracks.

p-colour1, p-underscore, p-hover, p-sthrough, draggable, ix-avoid, ix-explosion, Webflow

The project and Kish's role

As a UX Design Intern at iHeartMedia, Kish was tasked with designing the entire workflow for talent to audition audio tracks.

Project Duration: 

Jun 2021

-

Aug 2021

Heading 1

Heading 2

Heading 3

Heading 4

paragraph

Heading 5
Heading 6

Text Link

Quote Block
  • List item
  • List item 2
  1. Numbered List Text Link
  2. Numbered List item 2
Hi

Image + Caption
No items found.

Let

'

s get into it

.

Let

'

s get into it

.

In early 2020, the world was hit hard by an infectious disease known as COVID-19.

People all aroung the world were forced into quarantine and the world was changed forever.

As a result, the retail industry took an extraordinary hit.

Sales were down due to consumer concerns of contracting the virus, and consumers were forces to navigate unknown territories.

63%

of shoppers were at some point fearful to shop at grocery stores in 2020.

(C+R Research, 2020)

80%

of Americans have yet to return to their pre-COVID levels of comfort about everyday out-of-the-house activities

(McKinsey, 2020)

+15,500

stores closed in the U.S. in 2020 due to global pandemic.

(Forbes, 2020)

The existing website was frustrating customers and obstructing their ability to purchase.

Having fielded many complaints and spend enough money trying to mitigate its issues, the owner felt it was time to upgrade the website.

Thus, the owner met with two budding UX Designers to redesign his website.

What is audio auditioning?

HeartMedia's Sound+ is a platform for talent (radio hosts) to run live shows from anywhere in the world, with only their laptop.

When talent goes to insert a specific song, piece of news, live call, or any other audio into the live playlist, they need the ability to

  1. Preview an audio track (off the air)
  2. Set a custom start and end point for a track

This functionality is basically referred to by the term auditioning, and Kish was tasked with designing it.

Why auditioning is relevant - use cases

Having the ability to audition tracks is vital for talent during live shows. Through conversation with talent, Kish identified some core use cases that his end solution would need to enable.

As a radio talent running a live show, I want

  • to make sure the selected song Champion is the right one
  • to remove the 15 seconds of silence at the start of this Taco Bell ad
  • to skip the long drawn out intro of the song For Whom The Bell Tolls
  • to play one line of the song Stayin' Alive while a survivor tells a story

What is audio auditioning?

HeartMedia's Sound+ is a platform for talent (radio hosts) to run live shows from anywhere in the world, with only their laptop.

When talent goes to insert a specific song, piece of news, live call, or any other audio into the live playlist, they need the ability to

  1. Preview an audio track (off the air)
  2. Set a custom start and end point for a track

This functionality is basically referred to by the term auditioning, and Kish was tasked with designing it.

Why auditioning is relevant - use cases

Having the ability to audition tracks is vital for talent during live shows. Through conversation with talent, Kish identified some core use cases that his end solution would need to enable.

As a radio talent running a live show, I want

  • to make sure the selected song Champion is the right one
  • to remove the 15 seconds of silence at the start of this Taco Bell ad
  • to skip the long drawn out intro of the song For Whom The Bell Tolls
  • to play one line of the song Stayin' Alive while a survivor tells a story

Thus Kish's challenge was

How might we enable radio-talent to audition audio during a live broadcast?

Existing patterns

Kish began his research with a thorough look at the existing audio playout system (called NextGen) for patterns and flows that would be relevant to auditioning. Kish examined patterns from audio playback to voice tracking, fundamental parts of the software.

Voice tracking interface in NextGen, where talent can record themselves speaking between tracks

Understanding the user

Kish also took advantage of the rich research and data that was already collected by the UX team, which included detailed user personas, journey maps, interview transcriptions, and much more. In addition to saving Kish a lot of time, this enabled Kish to learn about the users' pain points, and have a holistic picture of the workflows and scenarios that need to be designed for.

Persona of an on-air talent - the primary user (*not created by Kish)

Competitive Analysis

The most insightful part of Kish's research process was taking an in-depth look at similar audio streaming/editing softwares. This was to

  1. Examine how/when auditioning occurs in other software
  2. Identify common design patterns and conventions
  3. Further understand the taxonomy/visual language of audio editing

To do this, Kish captured the relevant flows (via screenshots) from each of the platforms, abstracted and wireframes the core patterns of each, and outlined takeaways/learnings for each.

40%

of customers are corporate entities

34%

of customers only buy 1 item

35%

of customers will call and ask for help, either in finding a product or while checking out

$300

spent per purpose (on average)

Existing patterns

Kish began his research with a thorough look at the existing audio playout system (called NextGen) for patterns and flows that would be relevant to auditioning. Kish examined patterns from audio playback to voice tracking, fundamental parts of the software.

Voice tracking interface in NextGen, where talent can record themselves speaking between tracks

Understanding the user

Kish also took advantage of the rich research and data that was already collected by the UX team, which included detailed user personas, journey maps, interview transcriptions, and much more. In addition to saving Kish a lot of time, this enabled Kish to learn about the users' pain points, and have a holistic picture of the workflows and scenarios that need to be designed for.

Persona of an on-air talent - the primary user (*not created by Kish)

Competitive Analysis

The most insightful part of Kish's research process was taking an in-depth look at similar audio streaming/editing softwares. This was to

  1. Examine how/when auditioning occurs in other software
  2. Identify common design patterns and conventions
  3. Further understand the taxonomy/visual language of audio editing

To do this, Kish captured the relevant flows (via screenshots) from each of the platforms, abstracted and wireframes the core patterns of each, and outlined takeaways/learnings for each.

Auditioning Workflow

With an understanding of how auditioning is performed in other software and how talent use the existing software, Kish created a simple diagram to illustrate the various actions that need to be designed for and how they fit together.

Auditioning Workflow

With an understanding of how auditioning is performed in other software and how talent use the existing software, Kish created a simple diagram to illustrate the various actions that need to be designed for and how they fit together.

Sketches

Kish began his design process on paper, sketching out multiple ideas and variations of patterns based on his research. Of course, the final solution was not identified at this stage, but this exploration served as a launch pad for the rest of the design process. Right off the bat, Kish identified two important factors to consider:

  1. Auditioning needs to happen in place - Sound+ is a fast-moving and time-sensitive platform, navigating the user away from the main screen or obscuring too many things from view likely won't be helpful
  2. Modes and signifiers will be crucial - since auditioning is not a linear process, it can happen anytime and for various reasons, it needs to be clear what state the interface is in and what actions are available at all times

Lo-fi

Kish translated his paper sketches to Figma, and mocked them up in minimum fidelity to maintain the sketches' simplicity and focus on the auditioning patterns. Some of the ideas from the sketches were immediately ruled out, and new ones were identified.

With the ideas mocked up, Kish presented these to the UX team to gather some initial feedback. Kish improved these wireframes iteratively until he and the team felt confident about 1-2 patterns that he could then test in mid-fidelity.

Mid-fi

After narrowing down the range of feasible designs, Kish created mid-fi wireframes to begin detailing the patterns in more detail as well as have something visually okay to show users in a usability test.

Hi-fi

After a round of guerilla testing, Kish created hi-fi designs and a fully functional prototype to conduct in-depth usability testing with.

Full prototype

Sketches

Kish began his design process on paper, sketching out multiple ideas and variations of patterns based on his research. Of course, the final solution was not identified at this stage, but this exploration served as a launch pad for the rest of the design process. Right off the bat, Kish identified two important factors to consider:

  1. Auditioning needs to happen in place - Sound+ is a fast-moving and time-sensitive platform, navigating the user away from the main screen or obscuring too many things from view likely won't be helpful
  2. Modes and signifiers will be crucial - since auditioning is not a linear process, it can happen anytime and for various reasons, it needs to be clear what state the interface is in and what actions are available at all times

Lo-fi

Kish translated his paper sketches to Figma, and mocked them up in minimum fidelity to maintain the sketches' simplicity and focus on the auditioning patterns. Some of the ideas from the sketches were immediately ruled out, and new ones were identified.

With the ideas mocked up, Kish presented these to the UX team to gather some initial feedback. Kish improved these wireframes iteratively until he and the team felt confident about 1-2 patterns that he could then test in mid-fidelity.

Mid-fi

After narrowing down the range of feasible designs, Kish created mid-fi wireframes to begin detailing the patterns in more detail as well as have something visually okay to show users in a usability test.

Hi-fi

After a round of guerilla testing, Kish created hi-fi designs and a fully functional prototype to conduct in-depth usability testing with.

Full prototype

Before

After

Guerilla and Usability Testing

To ensure the patterns and behaviors being established were usable and just make sure the designs made sense, Kish conducted two rounds of testing – guerilla testing and usability testing.

Screen grab from guerrilla test

Detailing takeaways

Kish outlined the insights and action items from both rounds of testing in a diagram like the one below. This made it easier for him to organize everything, as well as for other team members to grasp the main learnings at a glance.

Detailing specs for implementation

With all the designs completed and validated by users, Kish thoroughly documented how the auditioning module will work, pointing out everything from what each button does to edge cases.

Detailing specs for implementation

With all the designs completed and validated by users, Kish thoroughly documented how the auditioning module will work, pointing out everything from what each button does to edge cases.

Outcomes

  • According to the UX team and other stakeholders, the auditioning designs Kish created were very helpful and fit right into the rest of Sound+ system
  • Overall based on feedback from talent in the usability testing, the patterns and workflow created was easy to use and exciting

Outcomes

  • According to the UX team and other stakeholders, the auditioning designs Kish created were very helpful and fit right into the rest of Sound+ system
  • Overall based on feedback from talent in the usability testing, the patterns and workflow created was easy to use and exciting