Case Study: Motion Design for New Product Page
Last year, I had the privilege of helping out with the newly designed product page¹ for my company. I’m going to break down between high level aspects of this design to my specific role in it, but before going any further, please check out the final design and animation—
About the project
As a company, we want to do a better job in creating a narrative in which our products—as well as specific features—are front and center. We’ve done a decent job describing each thing in its own silo, but haven’t done a great job bringing it together.
Think Marvel —the heroes are our features. Each character have his/her own movie, but we haven’t brought them all together yet. It’s time to have their own “Avengers” movie, and that’s what this product page is all about.
My role
My focus was on the animation and motion parts. I collaborated closely with another designer, to make sure our vision was aligned. Once we both signed-off on the animations, I then worked closely with the developer, to make sure that the export process from After Effects to Lottie was seamless².
Goals for Motion Design
I have two simple goals for this project, when it comes to motion design:
- Help users understand what each feature does
- Bring an extra bit of delight to our audience
Both may seem obvious, but there is a bit of balance to achieve both well. Take the below animation, which is the final asset for our App Tracking Protection—
One early experiment we tried was animating all the elements on the screen — including the floating card element.
While each element works on its own when it’s animated, when they’re combined, it was too overwhelming. It’s hard to just focus on any one element, let alone the larger message that we’re trying to convey. In other words, by trying to make both assets delightful, the understanding aspect—the more important thing—took a hit.
Workflow
- The original designs were done in Figma.
- For assets that were heavy on photography (or static), I exported them out as PNG’s.
- Everything else (like vectors) were transferred to After Effects via AEUX.
- Each animation has its own comp, and are exported as mp4’s and shared with the stakeholders via Asana.
- Meanwhile, I’ve created — and would continue to update—what the full page would feel like, as the user scrolls down³.
- Once animations are finalized, I would export as Lottie, and would begin the debugging process.
[1] Unfortunately, this product page never went live. Animations and assets will eventually merge with another redesigned page.
[2] This process was pretty laborious, as some things you expect to “just work” actually took a lot of debugging to get right. See this article for a bit more details on some of the pains with using Lottie:
[3] Because each animation is in its own comp, it’s easy to bring them into a “master comp” file, and as I update each comp, the larger file automatically gets updated too.
