Web UI | illustration | animation | VR
Meta x Duolingo
An interactive, motion site showcasing
the future of language learning with
Meta x Duolingo VR
Problem
Problem
The challenge was to design a five-minute, interactive micro-site that could hold attention and deliver a visually rich experience.
It needed to go beyond static content and explore more dynamic, story-driven interaction.
The challenge was to design a five-minute, interactive micro-site that could hold attention and deliver a visually rich experience.
It needed to go beyond static content and explore more dynamic, story-driven interaction.
Insight
Insight
Users engage more deeply when digital experiences feel immersive, responsive, and
creatively designed.Tools like animations and scroll effects can bring a concept to life—especially when used to tell a story or promote an idea.
Users engage more deeply when digital experiences feel immersive, responsive, and
creatively designed.Tools like animations and scroll effects can bring a concept to life—especially when used to tell a story or promote an idea.
Solution
Solution
I created a concept for Meta X Duolingo—a VR language-learning product—brought to life through an interactive promotional site.
Built in Webflow, the micro-site used Lottie and Rive animations to boost engagement and showcase the product’s immersive nature.
The project not only met the brief but also pushed my skills in creative storytelling and
technical integration.
I created a concept for Meta X Duolingo—a VR language-learning product—brought to life through an interactive promotional site.
Built in Webflow, the micro-site used Lottie and Rive animations to boost engagement and showcase the product’s immersive nature.
The project not only met the brief but also pushed my skills in creative storytelling and
technical integration.
Outcomes
Designed a responsive desktop micro-site in Webflow with smooth scroll-triggered interactions.
Used Lottie and Rive to bring the experience to life through motion and micro-interactions.
Developed a visually rich,
story-led interface that promotes the concept product in an
engaging way.
Research
Research
Interactivity Research
Interactivity Research
With this being my first fully interactive brief, I studied other sites to better understand animation styles and to refine my approach. Through this exploration, I discovered Rive, Spline and Lottie animations - which are tools I used for the first time, in order to enhance the interactivity across
the microsite.
With this being my first fully interactive brief, I studied other sites to better understand animation styles and to refine my approach. Through this exploration, I discovered Rive, Spline and Lottie animations - which are tools I used for the first time, in order to enhance the interactivity across
the microsite.
Product Development
Product Development
Meta x Duolingo started as a concept for a promotional microsite, inspired by my own experience using Duolingo and an interest in how VR could make language learning more immersive and engaging.
I took inspiration from platforms like Vitality, where users can earn rewards through consistent activity. This led to a points-based model where users could reduce—or even eliminate—the cost of the VR headset over time, simply by keeping up with their language learning in VR.
Meta x Duolingo started as a concept for a promotional microsite, inspired by my own experience using Duolingo and an interest in how VR could make language learning more immersive and engaging.
I took inspiration from platforms like Vitality, where users can earn rewards through consistent activity. This led to a points-based model where users could reduce—or even eliminate—the cost of the VR headset over time, simply by keeping up with their language learning in VR.
Persuasive Copy
Persuasive Copy
I looked into Duolingo’s brand messaging to understand how they keep things playful, clear, and user-focused. Their copy is short, friendly, and full of energy—so I used that as a guide for writing my own.
Phrases like “language learning just got cooler” and “your passport to a whole new way of learning” were inspired by their tone, helping the site feel fun, on-brand, and easy to connect with.
I looked into Duolingo’s brand messaging to understand how they keep things playful, clear, and user-focused. Their copy is short, friendly, and full of energy—so I used that as a guide for writing my own.
Phrases like “language learning just got cooler” and “your passport to a whole new way of learning” were inspired by their tone, helping the site feel fun, on-brand, and easy to connect with.
Design & Development
Design & Development
Sketches
Sketches
My idea development started with creating animation frames to incorporate into the site. While I did some wireframing, I later realised that I should have dedicated more time to it, as I later had to restructure the layout due to spacing issues and excessive white space. Learning Rive, Spline and Lottie animations (and Webflow) was my main focus, which led to wireframing going on the back-burner. However, after having to rebuild parts of the site to address these challenges, I've gained a much deeper appreciation for the wireframing process.
My idea development started with creating animation frames to incorporate into the site. While I did some wireframing, I later realised that I should have dedicated more time to it, as I later had to restructure the layout due to spacing issues and excessive white space. Learning Rive, Spline and Lottie animations (and Webflow) was my main focus, which led to wireframing going on the back-burner. However, after having to rebuild parts of the site to address these challenges, I've gained a much deeper appreciation for the wireframing process.
Low-fidelity Wireframes
Low-fidelity Wireframes
During the wireframing process, I designed a Z-pattern layout, inspired by Duolingo's website. At this stage, I also referenced Duolingo and Meta's brand guidelines to select colours and fonts, ensuring my microsite aligned visually with their identities.
During the wireframing process, I designed a Z-pattern layout, inspired by Duolingo's website. At this stage, I also referenced Duolingo and Meta's brand guidelines to select colours and fonts, ensuring my microsite aligned visually with their identities.
Iteration Through Experimentation
Iteration Through Experimentation
This project didn’t start with a clear structure, which led to a lot of back and forth—but also opened up space to explore. With the freedom to experiment, I learned by doing—trying out different ideas, adjusting layouts, and improving animations as my skills developed in Webflow, Rive, and Lottie. Key sections like the VR headset interaction and animation flow evolved through constant iteration.
While I wouldn’t take such an unstructured approach on future projects (for obvious reasons), I really valued the fluidity of this one. It gave me the chance to be creative, follow ideas in the moment, and grow more confident with new tools, and develop technical skills.
This project didn’t start with a clear structure, which led to a lot of back and forth—but also opened up space to explore. With the freedom to experiment, I learned by doing—trying out different ideas, adjusting layouts, and improving animations as my skills developed in Webflow, Rive, and Lottie. Key sections like the VR headset interaction and animation flow evolved through constant iteration.
While I wouldn’t take such an unstructured approach on future projects (for obvious reasons), I really valued the fluidity of this one. It gave me the chance to be creative, follow ideas in the moment, and grow more confident with new tools, and develop technical skills.
Animations
Animations
Illustrations
Illustrations
Each character and element in the site was hand-drawn in Illustrator before being animated in Rive or After Effects. I found through research that Duolingo uses Rive to animate their characters, which made it a natural choice when building out the interactive elements of my own site. Animations created in After Effects were exported as Lottie files to allow for smooth integration in Webflow.
Each character and element in the site was hand-drawn in Illustrator before being animated in Rive or After Effects. I found through research that Duolingo uses Rive to animate their characters, which made it a natural choice when building out the interactive elements of my own site. Animations created in After Effects were exported as Lottie files to allow for smooth integration in Webflow.
Conclusion
This project allowed me to explore motion and interaction design in depth, while also pushing me to learn new tools like Webflow, Rive, and Lottie. The process was far from linear—some parts were unstructured and technically challenging—but that made the learning more meaningful. Despite the hurdles, the freedom to experiment was valuable, and the final outcome reflects both creative exploration and technical growth.
![](data:image/svg+xml,<svg display="block" role="presentation" viewBox="0 0 31 31" xmlns="http://www.w3.org/2000/svg"><g d="M 0 31 L 0 0 L 31 0 L 31 31 Z M 24.542 0 L 6.458 0 C 2.892 0 0 2.892 0 6.458 L 0 24.542 C 0 28.108 2.892 31 6.458 31 L 24.542 31 C 28.109 31 31 28.108 31 24.542 L 31 6.458 C 31 2.892 28.109 0 24.542 0 Z M 10.333 24.542 L 6.458 24.542 L 6.458 10.333 L 10.333 10.333 Z M 8.396 8.696 C 7.148 8.696 6.135 7.675 6.135 6.417 C 6.135 5.159 7.148 4.139 8.396 4.139 C 9.644 4.139 10.656 5.159 10.656 6.417 C 10.656 7.675 9.645 8.696 8.396 8.696 Z M 25.833 24.542 L 21.958 24.542 L 21.958 17.303 C 21.958 12.953 16.792 13.282 16.792 17.303 L 16.792 24.542 L 12.917 24.542 L 12.917 10.333 L 16.792 10.333 L 16.792 12.613 C 18.595 9.273 25.833 9.026 25.833 15.811 Z" fill="transparent" height="31px" id="pTjY2tp7Z" width="31px"><path d="M 0 31 L 0 0 L 31 0 L 31 31 Z" fill="transparent" height="31px" id="WHbfP5vd5" width="31px"/><path d="M 24.542 0 L 6.458 0 C 2.892 0 0 2.892 0 6.458 L 0 24.542 C 0 28.108 2.892 31 6.458 31 L 24.542 31 C 28.109 31 31 28.108 31 24.542 L 31 6.458 C 31 2.892 28.109 0 24.542 0 Z M 10.333 24.542 L 6.458 24.542 L 6.458 10.333 L 10.333 10.333 Z M 8.396 8.696 C 7.148 8.696 6.135 7.675 6.135 6.417 C 6.135 5.159 7.148 4.139 8.396 4.139 C 9.644 4.139 10.656 5.159 10.656 6.417 C 10.656 7.675 9.645 8.696 8.396 8.696 Z M 25.833 24.542 L 21.958 24.542 L 21.958 17.303 C 21.958 12.953 16.792 13.282 16.792 17.303 L 16.792 24.542 L 12.917 24.542 L 12.917 10.333 L 16.792 10.333 L 16.792 12.613 C 18.595 9.273 25.833 9.026 25.833 15.811 Z" fill="rgb(255, 255, 255)" height="31px" id="JPTJvTGpd" width="31px"/></g></svg>)
Copyright © 2025 Liv Johnson UX Design
Copyright © 2025 Liv Johnson UX Design
Web UI | illustration | animation | VR
Meta X Duolingo
An interactive, motion site showcasing the future of language learning with Meta x Duolingo VR
Conclusion
This project allowed me to explore motion and interaction design in depth, while also pushing me to learn new tools like Webflow, Rive, and Lottie. The process was far from linear—some parts were unstructured and technically challenging—but that made the learning more meaningful. Despite the hurdles, the freedom to experiment was valuable, and the final outcome reflects both creative exploration and technical growth.
Outcomes
Designed a responsive desktop micro-site in Webflow with smooth scroll-triggered interactions.
Used Lottie and Rive to bring the experience to life through motion and micro-interactions.
Developed a visually rich,
story-led interface that promotes the concept product in an engaging way.