How we developed a talking frog to keep kids safe in the digital pond
The internet can be a scary place for kids, and even scarier for parents!
Children are becoming increasingly savvy when it comes to finding their way around digital devices, leaving them exposed to potentially harmful images, people and information.
We recently worked with the clever team at TigerIT to develop characters and graphics for the Kindermate app. Kindermate allows kids to have fun and independence while searching the internet safely.
How Kindermate works
The Kindermate app is a browser and search engine in one and features a powerful combination of AI, parental controls and animation.
‘Using state of the art technology, our algorithms find relevant content from platforms like YouTube and Wikipedia,’ say the Kindermate team. ‘The search results are then filtered according to your specifications and any unsuitable content is blocked.’
The end result is a screen full of child-friendly videos, articles and information for kids to browse.
An intuitive amphibian
The main character for Kindermate is a chatbot frog. Children using the app only need to ask Frog what they’d like to see and Frog goes off to find it, filtering out anything that wouldn’t be suitable for them.
Developing the character of Frog was a fascinating part of the project in the sense that we were designing a character that would need to grow and develop along with the app – very different from creating an character for a more linear animation project.
The development team built machine learning features into the app to ensure that Frog’s responses develop over time. This meant that as part of our design brief we were required to build a wide range of nuanced motions and emotions for Frog that could be expanded upon at a later date.
A fun frog, with a level head
We started with a fairly blank slate – with one stipulation that the character had to be a frog.
It was very important that Frog appealed to kids, so it needed to feel young and friendly, but savvy enough to know how to guide a child around the internet.
Our exploration stage kicked off with a number of different Watermark Creative artists providing sketches that explored different shapes and forms for Frog.
As you can see in the sketches below, very subtle differences in the details can really change the personality of a character.
The points of discussion largely hovered around the design of the Frog’s eyes, their proportion to the its body (the bigger the head and eyes, the younger it will appear) and the overall silhouette shape.
Creating a 3D model of Frog raised a few challenges – we needed to ensure it would technically render correctly in Unity3D, have enough vertices to appear smooth, but also appear optimised.
On top of balancing the technical considerations, making sure the character looked ‘correct’ at different angles required many iterations. The final result was a carefully crafted character that really brings the original 2D solution to life!
Going beyond the lilypad
As we delved into the tough questions like ‘what shape should frog’s head be?’, we also explored what Frog’s world might look like.
We agreed that Frog needed to feel small in relation to the world around him and looked at a variety of different concepts.
Did he live in a small pond, was it a small cardboard diorama of a pond in a shoebox?
Were there other creatures? Could we see Frog’s home? The exploration options seemed endless, however we had a great process in place to ensure that we remained on track and on brief.
During our design process we use our initial concepts to explore very broad ideas to scope out as much territory as possible. From there, we work closely with the client to determine the areas of interest that fit the tone and messaging we’re trying to convey.
Ensuring Frog’s world is fit for purpose
Apart from the many creative considerations, we also had to keep in mind the technical constraints we were working to.
The artwork and animation needed to feel considered in both landscape and portrait modes – for instance: foreground elements like the reeds lock to the corners of the screen to help frame the character.
In conjunction with the normal modelling challenges, Frog would be required to appear as though it was speaking back to the user in its animated responses.
To create the illusion of the Frog speaking, the character was rigged to have several key mouth shapes that could be tweaked to form the spoken words.
The development team created a nifty script that would analyse the audio, identify which mouth shapes were needed, and sequence their playback as needed in the animation.
A big thanks to Sajjadul Hakim for bringing us on board to work with his design and development team on this project. It’s an exciting concept and we’re looking forward to seeing the future updates.
As always, a massive thanks to everyone on the Watermark team who put in the long hours and love to bring Frog to life!
View more images from this project on our Behance Kindermate project page.