Me: A Kid's Diary
UI/UX Design
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.
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.
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.
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.
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.
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.
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.
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.
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.