YouTube Kids Onboarding
Making Boring Suck Less
Onboarding can often be the bane of a UX Designer's existence. The Interactions can be long-winded, overly complicated, time consuming and mostly useless...and that's before the lawyers add walls of text that no one reads. On YouTube Kids, we used this area as a testing zone for complicated animation workflows in order to see how it impacted the app while trying to brighten up a parent's day, just a little.
Mission
Utilize the onboarding section of the YouTube Kids app to experiment with more advanced animation workflows while keeping any problems that may arise sequestered to a low impact area.
Goals
- Make the painful task of sitting through onboarding a little more fun
- Utilize illustration and animation to convey an intentional idea or story
- Build and test an animation workflow that allows for a fully vector, 60fps ouput utilizing a single JSON file for iOS, Android and Web
- Test and evaluate implementations while tracking bugs and performance problems, especially on older devices
- Build a workflow that can level up YouTube Kids' ability to create more delightful experiences without unbearably long feature builds
Target Audience
Parents of all ages who are trying to get their children set up and utilizing the YouTube Kids app to it's fullest potential.
Starting Simple and Translating Assets from Pre-Rebrand
When I first began building assets for the YouTube Kids app, the animation workflow was pretty archaic, relying heavily on animated gifs to translate After Effects animation into implementable assets by our engineering team. I will not go into the many details of that process here, but have written an article on that journey on Medium as well as LinkedIn. Early versions of the Motion Brand for YouTube Kids had a simple and straightforward approach. When the rebrand of the app happened and I began testing ways to evolve the motion workflow, I used the more simple and less exciting animation needs to create some initial animated tests, in the onboarding space, after updating them with the newer branded look. The low complexity was a great way to see if the new toolset was going to work, while still retaining strong performance on older devices and without adding too much to the application install size. After updating the assets to the new workflow the file size of the assets went from a 2.1MB GIF to 400K JSON for the filtering animation and 900K GIF to 142K JSON for the flagging animation.
Exploration of Advanced Animating Techniques
During the rebrand process of YouTube Kids, it was decided that the new illustration style was to be character-centric, more organic and embody a cel animation style. Since I had spent quite a bit of time working on the new animation workflow I was interested to see how it would handle the branded elements. Cel animation works fairly well on mediums since most of the tecnique is built around 15-25fps and utlizies things like smears and blurs to hide dramatic character movement. Within the mobile space 60fps would easily show sloppy transitions in animated assets as well as negating the affects of smears and blurs. Once again, the onboarding area of our app became the testing ground for effectiveness in utilizing Lottie/Bodymovin' JSONs to build delightful character animations that could fit within the new illustration branding guidelines. These original animations show how successful the workflow had become and the power I had to create beautiful animations with a more organic, traditionally styled direction.