Fire Boy & Water Girl Re-design
Timeline: 2 weeks, September - October 2025. notes: Team work / UX.UI / HCI / Game Design / Illustration. Tools: Figma.
Team: Tristan Yeung, David Lam, Kylie Wawryk, Qorianka Huarcaya.
The Fire Boy and Lava Girl grayscale redesign was created for the 201 Human-Computer Interaction and Cognition Broker 1 project.
This project analyzes how gray-scale impacts user performance, identifying key issues in the game environment, and explore potential outcomes of these visual changes.
Solutions were developed to improve navigation and usability while accounting for practical prototype limitations.
1. Re-design of environment for usability regardless of disability (colour blindness).
2. Target focus among children with colour blindness to prevent exclusion.
3. Allow users to be able to participate in game play without modifying settings.
4. Ideation of visual cues and elements.
5. Prototype sketches and possible outcomes for proposed design
6. Focus on Characters, Obstacles and Rewards.
Pain Points
-
Unfriendly for visually impaired players.
-
Ineffective visual cues for elements.
-
May cause isolation among children that are unable to play this game.
SEPARATE
AVATAR DESIGN
worked on ideation and illustration
-
Dark and light halo added on avatar shade to guide users without altering original colours.
-
Heavy saturation and contrast for visibility in grey-scale.
-
Keeps game core avatars consistent with no heavy alteration from original version of game.
GENERAL
POISON OBSTACLE
worked on ideation
-
Shape difference used to show users difference in avatar specific obstacles and general obstacles.
-
Focuses on user's combination of learned experience and evolutionary predisposition. Spiky triangles (signals pain and danger) are used in replacement of solely having green colour show as poison and avatar death upon touching it.
AVATAR
SPECIFIC OBSTACLES
worked on ideation and illustration
-
Gestalt similarity principles for specific obstacle looks.
-
Shape differences to show users difference in water and fire without needing colours.
-
Altering water as rounded half circles (like bubbles) and bending arcs (like flames). Focuses on user's combination of learned experience and evolutionary predisposition.
AVATAR
SPECIFIC REWARDS
worked on ideation
-
Avatar specific rewards indicated in accordance to avatar elements (fire ball or water bubble).
-
Shape difference as focus rather than original diamond gemstone for both avatars.
-
Using saturation, highlights, and contrast to show difference in avatar rewards.
Proposed Improvements:
-
Utilizing more gestalt principles for overall game elements and icons.
-
When users hover over obstacles, characters, rewards, small written cues are written on the side.
-
Extend beyond just simple element re-design and include user testing to improve other obstacle functions and game-play experience, such as switches, walls, ice rinks.