The Missing Colour — Designing UX for young kids
Using animation and voice feedback to interact with young children who cannot read.
BRIEF
This is an individual school design project in which I tried to solve a real-world problem for parents to teach young kids about colour mixing knowledge. The design uses different interactive principles to provide a simple, fun learning experience.
PROBLEM
Teaching 3–5 years old kids about colour mixing knowledge can be challenging. It is difficult for them to remember which two colours are needed to mix out the colour they want. The process of using clay to try it out can be frustrating since 80% of the time they will fail. Books may not attractive enough and parents don’t want to use pigments either since it is easy to get out of hand.
How to let children learn colour mixing easily and interestingly?
SOLUTION
I designed an iPad app that incorporated:
- Simple concept model — align with children’s cognitive psychology
- Gamification — encourage repeated learning
- Animation and voice feedback — provide interesting and smooth interaction
DESIGN PROCESS
IDEATION OF THE CONCEPT MODEL
Children need to explore and trial and error freely to learn by doing.
Through desktop research and field study (taking to parents and visiting kindergarten), I picked out the most workable idea that also fit the child’s cognitive psychology from many ideas. I decided the basic concept model to be “drag and mix two colours to mix out the new colour” which keep the physical mixing process as much as possible while allowing children to explore the operation.
DESIGN THE GAME MODEL
Make kids love to learn.
Inspired by kids’ English learning apps, I added game mechanisms where the concept of a rainbow with missing colours was created. The action of mixing colours becomes a task motivated by a clear goal — — filling the missing colour for the rainbow. During the tests, many kids played the game several times until they become familiar with it and feel a lack of challenges. By then the purpose of playing the app has also been achieved.
HOW IT WORKS
Follow intuitive thinking.
The game’s playing flow is divided into 3 main steps based on the questions generated intuitively in users’ mind while playing.
- What is it?
In the beginning, the animation and voice help children build up a mapping between the missing colour and the dashed box to understand the task. Progressive disclosure of only one colour at a time reduce confusion and make it easy to follow.
2. How to operate?
Coming to the task page, multiple interaction principles and visual guidance are used to guide kids taking a drag and mix action subconsciously.
3. Do I succeed?
Different ways of feedback are designed to tell kids whether they succeed or failed to mix the colour required.
Feedback of the successful mixing. An animation showing the newly mixed colour fills the dashed box and then fills the empty area in the rainbow.
Feedback of the failed mixing. A shaking animation of the dashed box makes kids realise there is something wrong and reminds them to rethink about the answer.
TEST AND ITERATION
I did 2 rounds of guerrilla usability testing with 14 participants including both kids and parents.
Usability testing played an important role during the project since the target users are 3–5 years old kids who can not read and has a different way to understand the world with adults. During the testing, I also realised that parents and siblings are important factors of the scenarios where young children use digital products and should be considered in the design. Thus they should not be deliberately excluded during the test as young kids are always using digital products either others’ company in real life. Many design ideas were iterated through usability testing.
What I learned from the project
I found that designing a digital product for young kids can be quite different with products that targeted adults from some perspectives. Common interactive signifiers like a Continue button may not work for young kids since it is a learned knowledge. In contrast, the principle of visibility, mapping, feedback and consistency in designing interactive experience still works well but need to pay attention to the way of presenting. Animation can be a powerful tool to provide fun and easy understanding of the product.
Check here to experience the complete prototyping of the product.
*Background vector of the app home page is from freepik — www.freepik.com
