Designing Motion for Social Audio Experiences
Designing the interaction model and motion language that helped people understand and consume audio experiences across Facebook.
Company: Meta
Role: UX Motion Designer
Launch: 2021
Expertise: Interaction Design • Motion Systems • Rapid Prototyping • Design Systems
Context
Facebook’s first audio experiences included voice notes and podcasts, requiring a shared interaction language that felt native to the platform while making spoken content easier to understand and navigate.
I designed the motion system for audio activity and real-time captions, creating reusable components for the team to implement across both formats.
Challenge
Unlike video, audio provides few visual cues about what is happening. Users needed instant feedback that communicated playback and content progression without distracting from the listening experience.
The challenge was to design a scalable motion system that made audio more expressive, understandable, and accessible while feeling like a natural extension of Facebook.
Hearing
Audio playback needed an immediate visual representation that communicated activity.
I designed a ripple-based audio affordance surrounding the speaker's profile image, creating a lightweight visualization of audio activity. Rather than functioning as a traditional playback indicator, the animation gives audio a recognizable visual presence that makes the interface feel more responsive and expressive.
Understanding
Users couldn't always listen with sound enabled or dedicate their full attention to audio content.
I designed the motion behavior for real-time captions, synchronizing their appearance with the rhythm of speech to improve readability while maintaining a natural conversational cadence. The interaction supports both active listening and silent consumption, making spoken content accessible across different environments.
Scaling the System
The audio affordance, caption behavior, and supporting motion work together as a unified interaction system across voice notes and podcasts. Shared motion principles create consistency while allowing each format to maintain its own visual identity.
Design Process & Impact
I partnered closely with product designers and engineers to define reusable interaction principles for Facebook's expanding audio experiences. Through rapid prototyping, we explored how motion could communicate playback, audio activity, and accessibility without competing with the content itself.
The resulting interaction patterns established a shared visual language for Facebook's audio experiences, enabling voice notes and podcasts to feel cohesive, expressive, and native to the platform.
Key Takeaway
Designing Facebook's first audio experiences reinforced that motion can communicate information that sound alone cannot. By translating audio into intuitive visual feedback, motion helped make spoken content more approachable while creating a cohesive interaction language for an entirely new product category.