Breaking Barriers in Spatial Design
When our Head of iOS first shared a rough integration of LottieFiles within the Vision Pro environment, the design was functional but not yet refined. I took on the challenge of transforming this prototype into a polished, intuitive experience not for direct business growth, but as a marketing push to showcase possibilities and educate the community.
The aim was to demonstrate that in spatial devices like Vision Pro, "Motion isn’t a limitation but a natural part of immersive 3D environments."
Effortless Animation Browsing
On the homepage, each card showcases a different animation, and users can smoothly scroll through them. A top search bar and simple filters like recent, popular and featured let users find the perfect animation quickly and easily.
Personalized recommendations make the experience even more seamless as the profile is connected to the account.
Drag - Drop - Done
Focus on the animation by just looking at it, hold it with your fingers, and drop it into your environment. The interaction feels smooth and natural, making it easy to place assets exactly where you need them. To keep the experience ergonomically pleasant, elements respond even to small, natural gestures, making interactions feel effortless and intuitive.
Filters menu
Switch between Recent, Popular, or Featured to refine your search and get results that truly match what you’re looking for. These quick filters make discovery easier by surfacing fresh uploads, trending picks, or curated highlights, so you can discover the right animation without endless scrolling.
Product Page
On the product page, every animation opens up with full control. You can tweak colors using built-in palettes, adjust the speed to fit your scene, or fine-tune frame rates for smoother playback. These quick edits let you customize an asset without ever leaving the experience.
To keep discovery flowing, related animations are surfaced right below. Whether you want something in the same style or looking to explore variations, it’s easy to find and compare new options while staying focused on your project.
Product Video
To bring the story to life, we crafted a short promo video showcasing the refined interactions and seamless motion integration within the spatial design. Taking the UI I designed and reimagining it in the real world, the video captures how naturally LottieFiles fits into the Vision Pro environment making the experience feel both intuitive and inspiring.
Creative direction by Kelly Loh. Animation by Sanjib Paul
Learnings and Resources
Vision Pro is still new, there are very few resources on designing for spatial experiences. I faced similar challenges while learning how to build for it, but I’ve added a couple of useful research papers and design files here to help you explore and get started.
Numbers and Closing Notes
Since this project was brand and education focused rather than growth-driven, the campaign still reached over 14.7K people across our organic social channels.
We designed and built the entire product on the simulator, so we hadn’t experienced how users would truly visualize it. But during our company-wide retreat, I finally got the chance to try it and the moment I did, it felt incredibly delightful. Hats off to Apple and the Vision Pro team for building such an incredible technology.
Special mention to the contributors in LottieFiles for Vision Pro
Evandro Hoffmann (iOS Developer) | Kelly Loh (Creative direction) | Sanjib Paul (Animator)
A million thanks for scrolling so far.
