WonderJack
Job Description
Responsible for UI/UX designs and animations for an interactive iOS game app for children, especially dyslexic ones, that encourages them to improve their visual spatial skills, sequential thinking, and executive functions.
Timeline
Sep. 2022 - Dec. 2022
Category
UX Design, Product Development
Role
UI/UX Designer, Researcher, Animator
Tools
Adobe Photoshop, Adobe After Effects, Figma, Miro
Background
What is WonderJack?
WonderJack is a multi sensory iOS game app aiming to improve executive function and sequential thinking of children aged 3-9 through a visual spatial learning style. It was developed by 3 iOS developers, 3 UI/UX designers, and a project manager using Machine Learning and Vision tech to facilitate an immersive playing and learning experience using interactive real-life objects, during 4 months.
It was one of the selected apps of Cohort 2022 to win the Spotlight App Award, and one of the apps selected to receive further development courtesy of Apple Catalyst Program. Furthermore, WonderJack has also been featured on a detik.com article and a CNA938 Radio interview online.
Background
What's the problem?
WonderJack originated from the Macro Challenge at Apple Developer Academy@UC, which serves as a final project for mentees prior to graduation. Unlike previous challenges with predefined themes, the Macro Challenge allows mentees the freedom to develop any app they desire.
Mary and her family
My team initially had difficulties deciding which problem we wanted to tackle as the 7 of us each had their own visions: apps that involve health, traveling, culture, education among others. However in the end we decided to focus on education, specifically visual spatial education as suggested by our project manager Mary. We figured this would be the best since Mary has an interest in education and she is the wife and mother to a dyslexic husband and dyslexic daughter.
So, our first challenge statement was "Help people improve their visual spatial skills".
To flesh out the challenge statement more, we came up and researched guiding questions about visual spatial intelligence (VSI), some of which are:
What is VSI and who
needs it the most?
The signs of having good or bad VSI?
How to improve VSI
and why we need it?
The difficulties in
improving VSI
Why is VSI still often
ignored by many?
Any existing solutions we can improve?
We also found out about Gardner's Theory of Multiple Intelligence, a test with results that highlighted VSI as the most dominant aspect in dyslexic people. VSI involves perceiving, analyzing, and understanding visual information, as well as assessing distances between objects. This intelligence plays a crucial role in various tasks, from everyday activities like tying shoes to reading maps.
For dyslexic individuals who often rely on visual representations, VSI is even more essential. As they exhibit right-hemisphere brain dominance and excel in global VSI, we recognized the opportunity to help dyslexics, particularly children, develop coping strategies through VSI, as it can be learned.
Thus, our challenge statement turned into "Help dyslexic children improve their Visual Spatial Intelligence". It became urgent for us to do extensive research on dyslexia.
After finishing our research, here's what we could summarize. Dyslexia, a learning difficulty that causes problems with reading, writing and spelling, is estimated to be in one of 10 kid and 40-60% are hereditary. It isn’t an illness, but rather a different way of receiving and processing information, which leans to a more visual approach.
However, dyslexic children often suffer the consequences of bullying in school, and parents' or teachers' disdain due to lack of awareness. Yet dyslexia cannot be cured, only managed. Which is why early intervention at the range of 3-8 years old is essential to prevent its snowball effect.
This is Jen, an 8 year old primary schooler. Jen's mother often notices her daughter acting gloomy after school is over, even trying to skip classes. Jen's homeroom teacher told her that Jen can't keep up with lessons and doesn't really interact with her peers.
When confronted, Jen admitted to her mom that she felt ashamed and different from her friends. Trying to read is hard for her as the words seem like they're flying away. Jen was taken to a psychologist and diagnosed with dyslexia which saddens her mother. But she wants to support her child however she can. She also notices that Jen learns better with pictures rather than words.
GOALS
Make her mother and teacher proud, learn how to read and write like her friends.
PAIN POINTS
Has difficulty reading and concentrating, limited attention span, not confident, different learning style
OTHER INFO
Likes looking at pictures and visuals, likes playing than learning.
We also created a user persona canvas to better visualize the user's biography, lifestyle, needs and wants, pain points, and other necessary information.
To sum it up,we can help educate VSI through engaging activities such as video games. For dyslexic children under 10 years old, game-based training is often effective as fun activities could boost brain activity and enhance learning and memory.
So, the goal is...
To create an interactive game app and help children with dyslexia in the primary school age to better learn and improve their visual spatial intelligence.
Workflow
Solution Concepts
With a clear goal in mind, we set out to brainstorm further and solidify the solutions into three major solutions that we could weigh the pros and cons of.
SOLUTION 1
Map-led Expedition
Using Apple Watch's compass or Airtag, children would need to look for items tagged by parents and scan them using their devices. Items could appear as characters on the screen and interact with players.
SOLUTION 2
Dyslexic Osmo
Inspired by the app Osmo, but for dyslexic children. Games will be developed and catered to the needs of dyslexics, and they can play using a mirror reflector and a drawing board.
SOLUTION 3
Real-life Objects
A game that could be played with real life objects scanned on the screen to pass a stage or a level. Like the equivalent of stamping on a piece of paper. Items are unique and can be easily identified.
After careful consideration, we chose to create a game that's a combination of Solution 2 and 3, where children can play using real life objects accompanied by a camera reflector that could help the camera scan items placed on a flat surface. Before WonderJack, this game was first called "Spaxia". We changed it later to prevent the game from sounding too on the nose.
WonderJack follows the adventure of an alien duck named Jack who gets lost on Earth because of his clumsiness. Jack is meant to embody dyslexic children so they can relate to him. We wanted to have a space theme for this game and the logo reflects that.
Workflow
User Flow
After picking which solution to develop further, the next step is to map out a simple user flow chart. At this point, we have elaborated more on the concept and figured out that we are going to have features such as several games in one app, a challenge mode for more practice, and a parents' report feature so parents could observe their child's game activity.
Workflow
Design System
As I mentioned, because the theme of the app is about space, we decided that the color palette would consist of contrasting navy blues and yellows. Ultimately we settled on these main colors. We want the colors to have nice contrast to ensure better legibility for dyslexic players.
As for the typeface, we also take into account that reading is not a dyslexic's strong suite. Thus we hope to smoothen the experience by using big font sizes and variations of a dyslexic friendly font: Open Dyslexic.
The buttons were designed to look uniform and polished so children can intuitively know which visual elements are press-able or not.
The same goes for the information assets' interface. Visuals like title boxes, mission boxes, instruction boxes were designed consistently similar to each other.
The task of designing the WonderJack logo was handed to me. Same as the Spaxia logo, I designed the logo to look attractive and added some shine to the words and also stars to incorporate the space theme.
This is the WonderJack app icon. It has Jack peeking out from the corner, floating in the middle of space.
Solution
Physical Kit
We developed a number of items to include in our WonderJack product to facilitate our multi sensory and hands-on puzzle games: Maze, Sorting, Pattern, and Tangram. These games were designed to cater to the dyslexic children to improve executive functions and sequential thinking.
Direction Cards for playing the Maze game, fitted with QR codes for easy scanning and playing.
Color Cards for playing Maze, Sorting, and Pattern games, also fitted with QR codes for easy scanning and playing.
Tangram pieces for playing Tangram game, 7 interactive colorful pieces to build various shapes and objects.
Exclusive mirror reflector that can be fitted over an iPad's camera to detect objects placed atop a clear surface.
A 3D-printed acrylic iPad stand to hold an iPad upright to ensure the contents of the play area can be detected properly.
Solution
Design Results
These are high fidelity screens of WonderJack produced in Figma together with 2 other designers. We wanted to keep the UI/UX experience simple, intuitive, and engaging for little children. As assistant UI/UX designer, I just helped the lead with asset creation and alternative UI/UX designs. I'm also the animator, tasked with creating animations, bringing life to the characters, and video editing for promotional material.
Story Mode for a story-based progression, and Challenge Mode for practicing with higher difficulties and additional levels.
Animated and voiced characters, story cutscenes, and voice instructions help children learn in an immersive environment.
Maze Game, to improve sequential thinking and working memory by leading Jack to objects and coloring them.
Pattern Game, which trains problem solving and organization skills by placing objects according to a set placement.
Sorting Game, which improves task initiation and organization skills by sorting objects based on instructions.
Tangram Game, which enhances planning, goal setting, and sustained attention span by arranging tangram pieces to form shapes.
Parents’ Report, available for parents to observe their children’s playtime, learning goals, and suggested activities.
Solution
App Animations
These are some animations I've done for WonderJack to enhance immersion and playing enjoyment for little children. The animations were animated using Adobe After Effects.
Afterwords
Current Progress & Improvements
After getting chosen as a Spotlight App during Cohort 2022's Graduation Ceremony and receiving media coverage, WonderJack had also gotten the opportunity to further advance our product through the startup incubator Apple Catalyst Program, which started on March 2023 and still ongoing at the time of writing.
We've had plenty of time to refine and improve WonderJack since our graduation from the Academy, and now WonderJack is available to purchase on marketplaces like Tokopedia and Shopee, as well as downloadable on the App Store for iOS 15.0 or newer and iPad 2021 or newer.
With updated reflector and iPad stand, redesigned cards and tangram pieces, as well as additions like a gameplay manual and free playing mat, WonderJack is here to be a great playing and learning friend for kids!
Thanks for reading!
My other project's page in Apple Developer Academy is still under construction, so click here to go back to the main page to see other projects.
Let's collaborate together.