The correct order discrimination of consecutive sounds can influence cognitive performance and it can be altered in conditions like dyslexia, shizophrenia, sleep deprivation. However, we know very little about temporal cognition and we need a lot of data that is hard to gather only in laboratories.
A mobile game would allow the participants to have fun while doing the task and to gather more data from multiple users online (strictly for scientific purposes).
The app’s idea was from my colleague, Júlia Simon. She was responsible for the game mechanics and for the coding as well.
My role: brainstorming, wireframing, prototyping, UI design.
Tools used:
There are no digital options for this kind of test therefore we had to invent our own app from scratch. The main idea was that the user have to save a balloon from falling. Sound samples are heard and the user have to decide if they hear the sound from left to right, or from right to left. If the user taps correctly three times in a row, the balloon will go/lift up. If the user taps wrong, the balloon falls down. We wanted a plain, minimal screen design but with a colorful game background. After the play, the user have to answer some questions about his/her experience.
Wireframes present the set of monochrome screens to think over the layout and transitions before considering the appearance style. Here you some of the screens for the game.
The first screen (left to right) features sign in layout, as users have to sign up to play the game. The second screen features the game menu with instructions, play, achievements and about section. Hitting the instruction button, users get the idea about the game mechanics. Hitting play features the play screen with a kindly reminder to the instructions and how to calibrate the sound level for the game. The user have to tap the ’L’ or ’R’ buttons corresponding the played sound propagation to make the balloon remain in the air. Questions about user experience added in separate screens.
White color was used mainly with the combination of magenta, green, orange and blue. Questions are easily readable with this white color palette. I also added the white and grey version of the playscreen’s background to make the design more consistent. I made also a balloonlike typelogo to make the app more gamelike. Lato typefont was used. Badges were also created for the achievement section to make the game more playful/motivating.
After hitting the ok button the pre-game screen begins. We introduced this screen to familiarize the user with the task environment. During the play, the bottom part of the play screen provides information about how many lives left.