![](data:image/svg+xml,<svg display="block" role="presentation" viewBox="0 0 38 37" xmlns="http://www.w3.org/2000/svg"><path d="M 16.672 16.514 C 16.514 16.023 16.372 15.548 16.213 15.058 C 16.055 14.567 15.912 14.108 15.786 13.648 C 15.659 13.205 15.548 12.793 15.437 12.413 L 15.406 12.413 C 15.263 13.094 15.089 13.775 14.867 14.456 C 14.63 15.216 14.392 16.008 14.139 16.799 C 13.917 17.607 13.68 18.351 13.442 19.016 L 17.464 19.016 C 17.369 18.682 17.242 18.288 17.1 17.874 C 16.957 17.448 16.815 16.989 16.672 16.514 Z M 31.271 0 L 6.729 0 C 3.008 0 0 3.008 0 6.729 L 0 30.321 C 0 34.042 3.008 37.05 6.729 37.05 L 31.271 37.05 C 34.992 37.05 38 34.042 38 30.321 L 38 6.729 C 38 3.008 34.992 0 31.271 0 Z M 23.275 26.172 L 19.964 26.172 C 19.855 26.188 19.744 26.109 19.713 25.998 L 18.414 22.23 L 12.524 22.23 L 11.321 25.951 C 11.289 26.093 11.163 26.188 11.02 26.174 L 8.043 26.174 C 7.869 26.174 7.822 26.077 7.869 25.889 L 12.968 11.21 C 13.015 11.052 13.063 10.877 13.126 10.687 C 13.189 10.355 13.221 10.007 13.221 9.658 C 13.205 9.579 13.268 9.5 13.348 9.484 L 17.448 9.484 C 17.575 9.484 17.638 9.532 17.654 9.611 L 23.433 25.919 C 23.481 26.092 23.433 26.172 23.275 26.172 Z M 28.658 25.935 C 28.658 26.109 28.597 26.188 28.454 26.188 L 25.349 26.188 C 25.191 26.188 25.112 26.092 25.112 25.935 L 25.112 13.743 C 25.112 13.585 25.177 13.522 25.319 13.522 L 28.454 13.522 C 28.597 13.522 28.658 13.601 28.658 13.743 Z M 28.327 11.638 C 27.949 12.022 27.423 12.224 26.885 12.192 C 26.363 12.208 25.856 12.002 25.474 11.638 C 25.111 11.241 24.918 10.718 24.936 10.181 C 24.92 9.643 25.126 9.136 25.504 8.772 C 25.888 8.408 26.394 8.218 26.917 8.218 C 27.536 8.218 28.008 8.408 28.358 8.772 C 28.706 9.152 28.896 9.658 28.88 10.181 C 28.896 10.719 28.706 11.242 28.327 11.638 Z" fill="rgb(255, 255, 255)" height="37.05000000496702px" id="uTMHVPccS" transform="translate(0 -0.025)" width="38px"/></svg>)
Meta X Duolingo
An interactive, motion site showcasing the future of language learning with Meta x Duolingo
Meta X Duolingo
An interactive, motion site showcasing the future of language learning with Meta x Duolingo
Overview
The Brief
The task was to design an interactive micro-site on a topic of
my choice.The experience needed to be visually engaging and hold the user's attention for around five minutes.
We were encouraged to explore creative digital storytelling techniques.
The use of dynamic elements, like parallax scrolling and animations, were promoted to enhance interactivity and visual appeal.
The Approach
To respond to the brief, I created a concept for a VR language learning product called Meta X Duolingo.
My goal was not only to deliver an engaging micro-site but also to learn new tools and techniques along the way.
I chose Webflow as the site builder and explored integrating Rive and Lottie animations to enhance interactivity.
The site acts as a promotional experience for the product, encouraging users to explore language learning from a fresh,
immersive perspective.
Overview
The Brief
To design an interactive micro-site on a topic of my choice, ensuring the experience is visually compelling and has an interaction time of approximately five minutes. Creativity within digital story telling was encouraged, and the use of dynamic elements (such as parallax effects) was promoted.
The Approach
To tackle the brief, I created a VR language learning product - 'Meta X Duolingo'. My aim was to learn new skills throughout the process of creating the micro-site, with this, I decided to use Webflow as the site builder and also explore the integration of Rive and Lottie animations.
The site is used as a promotional method for the 'Meta X Duolingo' product, and encourages the user to learn languages from a different perspective.
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.
Product development
For this project, I set out to create a promotional website, which led to the development of Meta x Duolingo. Through research, I found that Duolingo uses Rive to animate its characters, which made Duolingo the natural starting point for this project. As a personal user of Duolingo, I saw the potential for a VR version of the app to enhance the learning experience - which was supported by further research. During this stage, I also analysed Duolingo's copy style to replicate the brand tone within
my microsite.
Development
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.
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.
Animations
Drawings
Each character and element used in the site's animations was hand-drawn in Illustrator before being animated in Rive or After Effects. Elements created in After Effects were then exported as Lottie files for seamless Webflow integration
Research
Research & Ideation
The research process utilised multiple methodologies to create a centred approach to our final design. Our research included (but is not limited to) user interviews to gain direct insights, heuristic mark-ups of the old site and by using Don Norman's design principles I was able to create charts and graphs which identified weak points in the original site.
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.
View in Miro
Research
Research & Ideation
The research process utilised multiple methodologies to create a centred approach to our final design. Our research included (but is not limited to) user interviews to gain direct insights, heuristic mark-ups of the old site and by using Don Norman's design principles I was able to create charts and graphs which identified weak points in the original site.
Development
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.
View in Miro
Research
Research & Ideation
The research process utilised multiple methodologies to create a centred approach to our final design. Our research included (but is not limited to) user interviews to gain direct insights, heuristic mark-ups of the old site and by using Don Norman's design principles I was able to create charts and graphs which identified weak points in the original site.
Animations
Drawings
Each character and element used in the site's animations was hand-drawn in Illustrator before being animated in Rive or After Effects. Elements created in After Effects were then exported as Lottie files for seamless Webflow integration
Research
Research & Ideation
The research process utilised multiple methodologies to create a centred approach to our final design. Our research included (but is not limited to) user interviews to gain direct insights, heuristic mark-ups of the old site and by using Don Norman's design principles I was able to create charts and graphs which identified weak points in the original site.
Product development
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.
View in Miro
Research
Research & Ideation
The research process utilised multiple methodologies to create a centred approach to our final design. Our research included (but is not limited to) user interviews to gain direct insights, heuristic mark-ups of the old site and by using Don Norman's design principles I was able to create charts and graphs which identified weak points in the original site.
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.
View in Figma
Get in touch
Copyright © 2025 Liv Johnson UX Design
Copyright © 2025 Liv Johnson UX Design
Get in touch
Copyright © 2025 Liv Johnson UX Design