Holly Graham
Illustration & Design
AvatarTool_Mockup.png

Me: A Kid's Diary

Me: A Kid's Diary

UI/UX DESIGN
Designing a customizable digital diary for kids to document their world.

 
 

For Tinybop's 5th app in the Digital Toy's library, we designed several tools to help kids document their worlds: their families, friends, pets, feelings, likes, dislikes, wishes, and dreams. As they play and create, kids build self-awareness, self-confidence, empathy, and kindness. Read more about the problem-solving and prototyping that went into building this app below.

Primary goal: How might we allow kids to customize their diary so it feels unique and responsive?
We identified several tools kids are already familiar with using to express themselves, like Snapchat and Music.ly, and mapped out various app structures to not only support those tools but also visualize user inputs in surprising and interactive ways. 
IMG_2242.JPG
IMG_8742.JPG

The Tools

After researching common tools kids are familiar with from other apps, I collaborated with our team to prototype and design a set of 6 key tools custom for this app to help kids express themselves when responding to various question prompts. Using Proto.io, I designed mockups to visualize user flows for our product, design, and development teams. Once finalized, I collaborated with our design team to create the graphics for export into Unity.

AvatarTool_Mockup.png

Avatar Tool

We worked closely with our artist, Ana Seixas, to provide a variety of face shapes, hair styles, facial features, and accessories for kids to choose from as they build avatars for themselves, family, and friends. 

 

NameGif.gif

Text Tool

For many prompts, ranging from simple facts such as their name to more lengthy responses describing their favorite book, kids can respond using the text tool. 

After completing a text prompt, kids see a fun visualization of their answer, often paired with a related image or animation.

MC_selection.gif

Multiple Choice Tool

Users are presented with a set number of options to choose from. This tool is mainly used for color selection, but the answers are used to define various areas of their diary. For example, the user's favorite color is automatically applied to the background of the main "Me map" where all answers are stored.

MicTool.gif

Recording Tool

Other prompts require kids to record answers of their own. Hit the microphone to start recording for a maximum of 30 seconds as the dial shows your progress. After recording, kids see an animated avatar speaking what they just recorded! They have the option to re-record, save, or share.

PhotoGifTool.png

Photo/GIF Tool

This tool is intended to get kids out into the world to collect answers in fun ways. Kids can record a gif or take a photo and then decorate it with a stickers and text.

DrawingTool.png

Drawing Tool

With 3 drawing tools, stickers, and text, kids can create unique masterpieces and express their creativity. These drawings are given digital frames and put on display back in their me-map.

What is this "Me-Map"?

The 'Me-Map," as we refer to it, is the ever-changing depiction of your world. It is the main, scrollable hub where kids access new question prompts, view/edit avatars, and store answers to completed tasks. Figuring out the structure of this map and how much control we wanted to give kids over this space was a grueling process. We compromised by providing random questions that can float and be moved anywhere, as well as questions grouped by "islands" for kids in search of specific question themes.

MeMap.gif

iTunesArtwork@2x.png

Download Me: A Kid's Diary, Tinybop's 5th Digital Toys app, on iTunes. Featured as one of Apple's "Best of App Store 2017." 

App mentions: Cool Mom Tech, Fast Co. Design

FULL PROJECT TEAM:
Nneka Bolden, Leah Feuer, Russel Savage, Yin Liu, Ashley Manetta, Maxim Kolbowski-Frampton, Jeanelle Mak, Beckie Choe.