INTO the woods
A case study of UX design & prototype for a kids learning app
The Problem
I had to design an animal theme for a kid's learning app. Game design is something I always wanted to do since I was a little kid, but it always seemed so alien to me. This is a guide on how to trust the process to create something wonderful ✨
This seemed impossible at the time but I learned through painfully long iterations that Big Problems are easier to deal with when broken down into more minor problems. I had to really understand the problem of building a learning experience for the kid that we could claim is a better use of their screen time, build a solution well within the scope of the team, create a thematic aesthetic for the product moving forward, and define some of the UI and prototype it.
My (long and windy) process towards solving this problem is as follows:
-
Understanding the User
-
Competitive Analysis
-
Building requirements
-
Setting the right theme
-
Wireframes
-
Character design
-
UI components & Typography
-
Prototype
that's enough youtube,
get some rest!
Annie!
Annie is an 8-year-old girl in grade 3 who has a keen interest in learning new things.
She is perceptive and curious about the devices that adults seem glued to and has recently started writing well and speaking longer sentences.
Her mother is impressed by her ability to navigate YouTube to find songs but is concerned about her stumbling into inappropriate content.
As online learning becomes more prevalent, Annie's mother wants to put her phone to good use by providing her with educational content that is both safe and beneficial.
what Annie's mom wants for her
Our user needs a tool that can help him/her learn about animals. Although she also learns about animals in her school textbook, she forgets the spellings and does not like reading a lot of text presented to her in paragraphs. This app needs to have a short text, show her animals' behavior, and present it in an accessible yet informative fashion.
She is looking for a tool that declutters and reorganizes the information available to her. This needs to be done in an interactive manner that helps her empathize as she learns rather than remember the facts that are presented to her. She is not familiar with using the home laptop but uses apps and games on her mom’s mobile. Therefore, this needs to be a mobile-first application.
The user is on the go at all times and may not have the attention span to remember what was taught to her in the last session. Therefore, she needs a brief overview of what was taught the last time through a quick overview of her progress. She doesn't like waiting, and when implicitly asked to do so, needs to be engaged through animations that help to keep her attention span at bay. Consequently, this app needs to be fast and responsive.
The visuals presented in the app need to be simple and recognizable to her. They need to be easy to draw from memory and present a colorful world that excites her. This app needs to tell her a story that she understands. It needs to present a character she can empathize with. She remembers and learns better when she is given a sequential set of experiences in a stylized humanoid fashion.
when the
needs of your customers
are different from
the problems of your users,
always delight your users
competitive analysis
It's not the first product to address this space and will certainly not be the last. The following are some of the applications that were looked at in finer detail for product ideation:
-
Google Kids
-
Youtube Kids identity
-
Animal World
-
Kids World
The key learning are as follows:
-
Most of the applications geared toward kids incorporate a palette of bold, primary colors to grab their attention.
-
Throughout every interface, the copy is simplified and easy to understand. It is unambiguous and familiar to the child.
-
The elements of UI are simplified and offer fewer choices than a typical application. They are also enlarged and easy to tap. Skeuomorphism can help guide user affordance.
-
The Typography incorporates fonts with a large x-height to ensure readability. The font sizes are also more exaggerated and spaced out making the characters more visible.
-
The illustrations are often cartoonified and simplified. They are seldom anatomically correct but offer a caricature that helps remember the key features of the animals.
Building requirements
We require a children's educational app that focuses on animals, with the following features (some of these beyond the scope of the case study ):
-
The app must have animal categories presented in a clear and concise manner, and be available for offline use.
-
Animal features will be presented through storytelling to ensure better understanding and empathy, and there will be ample use of anthropomorphic animation.
-
Children will assist animals in their day-to-day activities, with each experience serving as a unique story. This builds an emotional connection with the animals.
-
The app should provide a clear indication of learning progress, with advanced gamification features like achievements and a progress bar.
-
The app's UI must be visually distinct and easy to understand, with clear actions for each interface.
-
Interactions in the app should offer minimal room for errors, and any mistakes made must be reversible.
Overall, the app should create a positive feedback loop that motivates children to continue learning.
Storytelling is both
a great way to learn
and a great way to teach
Moodboard
A visual idea of the ecosystem where the user and the problem exist are given below. It represents the environment in which the user and the problem exist.
Wireframes
I created a set of low-fidelity wireframes that highlight the core hierarchy of animal lessons. Each animal selection features a sound option and the ability to add the animal to a favorite list. Brief overviews and prompts are included during lessons, and users can interact with animals using an inventory of items. Background changes help users navigate between categories and biomes.
In case an animal is added to my favorites, an icon is highlighted next to the animal in the catalog. The user can also easily navigate a category or biome, and the background changes are used to demarcate this interaction.
character design
I began with quick sketches of the animals that are to be showcased. These included explorations of character designs through simple shapes. I identified the key features of the animals to be shown to act as key identifiers.
Once a few features of the animals began to emerge, I further developed them through the lens of different emotions and carried out exploration to distill the characteristics.
These included explorations of character designs through simple shapes. I identified the key features of the animals to be shown to act as key identifiers. These include features of the face, fur, snout, and ears. My goal here was to achieve maximum differentiation through disambiguation.
Here are the faces of the animals explored. I drew inspiration from kawaii expressions to draw a minimal, flat set of animals with at least one key distinguishing feature for each animal. I conferred the color of the animal and also proceeded to define an accent and highlight each of the animal's faces.
Typography & UI components
After conducting user research, I found that applications targeted toward younger audiences need to have highly legible text on their interfaces. To achieve this, I slightly enlarged the text size on the screens.
I selected Rubik, a rounded sans serif font, as the single font for the interface. The font's rounded nature creates a friendly appeal for the demographic, and the large x-height ensures readability on all screen sizes. The bold typeface of Rubik adds an energetic character to the headings, while the medium typeface with slight positive kerning ensures easy readability for body text.
As a google font, with a small size, it is also faster and easier to deploy especially in react native app environments. This ensures that the text rendering is fast and crisp during the core interactions that are illustration heavy.
For the main call to action button, neomorphism was applied to create the notion of a pressable button. This appeals to the latent affordances of the child with his interaction with toys. This could further be developed by incorporating a pressed state, a sound on press, and text animation highlight.
Prototype & UI
The UI elements were combined with the wireframe to create the set of screens seen here. They were then set into a prototype according to the user flow mentioned before.
The screens for the task of selecting an animal from the catalog and viewing the lesson are as follows. The first screen shows the animals available in the Biome in 'The Woods'. Interactions were designed to express the action being performed.
The first screen depicts the selection screen and you can see 5 animals that were designed along with their respective palette. Each of these can be set to favorite.
Additionally, you can zoom in and see the screens including the background building, in detail here on the entire figma file.
always trust the process
This was the first project where I was able to define the end-to-end process in detail. Because I completed the entire exercise in 36 hours, it gave me a deeper understanding of what to prioritize. This enabled me to both define the scope and work toward its fulfillment.
Defining the process is only as strong as your commitment to stick to it. This case study helped me understand that it is important to follow through with the process to ensure end-to-end consistency. Often, following through process exposes certain issues with the flow that would have been easy to miss in a UI exercise.
Most importantly, this helped me ensure that my focus was on creating a solution that solves real human needs rather than creating a set of screens that just look good together.
