Creating an educational app experience for kids that doesn't smell like school.

Google Kids Space

Agency: Hello Monday
Project: Product design
Year: 2020
—
Creative Direction, storyboard, user experience design & motion system
The Kids Space project was a multiple phase engagement between Hello Monday & Google. With kids gaining access to digital devices at an earlier age than ever before, it was important to rethink the experiences for them.
A lot of kids apps out in the world are similar to the wild west. There is a need for a more nurturing, safe, and educator vetted space that parents can trust.
The challenge is to nurture the imagination with an OS that speaks the same language as your kid and allows them to be anyone they want to be. Anything can be anything, and the rules can be broken.

From a motion design perspective this was a dream project. A kids OS who’s brand is centered around “no rules” and “anything can be anything”! Talk about letting your mind fly wild.

The challenge was really to try and find the right balance between what was going to be fun for the kid to use, not redundant and eventually boring, and also not super annoying for parents. I approached this motion system by giving myself areas of focus. Play, motivate, and delight were my main motivators, and orientation, hierarchy, focus, and fun were my goals. Every piece of motion design should in some way shape or form support those goals and be informed by those motivators.
I designed system level animations, which included transitions, card behavior, loaders, loading hierarchy logic, and icon animations. I also split the motion design execution into two age groups, 3-4 and 5-6. The younger ages leaning more toward Play, where fun is fun, just because! The older ages were driven by Motivate where we look to peak curiosity and encourage discovery and experiences.
This was a log of blue sky thinking but we made sure to deliver a beautiful video, some amazing icons, and a roadmap to the future. We also delivered an initial build of the avatar system, built in the game developer software Spine that allowed users to fully customize their avatar.
gks-00_220622

We wanted the intro to to be epic and set the tone for the experience. We started with a rabbit hole, and end with a sneak peak of a whole new world.

gks-storyboard
It was important for us to have a story in thumbnails. Not only to help the client understand the concept but to drive our visual explorations. These boards were obviously going to evolve as we moved forward but it gave a solid north star as the project revealed itself.
Each section of the app was designed into the world peak in the intro. As well as all of the major category icons. The idea is to give the users a sense of the world they are entering.
gkspace-video-01
Users can utilize over 1,000 assets to fully customize their avatar in the builder. Allowing them to express themselves in the most fun and wild ways they can imagine. They can dress up like a doctor, or firefighter, but how about a dinosaur?! How about a dinosaur with fairy wings, leather boots, and a firefighter hat?! Yep, it’s all possible.
To do dilligance to the diverse nature of the avatar, I made sure that it was built in a way that maximized the animation capabilities, without breaking any of the thousands of illustration items. Allowing the avatar to not only look super cool, but have the attitude to match with over 30+ custom animations.
gks-avatar-01
gks-avatar-01_220614
We animated various idle states to ensure the avatar is always alive. We also animated action states if the user decided to tap the avatar for a fun , serendipidous surprise. To keep the avatar feeling fresh, we animated a series of reaction states for whenever users unlocked or added a new item. All of these custom animations were in pursuit of keeping the avatar fresh.

We also designed and animated a full set of icons, loaders, and critical user journey flows. I edited these flows together as a full experience to give stakeholders a hollistic view of the final product

I built the flow as a roadmap for the team and stakeholders. I also made sure that we had items that engineering could impliment immediatly that would have impact on the users and their experience.
Icons, custom spinners and loading logic, transitions and spatial models, concepts, and more.
I’m very happy with the icons which were designed using frame by frame animation to get a more kid forward feel to them. Each icon was then rebuilt in After Effects and exported as JSON files through Lottie so they could be immediately implimented.

Google Kids Space won a Google Design best of 2020 Award, calling out Avatars on equity & inclusion.

Credits

Project Manager: Vela Krachangloke, Savine van Creative
Executive CD: Johanne Bruun Rasmussen, Jeppe Aaen
Art Direction: Shaivalini Kumar
Animation Direction: Kamron Robinson
Intro Animation Production: Brikk Studio
UX Research: Frederik Højfeldt Nielsen
Creative Strategist: Este du Plessis
UI Design: Line Jacobsen, Illustration: Shaivalini Kumar, Sindy Ethel
Motion Design: Kamron Robinson
Animation: Kamron Robinson
Spine Rig & Character Animation: Kamron Robinson, Yuchen Xu
Sound Design: Antfood

About

Not right, just curious.