Loading interactive animation…
The Process
I started with designing a new character following the Duolingo official guidelines. The idea was to create a character exclusive for the Italian language - an Italian chef who will evaluate the language exercises as well as food related customs. In general the character supposed to behave a bit grumpy but also should be able to appreciate user’s successful actions. As the idea for this project was to use Rive for every step of the design process I’ve created the character without using Illustrator. With the character ready, I built a full bone structure, adding extra bones to the arms for greater flexibility. I also implemented IK controls for the legs, which simplified the animation process. To enhance expressiveness, I created joysticks for 2.5D head movement, as well as controls for the eyes and eyelids. Finally, I developed a state machine with four animations: success, failure, and two idle states.
In the second phase, I adapted the Duolingo style to design a quiz interface. I created and animated three buttons and a progress bar, building each as a reusable component. I also designed a template component containing text areas for questions and answers. This template was used across the main artboard, where I swapped in content for each new question using data binding.
