While traditional motion graphics typically creates linear content that is meant to be watched, UX Motion Design uses the same skills, fundamental animation principles, and many of the same familiar tools to build non-linear interactive experiences in apps, games, and websites.
I recently had the opportunity to take a deep dive into the UX Motion Design world with an online course, and the experience was eye-opening. No longer are motion designers relegated strictly to marketing roles, but as UX Motion Designers, are valued as integral members of the product design teams who build revenue-generating products.
While the course went over a number of different tools that UX Motion Designers may use, depending on the specific use case – including After Effects, Lottie, Rive, and Protopie — the case study assignment offered the strongest case for why motion design is so important in products.
Before:
For the Vibe Music app, user testing of the beta app showed a lack of transition from the Playlist screen to the Now Playing screen. This feels very static and unintuitive to the test users. There’s no mental model related to where the screens live inside our app experience or how they relate to one another.
The goal was to design an animation that feels delightful, intuitive, and reinforces a mental model of the screens sharing a space within the app as the Now Playing ribbon expands to fill the screen.
This exercise clearly demonstrates the value that motion designers can bring to product and engineering teams. In this example, we did not export anything from the aforementioned tools, but rather created a Design Spec document that would be handed off to an Engineering team for a native code implementation.
After: