Case Study: Motion Design for the "Another" Dating App Promo Video
For the “Another” dating app concept at Pineapple UX/UI Design Studio, my role centered on crafting a dynamic motion design video. This project was conceived as a promotional showcase of the app’s user flow and Pineapple’s high standards in expressive and intuitive digital products. While the underlying UI was created by the design team, my focus was on translating the static user experience into a compelling, animated narrative.
Defining the Motion Narrative
Collaborated closely with the design director to deeply understand the app’s intended behavior, critical touchpoints, and interaction patterns.
Mapped out the product journey—from onboarding and profile set-up through to daily feed interactions and educational prompts—selecting key moments where motion could enhance clarity and delight.
Developed storyboards and motion flowcharts to anticipate smooth transitions, user feedback cues, and sequencing for a natural, engaging pace.
Animation & Prototyping
Imported finalized UI assets into After Effects.
Animated onboarding screens to reveal the app’s approachable tone, using soft fades, scaling, and subtle sliding effects.
Choreographed transitions between main sections—Feed, Discover, and Chat—ensuring each shift helped orient the user seamlessly.
Emphasized micro-interactions, such as liking a post or viewing a match, by animating icons, cards, and modals for a tactile, responsive feel.
Integrated rich, layered transitions for components like match previews, cover video setup, and profile completion milestones to illustrate app depth.
Tools Used
After Effects: For scene compositing, sequence animation, micro-interactions, and motion refinement.
Adobe XD: To sync timelines with the UX team's original prototypes and verify state-based behaviors.
Motion Design Highlights
Fluid Scene Flow: Animation bridges the gap between individual UI components, giving viewers a holistic sense of how the app feels in real use.
Micro-Interactions: Buttons, likes, and modal views feature responsive effects, reinforcing a sense of immediacy and polish.
Progressive Reveal: Onboarding and profile preview sections unfold step-by-step, lowering cognitive load and improving narrative clarity.
Expressive Transitions: Weighted easing, opacity fades, and gentle bounces amplify the approachable brand character and make navigation satisfying.
Outcome
The resulting motion design video became a key promotional asset, effectively communicating both the app’s value and Pineapple’s design philosophy. By building upon the collaboratively defined user flows—and layering on best-in-class motion techniques—the video demonstrated how thoughtful animation can make digital experiences more accessible and emotionally engaging.
Reflections
This project was a great demonstration of how close teamwork with UX leadership, combined with focused motion design, can transform static layouts into living, engaging journeys. The end product underscored that motion isn’t just visual flair, but a powerful tool for storytelling, usability, and brand expression.