Buolor

Learning to identify colors is a foundational education for young children and should be interactive and fun.


I was inspired by the frustrations I observed my toddler experiencing while looking at photos on Google Images. He was identifying the objects in the photos, but when he wanted to change the color of the objects he was looking at, they did not change color. I believe this service could offer a fun and friendly educational experience for young users who are learning to identify objects and colors.

Background

Hypothesis

A tool for young children to focus on color identification by changing the color of the object itself instead of changing the object will aid the child to focus on color education.

Why?

Young children learn best through hands-on experimentation with objects, but often color education is presented through changing to different objects, which can pull attention away from color education and towards object identification.

Research

In addition to multiple observations of my toddler's personal frustrations trying to change the colors of static images online, I conducted market research via the Google Play Store to experience educational apps targeted at young children who are learning colors, so I could get hands-on exposure to the options available.

In analyzing the apps, I realized there were specific pain points to avoid in my own design.

Pain Points

Pay wall
Many apps make limited features available to entice users to download the product, but have the majority of features behind a paywall. Children’s apps are not innocent to this methodology. That being said, most parents choose not to spend money to unlock the full features of these apps since they may only be used for a short time. This leads to frustrations for the young child, as they do not understand what it means to ‘pay’ for something and simply view the objective they are trying to reach as broken. Often this leads to discontinued usage of the app by the child as this leads to loss of interest in the product.

Games are short
Many of the educational options to teach young children colors I experienced were short games. While the games met the objective to teach colors, the product falls short on holding a young child’s interest. Young children have short attention spans and need many options provided to give them change in stimulation. Otherwise they will grow bored and drop off the product.

Key Research Insights

Details To Consider In My Design…

Engaging sounds and animation
Young children have a short-term interest in things around them. To ensure the child is engaged and retaining information, clear audio that speaks out the word plainly is best for young children to understand. In addition, fun graphics are going to hold a young child's attention better than a color swatch will.

Bright colors
Since young children are at the beginning stages of development, bright simple colors that have high contrast entice them and hold their attention. When a young child is learning colors, it is best to present them with a bright shade of a color so they can learn to recognize the hue.

Horizontal orientation
Many products targeted to adults have vertical orientation as there is a need to have access to more information with scrolling gestures. However, apps targeted to young children need larger graphics, which is hard to accomplish in vertical orientation. Developing children apps in horizontal orientation not only allows for more screen real estate for design, it also considers the limited functions their small hands have, giving children a better experience navigating through apps.

Larger buttons for small hands
Young children have underdeveloped hands and struggle with smaller tap targets that need point-accurate motor skills. Larger tap areas not only allow young children to have access to digital tools, but also provides an experience that matches their developing abilities.

Looping
Young children do not understand the meaning of 'ending'. When a sequence ends, young children may become upset because they feel like the experience they were enjoying was taken from them. An interactive experience that is setup to loop as long as the child wishes to continue engaging with it, with a backout button for them to choose when the experience ends, will be a more valuable learning experience for the child.

Design

Sketches

My goal was to create a simple layout for young users who have lower-developed mobility in their hands and a relatively low understanding of technology. I wanted my young users to have fun with the app while learning colors.

After I collected my notes, I began brainstorming possible layouts for the main screen.

These initial ideas turned from sketches…

Into wireframes…

Low-Fidelity Usability Test

1 participant, age 2, male, is in the target age range of the app.
Method: Moderated

Tasks
Navigate through the list of character placeholders on the main screen.
Select a character placeholder and trigger color change.

Key Outcomes

The user was able to accomplish all tasks.
★ The user was drawn to the placeholder mascot character and was able to trigger the interactivity of the character.
★ The user responded well to the audio element triggered when the colors are tapped.
★ The user defaulted to the horizontal setup, but became confused as to why the character list did not scroll horizontally.

The Designs

I wanted to make the overall design colorful, stylized, and not gender-conforming.

Character Designs

For the character designs, I found inspiration in a combination of stickers and rubber bath toys. I wanted the characters to be presented in a fun way for young users and I believe this satisfied that stylization target.

Mascot Character Design

Mascot characters are the face of a product and the hook for young children to continue to return to any product. I wanted the mascot character to be a fun interactive element adding to the experience of the app. I defaulted to a bright yellow rabbit as the color is bold and the character is simple.

With the understanding that young users are often not yet familiar with standard UI icons, which adults would know from years of experience with mobile apps, the mascot character was designed to also function as the back button. Young users may not recognize an arrow or X icon as ‘back,’ but easily will pick up that if you click the rabbit’s head you will navigate back to the page with the rabbit.

Background Designs

I wanted the backgrounds to be simple and ground the characters with the settings. I wanted the backgrounds to be reusable for similar characters, such as the pig and the cow.

Voice Over

When young children are learning, it is not only important for a visual cue to be present but an audio cue also, to help establish association. Because of this it was important for the app to include audio triggered by touch that describes the objects and the colors the young user is interacting with.
Several takes of each sound was recorded and the clearest pronunciation of each word was selected and used in the prototype.

**Prototype is best viewed on a mobile phone with auto-rotate setting turned off

High-Fidelity Usability Test

1 participant, age 2, male, is in the target age range of the app.
Method: Moderated

Tasks
Navigate through the list of characters on the main screen.
Select a character and trigger color change.

Key Outcomes

★ The user was able to accomplish all tasks.
★ The user was drawn to the mascot character and was able to trigger the interactivity of the character. However, the user felt the character was sad.
★ The user responded well to the audio element triggered when the colors and characters are tapped.
★ The user expressed there were not enough character and color options.
★ The user tried to trigger animation from the Buolor logo and displayed disappointment that this element was static.

Conclusion and Key Learnings

Buolor promotes color learning through positive experience. The app provides a simple and fun environment to teach young children colors without the negative experience a fixed ending provides to children who do not yet understand the concept.

Consider your target audience in the design.

Since the app is meant for young children who are not fully developed, there was a requirement to make the app accessible to those with under-developed hands. This involved consideration that larger tap targets are needed for young users to be able to navigate through the app as intended. As well, young children are not literate nor are they familiar with standard icons used in mobile app development that an adult would recognize with ease. On the surface this seems limiting, however it provides an opportunity to be more creative in the visuals to empower young children to easily understand the functions of the app.

In the future I would expand on the features and design of this app by:

Refine the interactivity of the app.
I believe the product's design would be stronger if all of the characters had an extra level of interactivity beyond the audio playing when tapped. I think subtle animations would add value to the characters and make the experience overall more engaging to young users.

Add more characters to interact with.
For the first round design I kept the character count small, however I believe a fleshed out product would have many more objects covering many categories of things a young child comes across in their day-to-day life. I believe variety would not only work in favor of holding the child's attention, but also add to the educational value of the app.

Refine the animation
The mascot character's movement is currently accomplished through components with auto animate. I think it served well for the first test of the product design. However, I believe improvements can be made to make the character more purposeful to the overall experience. I would refine the character further to have several animation states that play at random as the young user taps.

Further, I believe animations should be incorporated throughout the rest of the app's design. When the screen changes the elements could have a slight whipping animation added to give the appearance that the screen is pulling into frame. I think all characters should have animation incorporated to play when tapped, accompanying the audio tracks that play.

For more work inquiries, or to grab a coffee, please email me at mel@melleedunn.com

Thank you so much for reading!

Back to the top!

Get in touch!