Mini-game Design
Chloroquest is a web-based educational 2D platformer mini-game designed to teach high school students the photosynthesis equation.
My Role
UX/UI Designer
Duration
8 weeks
Tools
Figma (wireframe, grey boxing), Unity (grey boxing, programming)
Learning Goals
When asked the reactants in a photosynthesis reaction, the player will be able to answer 6 CO2 and 6 H2O.
When asked the product of photosynthesis, the player will be able to answer glucose.
Players will develop some familiarity with plant biology terms like chlorophyll and photosynthesis, which will be explored in more depth in higher levels.
Overview
Many people won't stop and take the time to read the instructions, especially when playing a new game.
Prior to noticing this problem, I was on a small game development team working on a didactic interactive application called Fractur/ed. It was designed as a study tool to teach health professional students about the various types of bone fractures found in the human body through the use of interactive 3D models and allowing them to develop a deeper spatial understanding of the fractures. When we brought the application to user test - many users became frustrated, stating the interaction mechanic wasn't intuitive and difficult to figure out. The instructions were written out on-screen and placed to the side of the 3D models, however, it was small and had no visual cues for users to notice immediately, if at all.
During gameplay, players need to be able to visually see the number of items (molecules) they collect, while having the choice to hold or drop them freely.
Creating a Level 0 allows for an interactive integration of instruction into gameplay.
Due to my own observations from the Fractur/ed project and knowing our audience were high school students, I wanted to create a way for the instructions of the game to be engaging and more easily digestible. To help students achieve the learning goals for the game, I decided to create a Level 0. Level 0 will allow for an interactive integration of instruction into gameplay.
Design
Design Wireframes
The following screens depict wireframes of the UI elements and design for the entire minigame - from the start screen to Level 0 tutorial ending with Level 1 gameplay.
Level 0 Wireframe
The following screens depict Level 0, where the instructions are on-screen and players can move the character freely. Level 0 does not offer a "skip" option for players.
Gameplay UI
Originally, the game was designed to include an instruction manual in the bottom-left corner of the screen and an inventory system in the bottom-right. The intention was for players to collect items (molecules) within the world and store them in their backpack for later use.
However, due to time constraints and technical limitations, the UI underwent a rework. The inventory system was simplified and relocated to the upper-left corner of the screen to reduce visual clutter and avoid obstructing the player's view.
Results
End Result
A side-by-side comparison of some low-fidelity wireframes and final product.
Takeaways
Programming
This project has been a rewarding exploration of how design can transcend disciplines. It also helped me deepen my familiarity with game design, Unity, and C# programming.
Design Process
I truly believe that interaction design thrives in a team setting, and this mini-game was a great example of that. Through an iterative design process and constant creative problem-solving, we were able to overcome challenges and achieve our learning goals together.
Problem Solving
Throughout the project, I encountered several instances where my original UI and UX gameplay designs didn’t fully translate during development. It became a valuable challenge in adapting and redesigning core elements to align with technical constraints, while still preserving the player experience. This process strengthened my ability to collaborate across disciplines and design with implementation in mind.