The brief: an interactive microsite, with a viewing time of approx 5 mins. My response was Meta x Duolingo — a concept VR language-learning product, with a promo site built in Webflow and animated using Lottie and Rive.
I started with animation frames rather than wireframes, prioritising Rive, Spline, Lottie and Webflow early on. Once the layout needed tightening — spacing, white space — I went back and wireframed properly, using a Z-pattern inspired by Duolingo's own site, and referencing both Duolingo's and Meta's brand guidelines for colour and type.
The project didn't have a clear structure from the start, which meant a fair amount of back and forth — but it also left room to explore. I learned by doing: testing ideas, adjusting layouts, improving animations as my Webflow, Rive and Lottie skills developed. Key parts of the site, like the VR headset interaction and the animation flow, evolved through constant iteration rather than being planned upfront.
I wouldn't work this unstructured again — for obvious reasons — but the freedom to experiment paid off. It's where I got the most creative, built confidence with new tools, and picked up real technical skill.
Every character started hand-drawn in Illustrator, then animated in Rive or After Effects, and exported as Lottie for Webflow. Duolingo animates their own characters in Rive, so it felt only natural to do the same.
This project let me explore motion and interaction design in depth, while pushing me to learn new tools — Webflow, Rive, Lottie. The process was far from linear, and some parts were unstructured and technically tough, but that's what made the learning stick. The final result reflects both the creative exploration and the technical growth, and led me to further explore Rive and its possibilities.