Engaging Learning Experience with Lottie Interactivity
Aran Kim - Motion & Interaction Designer
Our focus is not just on making things visually appealing but also on helping users understand and interact with information effectively.
Riiid is a global AIEd (Artificial Intelligence in Education) company that offers personalized learning solutions through data-driven deep learning technology. In 2023, Riiid acquired Qualson, an English learning content company, to gain expertise in content creation and delivery. Leveraging Riiid’s technological capabilities and Qualson’s content know-how, the upcoming 'Real Academy,' set to launch in late 2024, is a tablet-based language academy service. It aims to precisely diagnose elementary students’ learning abilities and provide personalized learning paths. To increase student engagement and enhance the learning experience, the Real Academy team incorporated various interactive features, significantly supported by Lottie animations and motion interactivity.
Gamification is crucial in encouraging user engagement and adding fun elements to the service. This is particularly important for Real Academy’s tablet-based educational platform, which targets elementary students with generally lower attention spans and a need for independent study. In such an environment, gamification transforms the learning process into an engaging and motivating experience, encouraging students to participate voluntarily and continue learning. Consequently, Real Academy developed various gamification features and interactive elements to foster student engagement and enthusiasm for learning.
Real Academy introduced avatar design interactivity using Lottie animations, allowing students to customize their avatars freely. Upon first login, students receive a student ID and can personalize their profile image. By utilizing Lottie animations, these images became more lively and expressive, showcasing cartoon-like expressions and unique items. This motion interaction helped Gen Alpha students feel more connected and excited about entering the virtual language academy, making it less unfamiliar and more enjoyable.
Implementing game features with Lottie animation
Lottie animations played a significant role in making learning fun through game elements. For example, a slingshot game where students throw the letter 'A' to complete the word 'CAT' in a box (similar to the word break game) uses Lottie animations for dynamic effects. Correct answers trigger cloud effects, while incorrect answers show breaking boxes, all rendered smoothly and vividly with Lottie. Additionally, star animations were used to visually emphasize achievements, enhancing the sense of accomplishment. These interactive game features helped students perceive each learning moment as an enjoyable challenge.
Lottie interactivity for emotional touch and reactions
Using Lottie animations for interactivity significantly helped express emotional elements. During the learning process, animated grading results helped students naturally accept their weaknesses and foster positive learning experiences. Correct answers were rewarded with lively cube reactions, while incorrect answers were gently indicated with a slight vibration to avoid negative feelings. These animations facilitated a positive and accepting learning environment.
Properly utilizing Lottie animations to enhance learning motivation, Real Academy rewarded students with stamps, confetti, and stars for following the curriculum. These visual rewards frequently provided praise and encouragement, making learning feel like a game and enhancing focus and engagement.
Consistency in user experience through motion design system
Providing a consistent motion style across the user experience is crucial for reinforcing service continuity and delivering a cohesive, smooth experience. Real Academy offers six main features, including curriculum learning, vocabulary learning, homework, and attendance checks. To avoid fragmented interactions from different designers, the Interaction Designer defined common motion styles for all features, ensuring they felt part of one unified service.
-The main motion styles were defined based on the created UI, categorized as Ease and Spring, with speed values set as Basic, Enhance, and Dynamic.
For example, 'Ease Basic' was used for pagination to provide smooth transitions, enhancing the natural feel of screen changes.
'Ease Enhance' was used for modal windows, creating a sense of tension
when appearing and quickly disappearing to keep the user focused on the next content.
'Spring Enhance' was used for special occasions, such as badges or student IDs, making them appear like surprise gifts to capture user attention.
Maintaining the same style, behavior, and responses throughout the user interface minimized confusion and provided a seamless, integrated experience.
Tools for Interactivity - LottieFiles
dotLottie - The optimal choice for significant changes
The dotLottie format from LottieFiles is highly regarded for its stability and optimization in animation implementation. Previously, bodymovin and WebM formats were used, but these methods were time-consuming due to repetitive testing for size optimization. As a motion designer and interaction manager, handling numerous interactive elements and animations alone, the dotLottie format eliminated the need for additional optimization, significantly reducing workflow. It also ensured lightweight implementation within the service, enhancing usability.
Improved communication through LottieFiles
As an Interaction Designer, providing clear visual guides during prototype development was essential for communication with developers and product designers. We used Figma for UX discussions, Framer for development discussions, and After Effects for motion work. Despite using different tools, LottieFiles enabled sharing consistent animations in GIF or embed formats. This consistency was crucial for smooth interaction discussions across different roles, facilitating effective collaboration throughout the project.
Synergy between Adobe After Effects and LottieFiles
Implementing PNG sequences via LottieFiles for web and app expanded the scope of motion design. Effects difficult to achieve with Lottie alone were reliably implemented using PNG sequences. This included adding 3D effects, shadows, and liquid effects to loaders, broadening the range of special effects achievable with Adobe After Effects.
Every movement has a meaning
As a Motion & Interaction Designer at Riiid, I believe animations and movements in a product should have a clear purpose and meaning. Beyond mere visual appeal, they should aid users in understanding and interacting with information. My role involves translating product designers' visions into highly usable movements and collaborating closely with developers to understand technical constraints and find optimal solutions. This close collaboration among different roles was key to building services like Real Academy.
Moving forward, Riiid will continue to create diverse and enjoyable learning environments with LottieFiles.
