Audacy: Embed Player Redesign
I led the redesign of Audacy's embed player to align with their refreshed app and web experience while focusing on increasing user engagement and total listening hours. The project required balancing visual appeal with functionality across multiple content types and platforms.
Year: 2022
Role: UX/UI Design, User Research
My Contribution: I owned the redesign process, from initial research through final implementation specifications, conducting user testing at key stages to validate design decisions.
Example comparing the old embed player to the redesigned version
Challenge
The embed player needed significant updates to address several key objectives:
Align visually with Audacy's site-wide redesign
Create a more visually compelling interface to capture reader attention
Convert article readers into active listeners
Increase total listening hours across the platform
Meet accessibility standards for contrast ratios
Satisfy editorial stakeholders' requests for a more eye-catching design
Target Audience
Readers of Audacy's digital articles
Users of affiliate sites that incorporate Audacy audio content
Project Constraints
Creating consistent experiences across four distinct content types (podcasts, live stations, rewind stations, and exclusive stations)
Ensuring responsive design across all device types
Accommodating varying metadata requirements for each content type
Maintaining accessibility standards while enhancing visual appeal
Design Process
Competitive Analysis
I began by examining embed players from leading audio platforms including Spotify, Apple, and Omny to identify industry best practices and potential opportunities for differentiation. This research provided valuable context for approaching our specific challenges.
Examples of what the previous designs looked like as well as some designs found during competitor analysis
Stakeholder Collaboration
I facilitated discussions with the editorial team to understand their perception of the current player's limitations. Key insights included desires for greater visual prominence through color and size adjustments, potential integration with article images, and enhanced typography for titles and call-to-action elements. There was strong advocacy from the editorial team for using Audacy's signature orange color to reinforce brand identity and increase visibility. This presented an opportunity for me to educate stakeholders about accessibility requirements, as I needed to explain that their preferred orange color treatment would not meet contrast standards necessary for accessibility compliance. Through these conversations, I was able to guide expectations toward solutions that balanced brand goals with inclusive design principles.
Iterative User Testing
I designed and conducted multiple rounds of user research to validate design decisions:
The first round compared the existing player against twelve potential variations (four color schemes in three different sizes). Users explored article mockups with different embed players and provided feedback on preferences and notice-ability. This testing revealed that medium-sized variations performed best, as users disliked the large version which felt intrusive and ad-like. The small version was criticized for making it difficult to understand the audio content due to its constrained cover image and content type label placement. We also tested versions with and without a 'Related Podcast' title above the embed player. Users responded positively to this contextual label, indicating it clearly explained why they were being shown audio content within the article experience and helped establish relevance.
The second round focused specifically on color preferences, testing various options including solid colors and gradients. Results showed users engaging more with simpler color treatments, though without strong preference for specific hues.
A selection of screens and embed player variations shown during user tests
Design Refinement
Based on testing results of the different size and color variations, the medium-sized purple version performed best across user tests. Once we came to this conclusion, I then extended this design system across all breakpoints and content types, ensuring consistency while accommodating the requirements of each audio format.
Final designs in the different variations for each audio type and breakpoint
Solution Components
The final Embed Player redesign included:
Optimized Size Format: Medium-sized player balancing visibility with non-intrusive presence
Accessibility-Compliant Color Scheme: Purple variation meeting contrast requirements
Contextual Labeling: Clear "Related Podcast" indicators establishing content relevance
Responsive Layouts: Consistent experience across all device breakpoints
Content-Type Variations: Tailored designs for podcasts, live, rewind, and exclusive stations
Cover Art Integration: Enhanced visual prominence for audio content identification
Streamlined Controls: Intuitive playback interface optimized for engagement
Brand Alignment: Visual consistency with Audacy's refreshed digital experience
Results & Impact
The embed player redesign delivered meaningful improvements to both user experience and business objectives through a data-informed approach.
Engagement Increase: Successfully improved click-through rates on embedded audio content
Stakeholder Alignment: Used research findings to guide editorial teams toward more effective content strategies
User-Centered Solution: Identified that relevance of audio to article content was more important than visual treatment alone
Cross-Platform Consistency: Established visual cohesion between the embed player and Audacy's refreshed digital experience
Accessibility Compliance: Maintained strong contrast ratios while enhancing visual appeal
Most significantly, the process revealed that design improvements needed to work in tandem with content strategy. By sharing user insights about the importance of contextual relevance, I helped editorial teams understand that the most visually striking player would still underperform without appropriate content alignment, leading to more strategic audio placement throughout the site.