iGain - Educational app for persons with special needs
Through my 3 months internship with Trampolene, I created the UI UX for the education app for persons with special needs.
​
Separated into 2 types, iGain 1 focuses on academic skills in a classroom setting while iGain 2 focuses on life & cognitive skills through exploration. Besides that, I got to design more informative and engaging signages to place around the office to aid the other interns who had special needs too.
​
I had the opportunity to work along side with story boarders, animators and developer into creating the application.

GRID MAZE - GUIDANCE AND MOTIVATION FOR NAVIGATION
This was the first module I designed. Users navigate an astronaut through a grid maze using direction pads. As difficulty increases, so do the number of squares. Meteorites block the path, while stars guide and motivate users to reach the flag in minimal steps. Each completed level advances the user to a new planet. Direction pads were repositioned for optimal grip and ease of use around the screen.

MAIN MENU
The game menu was redesigned with careful consideration of whether to pair icons with words or include words alone. Various shapes, colors, sizes, and layouts were tested to define the hierarchy and functional connections.

TUTORIALS
One has to understand how a game works before playing. With walkthroughs/tutorials, it shows how to interact with the game so that the user will not get lost and play as intended. Tutorials help in recapping information that has been previously taught.

FEEDBACK
When the user interacts with the game, they need feedback to understand if it's wrong or correct. Through these few modules, I understood the priority of visual feedbacks like movement and colour changes compared to audio feedback.

DIALOGUE BOXES
Progress rings and time count down were considered in giving users time to process their actions and can make decisions with restarting or returning to main page. However, with developers' feedback on its constant disruptiveness and time consumption of 5 seconds, it was narrowed to a simple "try again" or "good job" bar that disappears quickly. This still gets the feedback across with appropriate time duration

GAME INTERACTION
Our target users for the game; persons with special needs, had difficulty with mobility, making them unable to perform actions like swiping. We considered simpler ways of engaging with the application and action words to guide users during game play.

STORYBOARDING
This module was designed to teach users price comparison, using item purchases as motivation. Planning objectives and game mechanics before implementation ensures adherence to guidelines and user needs.
​
Modules in the application are interlinked and structured so that users must grasp basic concepts to unlock advanced modules. User testing provides continuous feedback, enabling improvements and ensuring effective learning outcomes.

Graphics
Here are some illustrations I did for one of the modules.

iGain Demo video
I have also put together, made the background music and narrated the demo video of iGain utilizing Adobe Premiere Pro and Adobe XD's animation features.
​
Click to watch video >