Designing Motion for Social Audio Experiences

Designing the interaction model and motion language that helped people follow and navigate spoken content 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.

I designed the motion system for playback activity and real-time captions, creating reusable components that worked across both formats.

Challenge

Audio provides few visual cues. People needed immediate feedback for playback and progress, plus a way to follow spoken content when sound was unavailable or attention was divided.

Hearing

I designed a ripple-based affordance around the speaker's profile image, giving audio a lightweight visual presence and making playback feel immediate and responsive.

Understanding

I designed motion for real-time captions, synchronizing their appearance with the rhythm of speech to support readability and a natural conversational cadence. The behavior supported both active listening and silent consumption.

Scaling the System

The audio affordance, caption behavior, and supporting motion formed one interaction system across voice notes and podcasts, while allowing each format to retain its own identity.

Impact

I partnered with product designers and engineers to prototype and refine reusable interaction principles for Facebook's expanding audio experiences.

The system gave voice notes and podcasts a shared language, making playback easier to follow and spoken content more accessible across sound-on and sound-off environments.

Previous
Previous

Google Lens

Next
Next

Google Search