Mission
Help Kidjo.inc to rebrand their children app, from Art Direction to UI Design.

I’m a designer but I’m also a dad with 2 little daughters that sometimes want to watch cartoons. I’m not kind of screens for children but I allow few minutes here and there… I whish I could let my children alone on Youtube but that’s unfortunately not possible. I have 3 issues: the ads, the lack of control over content (a 4 y.o child click everywhere on the screen), the Youtube U.I which is not designed to be used by young kids alone.

As I would pay for such a product, I’ve already checked up on the Appstore for an app that answers these issues but didn’t find something really efficient among existing apps like Youtube kids, Hopster, Netflix, Playkids and... Kidjo.

When I’ve received a mail from the Kidjo team to ask me if I could help them to redesign their product from scratch I was very exited because I really thought I could do something and I knew my own kids would be glad to test such a product.

This adventure started in August 2016, I was in charge of the Art Direction and the User Interface design of the product, while collaborating with Johan Adda, former Apple UX.

Kidjo is an iOS app mainly designed for 3 to 7 y.o kids, but also for the parents. Here is a list of the main core features of the product:

Kids features

• Watch cartoons and learning videos
• Use the app alone
• Save video locally

Parents features

• Set up to 3 kids profiles
• Define a max. time watch limit
• Content feed customization

It was the first time I had to design for 3 to 7 y.o humans and let me tell you that it’s not as simple as I thought because there are LOTS of design constraints. My first mission was to rethink the product identity. The project was split into 2 distinctive parts. Even if young kids are the main users, all the setting part is dedicated to their parents (mostly women).

I’ve used tools like Niice to create and share mood boards, then Photoshop and Sketch to create some early mockups to set up the right color palette and font. During my researches, I’ve found some interesting things in the book « Design for kids » by Debra Levin Gelman. Now, let me explain how I’ve organized my design process.

After many searches and iterations, I’ve finally come up with a palette of 6 highly contrasted and recognizable colors (AA contrast level in WCAG 2.0) to make the differentiation of each license folder easier for the young users of the app. I’ve also crafted each UI elements with soft rounded playful shapes. 

In order to add a more playful   look’n feel to the app, we’ve worked with Caroline Attia, a french illustrator who has created nice illustrations for the background of the app, and few custom characters for sound cards.

Note: we even push the detail further by adding a night background mode if you use the app in the evening <3

Throughout the mission I’ve collaborated with Johan Adda, former Apple, now freelance UX Architect. He has provided me UX material like wireframes and user flows. That mission had lots of UX challenges as our young main users don’t know how to read yet and don’t understand content hierarchy upon to one level. More of that, the app has to be used on any kind of device from mobile to tablet.

After redefining the user needs, my UX colleague has created a clever grid system without unit, only relative to the screen size in order to be ready for any kind of devices. He has also thought about an app without any navigation system, no text for kids and almost no icons. Just a scrollable content feed with cards to display cartoon licences and a full screen video player to watch them.

Before starting to work on the UI, I like to go deep into the UX part in order to have a good understanding of the features, information architecture and user flows of the product I’m working on. Based on that UX material, I’ve done lots of sketches with my good ol’ paper and pencils to quickly test and organize my ideas.

Even if we have to manage a way for the parents to display the setting part of the app without causing to much noize for the kids experience, I want to present you how simple kidjo is for kids:

As you may know, it’s hard to build seamless user experience, even harder when you target a very young audience. Achieving such a simple user flow took lots of time and we’ve gone throught many rounds of iteration.

I’ve used Sketch and Invision in order to quickly iterate and test our ideas into multiple prototypes. Invision is perfect to experience the design work in real context (on my phone) and share a test url for the team. I was also able to make my older daughter try few of the early versions of the app in order to see how she experienced the product.

Here is a presentation of some of the iOS app screens I’ve done for mobile and tablet. The Kidjo app is divided into 2 distinctive parts: the main navigation dedicated for 3 to 7 y.o kids in landscape mode, and the parent’s settings area in portrait mode. The parent button displays a parental gate to open the app settings.

Thanks to the data, we _ as designers_ could have a direct feedback of our work. Design is just a tool to create a better experience for users which logically lead to increase product sells. After few months, I could proudly say that the work we’ve done on that new product version hits +200% sales on iOS and get some pretty good feedbacks on mass media (TV show, press etc.).

UPDATE Jan 2017: Kidjo has been featured on the AppStore!