UX Motion Design
Vibe App is a personal UX motion case study developed as part of a School of Motion course.
This project explores how motion can support user engagement in a music streaming app by reinforcing user mental models, providing clear feedback loops, and maintaining spatial continuity across interaction states.
Role – UX Motion Designer
Tools – After Effects, Figma, Lottie
Problem
User data indicated low engagement with song playback, alongside recurring feedback that the app experience felt static.
Key issues identified:
• 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.
Goals
• Reinforce user intent through clear motion feedback when transitioning into and out of the Now Playing state.
• Maintain spatial continuity between Playlist and Now Playing views to support user orientation.
• Promote continued interaction by ensuring playback transitions feel responsive, intentional, and fluid.
Audible
Spotify
YouTube
Research
To support the defined goals, I reviewed playback interactions across leading audio products to identify established motion patterns that support user mental models.
Common implementations preserve spatial continuity through container-style transitions, reducing the sensation of being teleported between screens.
Material motion research further supports this pattern, showing that container transforms reduce cognitive disruption by maintaining spatial context across states, which helps users stay oriented and confident as they continue interacting.
Key Motion Decisions
• Clarity through restrained motion
Stylized motion was intentionally avoided to preserve clarity, ensure responsive feedback, and build user confidence during playback.
• Spatial context through container transitions
The mini player container expands into the Now Playing view using shared elements, maintaining 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.
• Cohesion through consistent motion
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.
Outcome
• Clear visual feedback confirms playback actions.
• Spatial continuity between Playlist and Now Playing improves orientation.
• Transitions feel responsive and intentional, encouraging continued interaction.
Featured by School of Motion
