Amazon - Wondery
Expanding the podcast listening experience from mobile to web
Amazon - Wondery
Expanding the podcast listening experience from mobile to web
Amazon - Wondery
Expanding the podcast listening experience from mobile to web
Role
Product Designer
Team
Design, Engineering, QA, Product Owner, Project Manager, Accessibility
Highlights
B2C, Web, Media & Entertainment
Role
Product Designer
Team
Design, Engineering, QA, Product Owner, Project Manager, Accessibility
Highlights
B2C, Web, Media & Entertainment
Role
Product Designer
Team
Design, Engineering, QA, Product Owner, Project Manager, Accessibility
Highlights
B2C, Web, Media & Entertainment
Overview
Leading podcast studio with millions of listeners
When I joined the project, Wondery had just launched an exclusive mobile app to grow Wondery+ subscriptions. But their existing website couldn't support this vision.
Overview
Leading podcast studio with millions of listeners
When I joined the project, Wondery had just launched an exclusive mobile app to grow Wondery+ subscriptions. But their existing website couldn't support this vision.
Overview
Leading podcast studio with millions of listeners
When I joined the project, Wondery had just launched an exclusive mobile app to grow Wondery+ subscriptions. But their existing website couldn't support this vision.
Problem
Wondery needed cross-device continuity and clear premium visibility. Their website had neither.
Problem
Wondery needed cross-device continuity and clear premium visibility. Their website had neither.
Problem
Wondery needed cross-device continuity and clear premium visibility. Their website had neither.
Problem Highlights
Critical gaps in the web experience
Retention
No cross-device continuity
No progress tracking or 'Continue listening' feature when switching from app to web.
Discovery
Missing subscription indicators
There was no visibility into premium content value, missing opportunities to drive Wondery+ conversions on discovery pages.
Engagement
Fragmented listening experience
Player only showed free episodes, creating gaps in serialized podcasts where story continuity mattered.
Problem Highlights
Critical gaps in the web experience
Retention
No cross-device continuity
No progress tracking or 'Continue listening' feature when switching from app to web.
Discovery
Missing subscription indicators
There was no visibility into premium content value, missing opportunities to drive Wondery+ conversions on discovery pages.
Engagement
Fragmented listening experience
Player only showed free episodes, creating gaps in serialized podcasts where story continuity mattered.
Problem Highlights
Critical gaps in the web experience
Retention
No cross-device continuity
No progress tracking or 'Continue listening' feature when switching from app to web.
Discovery
Missing subscription indicators
There was no visibility into premium content value, missing opportunities to drive Wondery+ conversions on discovery pages.
Engagement
Fragmented listening experience
Player only showed free episodes, creating gaps in serialized podcasts where story continuity mattered.
Constraints
Defining the right approach for phase one
Working from fragmented design files and minimal documentation, I audited the production mobile app alongside existing designs to map user flows and identify critical gaps. The web lacked episode detail pages, a player, library, and search features. For phase one, we prioritized core listening over full feature parity.
Additional user type
Anonymous listener
Support anonymous listeners without requiring account creation or progress tracking
Technical trade-off
No global player
Integration limitations required using an existing embedded player instead of building custom
Initial scope
No search or library feature
Phase one prioritized core listening over search and library features
Constraints
Defining the right approach for phase one
Working from fragmented design files and minimal documentation, I audited the production mobile app alongside existing designs to map user flows and identify critical gaps. The web lacked episode detail pages, a player, library, and search features. For phase one, we prioritized core listening over full feature parity.
Additional user type
Anonymous listener
Support anonymous listeners without requiring account creation or progress tracking
Technical trade-off
No global player
Integration limitations required using an existing embedded player instead of building custom
Initial scope
No search or library feature
Phase one prioritized core listening over search and library features
Constraints
Defining the right approach for phase one
Working from fragmented design files and minimal documentation, I audited the production mobile app alongside existing designs to map user flows and identify critical gaps. The web lacked episode detail pages, a player, library, and search features. For phase one, we prioritized core listening over full feature parity.
Additional user type
Anonymous listener
Support anonymous listeners without requiring account creation or progress tracking
Technical trade-off
No global player
Integration limitations required using an existing embedded player instead of building custom
Initial scope
No search or library feature
Phase one prioritized core listening over search and library features
First Round
Here’s where I messed up... The designs looked right but the metadata was completely off
With limited time and fragmented files, I used placeholder data to quickly adapt mobile patterns for web. But stakeholders, especially executives, who knew their catalog intimately couldn't get past the metadata errors, blocking productive feedback on the actual designs.
Workflow impact
Hundreds of metadata errors across iterations
Our team couldn't catch mistakes without a reliable source of truth, derailing design reviews.
Project impact
Agency's largest client, tightest timeline
We couldn't afford to keep wasting billable hours on preventable metadata errors.
Client impact
Losing client trust after multiple rounds of mistakes
After multiple rounds, we had to fix this issue before moving forward.
First Round
Here’s where I messed up... The designs looked right but the metadata was completely off
With limited time and fragmented files, I used placeholder data to quickly adapt mobile patterns for web. But stakeholders, especially executives, who knew their catalog intimately couldn't get past the metadata errors, blocking productive feedback on the actual designs.
Workflow impact
Hundreds of metadata errors across iterations
Our team couldn't catch mistakes without a reliable source of truth, derailing design reviews.
Project impact
Agency's largest client, tightest timeline
We couldn't afford to keep wasting billable hours on preventable metadata errors.
Client impact
Losing client trust after multiple rounds of mistakes
After multiple rounds, we had to fix this issue before moving forward.
First Round
Here’s where I messed up... The designs looked right but the metadata was completely off
With limited time and fragmented files, I used placeholder data to quickly adapt mobile patterns for web. But stakeholders, especially executives, who knew their catalog intimately couldn't get past the metadata errors, blocking productive feedback on the actual designs.
Workflow impact
Hundreds of metadata errors across iterations
Our team couldn't catch mistakes without a reliable source of truth, derailing design reviews.
Project impact
Agency's largest client, tightest timeline
We couldn't afford to keep wasting billable hours on preventable metadata errors.
Client impact
Losing client trust after multiple rounds of mistakes
After multiple rounds, we had to fix this issue before moving forward.
Second Round
Understanding the content structure beneath the surface
Conversations with engineering and stakeholders revealed a complex content system I'd overlooked. The mobile app's simplicity masked intricate logic around content properties and user states that would shape every design decision.
Information Architecture
Podcast content hierarchy
Shows, seasons, and episodes each behave differently but often look identical. The metadata was the key differentiator.
Business Model
Multiple paywall models
Premium content had three variations: fully gated, first episodes free, or temporary early access for subscribers
Production
Artwork limitations
Authors reused show-level artwork across all episodes, so we couldn't rely on visuals alone to distinguish content types.
Second Round
Understanding the content structure beneath the surface
Conversations with engineering and stakeholders revealed a complex content system I'd overlooked. The mobile app's simplicity masked intricate logic around content properties and user states that would shape every design decision.
Information Architecture
Podcast content hierarchy
Shows, seasons, and episodes each behave differently but often look identical. The metadata was the key differentiator.
Business Model
Multiple paywall models
Premium content had three variations: fully gated, first episodes free, or temporary early access for subscribers
Production
Artwork limitations
Authors reused show-level artwork across all episodes, so we couldn't rely on visuals alone to distinguish content types.
Second Round
Understanding the content structure beneath the surface
Conversations with engineering and stakeholders revealed a complex content system I'd overlooked. The mobile app's simplicity masked intricate logic around content properties and user states that would shape every design decision.
Information Architecture
Podcast content hierarchy
Shows, seasons, and episodes each behave differently but often look identical. The metadata was the key differentiator.
Business Model
Multiple paywall models
Premium content had three variations: fully gated, first episodes free, or temporary early access for subscribers
Production
Artwork limitations
Authors reused show-level artwork across all episodes, so we couldn't rely on visuals alone to distinguish content types.
Third Round
Building a scalable component system
I translated the content structure into a flexible component system that could adapt to different user types, content properties, and layout densities. This became the foundation for all phase one pages while eliminating metadata errors.
Flexibility
Adapting content density
The component scaled from hero layouts with full metadata to condensed list items with truncated details
Accuracy
Eliminating errors at scale
As component instances multiplied across pages, the system maintained accuracy, reducing errors and time spent manually verifying every instance
Speed
Unblocking phase one
Enabled rapid rollout across all phase one critical pages while maintaining content accuracy and clarity
Third Round
Building a scalable component system
I translated the content structure into a flexible component system that could adapt to different user types, content properties, and layout densities. This became the foundation for all phase one pages while eliminating metadata errors.
Flexibility
Adapting content density
The component scaled from hero layouts with full metadata to condensed list items with truncated details
Accuracy
Eliminating errors at scale
As component instances multiplied across pages, the system maintained accuracy, reducing errors and time spent manually verifying every instance
Speed
Unblocking phase one
Enabled rapid rollout across all phase one critical pages while maintaining content accuracy and clarity
Third Round
Building a scalable component system
I translated the content structure into a flexible component system that could adapt to different user types, content properties, and layout densities. This became the foundation for all phase one pages while eliminating metadata errors.
Flexibility
Adapting content density
The component scaled from hero layouts with full metadata to condensed list items with truncated details
Accuracy
Eliminating errors at scale
As component instances multiplied across pages, the system maintained accuracy, reducing errors and time spent manually verifying every instance
Speed
Unblocking phase one
Enabled rapid rollout across all phase one critical pages while maintaining content accuracy and clarity
Solution Highlight
Completing the core listening experience
Solution Highlight
Completing the core listening experience
Solution Highlight
Completing the core listening experience
Solution Highlight
Listeners can easily pick up where they left off
The "Continue Listening" section displays in-progress episodes, syncing playback position across mobile and web to enable seamless cross-device listening.
Solution Highlight
Listeners can easily pick up where they left off
The "Continue Listening" section displays in-progress episodes, syncing playback position across mobile and web to enable seamless cross-device listening.
Solution Highlight
Listeners can easily pick up where they left off
The "Continue Listening" section displays in-progress episodes, syncing playback position across mobile and web to enable seamless cross-device listening.
Solution Highlight
Supported varying content structure and paywall levels
The "Continue Listening" section displays in-progress episodes, syncing playback position across mobile and web to enable seamless cross-device listening.
Show-level views supported seasons
Card components supported content levels
Card components supported paywall levels
Solution Highlight
Supported varying content structure and paywall levels
The "Continue Listening" section displays in-progress episodes, syncing playback position across mobile and web to enable seamless cross-device listening.
Show-level views supported seasons
Card components supported content levels
Card components supported paywall levels
Solution Highlight
Supported varying content structure and paywall levels
The "Continue Listening" section displays in-progress episodes, syncing playback position across mobile and web to enable seamless cross-device listening.
Show-level views supported seasons
Card components supported content levels
Card components supported paywall levels
Solution Highlight
Increased paywall visibility on the core listening interfaces
Created more conversion entry points through the hero, episode list items during the discovery and listening stages.
Locked content with paywall entry points
Unlocked content
Solution Highlight
Increased paywall visibility on the core listening interfaces
Created more conversion entry points through the hero, episode list items during the discovery and listening stages.
Locked content with paywall entry points
Unlocked content
Solution Highlight
Increased paywall visibility on the core listening interfaces
Created more conversion entry points through the hero, episode list items during the discovery and listening stages.
Locked content with paywall entry points
Unlocked content
Launch
Launched phase one with core listening and cross-platform support
Launch
Launched phase one with core listening and cross-platform support
Launch
Launched phase one with core listening and cross-platform support
Impact
Scaling beyond phase one
With the successful launch of phase one, Wondery continued to work with our team and it became the largest client project for the following years. This foundation supported Wondery's continued growth, including through their Amazon acquisition.
User
Enabled cross-platform listening between mobile and web
DesignOps
A scalable component system that supported a growing catalog
Business
Created clear differentiation between free and premium content while supporting the freemium business model
30,000+
Episodes supported
Across 300+ shows with multiple content models. This design foundation continues to support Wondery’s growing catalog.
25
Features shipped across subsequent phases
I helped ship out search, library, and other marketing-related pages using the same component system.
Impact
Scaling beyond phase one
With the successful launch of phase one, Wondery continued to work with our team and it became the largest client project for the following years. This foundation supported Wondery's continued growth, including through their Amazon acquisition.
User
Enabled cross-platform listening between mobile and web
DesignOps
A scalable component system that supported a growing catalog
Business
Created clear differentiation between free and premium content while supporting the freemium business model
30,000+
Episodes supported
Across 300+ shows with multiple content models. This design foundation continues to support Wondery’s growing catalog.
25
Features shipped across subsequent phases
I helped ship out search, library, and other marketing-related pages using the same component system.
Impact
Scaling beyond phase one
With the successful launch of phase one, Wondery continued to work with our team and it became the largest client project for the following years. This foundation supported Wondery's continued growth, including through their Amazon acquisition.
User
Enabled cross-platform listening between mobile and web
DesignOps
A scalable component system that supported a growing catalog
Business
Created clear differentiation between free and premium content while supporting the freemium business model
30,000+
Episodes supported
Across 300+ shows with multiple content models. This design foundation continues to support Wondery’s growing catalog.
25
Features shipped across subsequent phases
I helped ship out search, library, and other marketing-related pages using the same component system.
Reflection
Lessons I’ve learned along the way
01
Find the subject matter experts early
I spent weeks making assumptions about the content model that engineering could have clarified in a single conversation. Now I loop in technical stakeholders earlier to validate constraints before designing solutions.
02
Understand the system, not just the surface
Understanding the content structure, publishing workflows, and business requirements allowed me to design components that scaled across the entire catalog, not just the pages I was designing.
03
Create foundations others can build on
Consolidating fragmented files into an organized Figma library and workflow helped our design team maintain consistency and improve sprint velocity as the project scaled to 25+ features over multiple years.
Reflection
Lessons I’ve learned along the way
01
Find the subject matter experts early
I spent weeks making assumptions about the content model that engineering could have clarified in a single conversation. Now I loop in technical stakeholders earlier to validate constraints before designing solutions.
02
Understand the system, not just the surface
Understanding the content structure, publishing workflows, and business requirements allowed me to design components that scaled across the entire catalog, not just the pages I was designing.
03
Create foundations others can build on
Consolidating fragmented files into an organized Figma library and workflow helped our design team maintain consistency and improve sprint velocity as the project scaled to 25+ features over multiple years.
Reflection
Lessons I’ve learned along the way
01
Find the subject matter experts early
I spent weeks making assumptions about the content model that engineering could have clarified in a single conversation. Now I loop in technical stakeholders earlier to validate constraints before designing solutions.
02
Understand the system, not just the surface
Understanding the content structure, publishing workflows, and business requirements allowed me to design components that scaled across the entire catalog, not just the pages I was designing.
03
Create foundations others can build on
Consolidating fragmented files into an organized Figma library and workflow helped our design team maintain consistency and improve sprint velocity as the project scaled to 25+ features over multiple years.