UX Motion Design
Vibe App is a UX motion study exploring how motion improves engagement and usability in a music streaming app.
The focus is on song selection and playback transitions, specifically how to reinforce user mental models, provide clear feedback between states, and maintain spatial continuity throughout the interaction flow.
• Role – UX Motion Designer
Owned interaction motion, pattern research, prototyping, and implementation-ready specs.
• Tools – After Effects, Figma, Lottie
Problem
Low engagement with song playback, alongside recurring feedback that the app experience felt static.
Key issues:
• Abrupt jump cuts provide no visual feedback when users select a song.
• Lack of spatial continuity makes it unclear how the Now Playing view relates to the Playlist.
• Sudden state changes increase cognitive effort and reduce confidence in navigation.
Audible
Spotify
YouTube
Interaction Pattern Audit
I reviewed playback interactions across Audible, Spotify, and YouTube to identify motion patterns that reinforce user mental models. All three preserve spatial continuity through container-style transitions that visually connect related states. This reduces abrupt change and helps users stay oriented within the interface.
Material motion research confirms this approach. Container transforms reduce cognitive disruption by maintaining spatial context across states, keeping users confident as they continue interacting.
Motion Decisions
• Clarity over style
Stylized motion was intentionally avoided to preserve clarity, ensure responsive feedback, and build user confidence during playback.
• Spatial continuity via container transitions
The mini player container expands into the Now Playing view using shared elements, preserving spatial continuity between states. The downward-facing back button signals that returning reverses the same transition.
• Visual noise reduction through background fades
The Playlist background fades out to reduce visual noise and clarify the transition between states. Staggering fade timings avoids overlapping transparency, preventing cluttered or distracting intermediate frames.
• Cognitive load reduction through cascading entry
Playback controls enter with a subtle cascade to guide attention and support visual hierarchy. This staged reveal reduces cognitive load and allows the user’s eye to follow the transition, rather than processing multiple elements at once.
• Consistent motion language
Motion direction and easing curves remain consistent across transitions to create a predictable and cohesive motion language. Repeated use of the same transition logic reinforces familiarity and improves overall usability.
Motion Specs for Implementation
Motion specifications were created to support development handoff by defining shared timing, easing, and sequencing rules across playback transitions.
The example shown illustrates the Now Playing cascading entrance.
Outcome
The work was recognized by School of Motion, one of the most respected motion design education platforms in the industry, for motion that serves the product without overpowering it. Featured on their YouTube channel, described as “appropriate, not too overdone, but tells the story the product needs to tell.”
Credits
Design Brief and Assets – Ivan Witteborg, School of Motion
