As a UX Design Intern at iHeartMedia, I was tasked with designing the entire workflow for talent to audition audio tracks.
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
This functionality is basically referred to by the term auditioning, and I was tasked with designing it.
Having the ability to audition tracks is vital for talent during live shows. Through conversation with talent, I identified some core use cases that his end solution would need to enable.
As a radio talent running a live show, I want
How might we enable radio-talent to audition audio during a live broadcast?
I began my research with a thorough look at the existing audio playout system (called NextGen) for patterns and flows that would be relevant to auditioning. I examined patterns from audio playback to voice tracking, fundamental parts of the software.
I 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 myself a lot of time, this enabled me to learn about the users' pain points, and have a holistic picture of the workflows and scenarios that need to be designed for.
The most insightful part of the research process was taking an in-depth look at similar audio streaming/editing softwares. This was to
To do this, I documented the relevant flows (via screenshots) from each of the platforms, abstracted and wireframes the core patterns of each, and outlined takeaways/learnings for each.
With an understanding of how auditioning is performed in other software and how talent use the existing software, I created a simple diagram to illustrate the various actions that need to be designed for and how they fit together.
I began my design process on paper, sketching out multiple ideas and variations of patterns based on his research. This exploration served as a launch pad for the rest of the design process. Right off the bat, I identified two important factors to consider:
I translated my 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, I presented these to the UX team to gather some initial feedback. I improved these wireframes iteratively until the team and I felt confident about 1-2 patterns that he could then test in mid-fidelity.
After narrowing down the range of feasible designs, I created mid-fidelity wireframes to begin detailing the patterns in more detail as well as have something visually okay to show users in a usability test.
After a round of guerilla testing, I created hi-fi designs and a fully functional prototype to conduct in-depth usability testing with.
To ensure the patterns and behaviors being established were usable and make sure the designs aligned with users' expectations, I conducted two rounds of user testing – guerilla testing and usability testing.
I outlined the insights and action items from both rounds of testing in a diagram like the one below. This made it easier for myself, as well as for other team members to grasp the main learnings at a glance.
With all the designs completed and validated by users, I thoroughly documented how the auditioning module will work, documenting everything from what each button does to resizing behavior.