My work @ Quizizz.
Bringing Q-Bits to life.
Quibits was later changed to “Q-bits”
Overview:
Q-Bits is a customization feature introduced in Quizizz, designed to allow users to personalize their avatars. This personalized avatar is then used everywhere for a user throughout the product, giving the user a personal touch with the product and uplifting the existing experience by reacting live to the quiz they’re attempting.
The Q-bits is now live, used by thousands of students around the world!
Team:
Bhavika Maheshwari - PD
Chaitanya Gadodia - SDE
My Role:
Motion design - character animations, Integrating rive into the current system.
Some insights from the team
Majority of the users don’t have the internet bandwidth & proper hardware fit to download and render the animations readily.
To provide a smooth experience to everyone the size of animations delivered should be acceptable at all bandwidths with a simple rendering of animation.
Challenge(s):
Q-bits customization application was production ready but the requirement of animating the avatar, by either code or gifs would be a disaster for developers and storage servers respectively. Every different permutation of the avatar will require it be a pre-defined animation in the case of gifs.
Meanwhile complex animations like face expressions cannot be done in css.
Using rive to handle the whole avatar creator was a good alternative but a total of 450+ assets will also cause rive file to be very heavy in size and may not give performance across all devices.
Rive was not supported natively in Vue.js, the framework used to implement all web applications, but luckily web runtime packages were still available.
Introducing rive to the team
Convincing developers to use rive in this project was also an challenge, but I had introduced rive to the design and dev team for some previous project in which animations were non conditional.
Rive provides a editor and renderer that works with svgs directly.
It was ideal for animating facial expressions and changing the color of skin.
Finding a way to implement optimized animations.
In the existing version of the q-bits, svgs were taken and stacked in a defined order to build a avatar.
Using a hybrid method to implement animations.
• Complex animations like face expressions can be done using rive.
• Translation and Rotation of the individual layer can be done by css.
Layering of the avatar assets
Rive animations
The rive file delivered as replacement also had to sustain the feature of "skin color customization" alongside face expressions.