Designing to introduce kindergarteners to reading and writing
By: Lola Salehu
Tags: Edtech, User Experience, Product Design, Kids, UI

Product Overview

KiddyLearn is an Edtech company working on a product to introduce Kindergarteners to reading and writing.

My goal was to work with the Product Management team to create a web and mobile app for users. The mobile product will be used by the learners aged 3–5 and will be the core application. While parents will use the web product to monitor their children’s performance.

The challenge with regards to reading

Most of us learn how to read around 5 to 6 years old because that is when our brain is most receptive to knowledge. Children don’t have the same awareness of time, so learning to read can feel very time-consuming to a kid.

A child doesn’t see the result of what he or she has learned immediately; therefore, although kids are learning to read around the age of six, they actually become true readers around nine or ten years old. Additionally, many have yet to grasp the understanding of the purpose of reading, which might create a lack of drive for them.

Therefore, to solve for the challenge, my goals were to give the users the ability to:

Keep kids engaged on the platform long enough to get better at learning (for example, 20 minutes per week for 1–2 years).

Because if they remain interested, then they use the app more. And if they use the app, they continue developing their fluid intelligence, making them better at learning things faster, and as a result, become better readers. Make the educational app into a tool that helps parents and teachers motivate children to learn.

“So, what’s the most ideal approach to teaching kindergarteners to read?”

Starting with the Basics

Understanding how kids learn

To kick-off, I started out doing a bunch of desk research; reading articles, and watching videos to get a better sense of how kids between the ages of 3–5 came to learn anything at all.

The major aim of this was to gain some insights that would answer these questions:

What cognitive biases and mental models do I need to take into consideration in the design?

What affects how kids use the web?

What constraints and metrics do I need to design for?

How do kids, parents and others interact with existing solutions in the market?

Identified User Needs

Finding new patterns

Synthesizing the data from the research enabled me to identify the following user behaviour patterns:

Children Aged 3–5:

Have less developed motor skills.

Need immediate visual / audio feedback.

Like to explore, hence they might typically open the app to have fun and be entertained, without knowing exactly where they want to go.

They don’t “watch” content — they play with it.

Have different types of attention spans, ranging from almost non-existent, to unyielding determination to make something interesting happen.

Are used to interfaces that have a lot of graphics and large navigation buttons and little written content.

Comparing existing solutions

Exploring alternatives

Subsequently, I carried out a competitive analysis of other existing educational learning solutions to see how other people had been able to approach the same problems, and what they have accomplished with similar ideas.

Trying out firsthand experiences with some of these applications enabled me to note down the things they had done right and connected with my current understanding of why they had done it, or how they had gone about it.

Defining Success Metrics

Formulating Design Principles

A few of D4CR’s key principles on designing for Kids

Before I could go into designing, it was essential to define the metrics of success for the product.

Hence, I aligned my objectives with the key principles found on https://childrensdesignguide.org/ as a way to ensure that I was integrating children’s rights and ethics into the heart of the design process.

Key Decisions Made

Affordances and Interactions

Dashboard/home screen of mobile application

First, it’s no secret that kids love colour. Kids expect their apps to be bright and engaging. For this reason, I paid particular attention to providing affordances on the system, by designing interactive elements with clear characteristics to indicate they are tappable.

For example, buttons have a simple white outline or drop shadow; interactive background items wiggle, sparkle, or draw the user’s attention somehow.

Feedback, Context, and Sounds

Voiceover lesson of the vowels in the word Alligator

Remember kids needs for immediate visual/audio feedback? Kids want feedback whenever anything happens. I factored this in my design by implementing feedback in the form of pages changing, highlighting the words as the user reads, items moving, and voiceover sounds being synchronised with the content on the screen in real-time.

whenever anything happens. I factored this in my design by implementing feedback in the form of pages changing, highlighting the words as the user reads, items moving, and voiceover sounds being synchronised with the content on the screen in real-time. Considering this is also an educational app and kids need to learn from their successes or failures, I also provided contextual feedback and displayed hints showing users how to succeed.

Menus and Icons

Main resources menu on the mobile application

With menus and throughout the entire mobile app, I relied less on words as kids may not be able to read complex words and many associate reading with school work (aka not fun). So I focused on incorporating simple icons throughout the app as a good safeguard.

as kids may not be able to read complex words and many associate reading with school work (aka not fun). So I focused on incorporating simple icons throughout the app as a good safeguard. The entire bottom part of the screen is regarded as a hot area because kids constantly touch that part of the screen by accident. As such, I especially avoided placing controls there.

I also made the call to actions (CTA) the most compelling and physically largest buttons to help ensure kids don’t get confused.

Visual Elements

Branding — Logo and visual elements for the Kiddylearn mobile application

It’s also no secret that cartoons are pretty much universally appealing to children. I took advantage of this by incorporating a character/mascot into the design and branding, as this would help to strengthen children’s connection to the product.

Context-of-Use

Tracing exercise for writing on mobile application

I considered context with respect to sound. Sound is a fun way to give feedback and provide instruction, but the kids won’t always be in a quiet environment. I ensured the app should be just as usable when the child is using the app in a noisy classroom or a noisy airport — or their parents just want some peace and quiet.

Gamification and Playfulness

Sub-menu resources navigation drawer with elements of gamification

More than anything, kids like playing games. They turn pretty much everything into games and competitions. I designed for this by making use of quizzes, reward systems and other game features to move kids forward through to the information being communicated to them.

Parents’ Section

I considered what role the adults would play in the app with the aid of these questions:

Would they be equal play partners, playing alongside children?

Would they be assisting or supervising play?

Can they troubleshoot when something goes wrong?

Are they better off as a separate type of user to consider altogether? For example, parents may need to log in to a separate section of the app to check each child’s progress.

Classes Overview

The classes overview section gives the parents access to all information concerning the classes being taken by their kids, as well as pointers to onboard them onto the system.

Lessons Section

Lessons section on the parents’ dashboard

The lessons section allows the parents to see a breakdown of the learning curriculum and the activities the kids have been engaged with. This makes it convenient for them to track their child’s progress.

Individual Child-Viewing mode

Parents dashboard viewing lesson progress in expanded mode

The individual child viewing mode further breaks down the learning curve to show specific information about the child’s performance. This helps the parents know what progress metrics to look out for over a period of time.

You may view the live prototype here:

Learnings and Key Takeaways

When designing for kids, we’re also designing for their parents or guardians. Adults tend to facilitate their children’s development, and in most cases they are the gatekeepers of the technology that delivers their digital experiences, especially seeing as younger children borrow their parents’ devices.

Parents want to be involved, from seeing how their children have been progressing through the app, to reading stories and ‘co-playing’ together on whatever device it’s being used on.

Open-ended activities and games like drawing, storytelling, and colouring encourage creativity and self-expression, and colourful main characters will help guide children through the learning experience and keep them engaged on their educational journey.

Children have to see their progress and they have to understand why they are learning how to read. This is why the use of game design is encouraged, to reinforce progress like gauges, maps, stories for rewards etc. So that children can understand what the bigger goals are in learning how to read.

What’s Next?

I look forward to implementing and testing this design, as with any project, testing is essential. But especially with kids, because I can’t expect them to follow instructions, so this would be quite an interesting learning curve. As well as the perfect opportunity to validate the usability of the design.