WIREFRAMES | 2D ART & ICONOGRAPHY | UI/UX | INTERACTION DESIGN | GAME DESIGN | USER TESTING & RESEARCH
'Collisions' is a series of interconnected chemistry games designed to bring game-based learning experiences into high school chemistry classes and assist teachers with their curriculum.
Collisions features eight games: Atoms, Ions, Covalent Bonding, Ionic Bonding, Acids & Bases, Intermolecular Forces, Phase Change and Equilibrium. Every game features a set of challenge levels as well as a sandbox for open exploration.
Target Audience: High school and middle school students
Platform: Web, iOS, Android
I was the sole Visual Designer and worked cross-functionally with a chemistry pedagogy team, developers, and the Creative Director throughout this years-long project.
As this was an existing app with 3 game modules already being used in schools, there wasn't too much room for major structural change, however, the team wanted to make the app much more engaging, visually appealing, and intuitive, both from a UX and learning perspective. We also wanted to implement new modules that touched on more complex chemistry concepts.
My job was to simplify the process as much as possible, make it more intuitive for the users, as well as improve the visual appeal of the entire app as we created and released new content.
My initial step was to analyze the current user flow and overall appeal of the app and conduct user interviews and student playtests to gather information on pain points and frustrations. I looked at the current way the app was structured to make sure there weren't any problems with the flow.
My Role
UX Research & Analysis
Wireframe & Prototyping
Visual & Interaction Design
Testing & Iterating
Cross-functional Collaboration
User Personas
Two main user personas were developed to discover pain points:
Age: 46
Marital Status: Married
Education: Bachelor of Science (BS) in Adolescence Education: Chemistry
Location: New York, NY
Emma
Highschool Chemistry Teacher
Goals/Needs
Would love to add supplemental learning materials for classes.
Wants to switch to more digital applications with an interest in using games as a method for education.
Would like students to have a way to learn at home aside from doing traditional homework assignments.
Wants learning to feel more rewarding and fun.
Frustration:
Has trouble managing multiple classes and tracking student progress.
Students are uninterested and are having trouble visualizing chemistry concepts.
Would love to take the guesswork out of lesson plans.
Feelings:
Age: 15
Grade: 10th
Education: Public Highschool
Location: Bronx, NY
Darryl
Highschool Student
Goals/Needs
Would love to add supplemental learning materials for classes.
Wants to switch to more digital applications with an interest in using games as a method for education.
Would like students to have a way to learn at home aside from doing traditional homework assignments.
Wants learning to feel more rewarding and fun.
Frustration:
Has trouble managing multiple classes and tracking student progress.
Students are uninterested and are having trouble visualizing chemistry concepts.
Would love to take the guesswork out of lesson plans.
Feelings:
Original Game Flow
Users had difficulty understanding and remembering game mechanics since they varied depending on the module.
Defining the Problem
01
Through brainstorming sessions, in-school playtesting, and teacher interviews the team uncovered these pain points felt by individuals. It was revealed that:
Users were not feeling rewarded for completing challenges.
02
03
04
Users had no tutorial or help system that they could refer to if they were stuck.
Users were not understanding the connection between the modules within a chemistry context.
The Solution
The Design Process
The 'Collisions' team used a 5-stage Design Thinking model proposed by the Hasso Plattner Institute of Design at Stanford (the "d. school"). The stages of this process are as follows:
Shown below are low-fidelity wireframes, high-fidelity versions of those designs, and animations for interactivity.
Updated flow after defining the solutions:
Original Main Menu & Module Menu Design
Alternative Main Menu Wireframes
Updated Main Menu & Module Menu Wireframes:
New icons & colors to visually represent each game module:
Re-Designed High Fidelity Menus
Revised main menu interaction created for a smoother and more engaging transition.
Re-design of game module and challenge level states
Adding clear indications of progress and completion helped make the games feel more rewarding.
The Sandbox would be unlocked upon completion of the tutorial levels and would always be available for open exploration or custom lessons.
New Tutorial & Help System
In the situation that a user places their tablet down for a time during gameplay, timed hints automatically pop up to remind the user of the game mechanics and what they need to do to progress. Iconography and mechanic directions were created for both web & mobile devices.
Tutorial levels are clearly marked on the module level menu.
Guided tutorials were created to explain game mechanics and interactions for each module.
The help menu reminds users of the level objective and game mechanics while allowing users to view web and mobile interaction animations.
Acids & Bases
The Acids & Bases game demonstrates how acids are proton donors and bases are proton acceptors. Players explore this by removing a proton from an acid and attaching it to a base while creating a neutralization reaction.
The user can pull a proton off an acid and donate it to a base. The strength at which the player needs to pull, depends on the strength of the acid.
Initial Sketches, Explorations & Wireframes
High Fidelity Designs
Intermolecular Forces
In Intermolecular Forces, players use single atoms to build molecules of target polarities and create intermolecular forces between them. The user can attach an atom to change the polarity of a molecule and compare the strengths of different types of intermolecular forces.
High Fidelity Designs
Phase Change
Phase Change requires players to match the sequence of phases (solid, liquid or gas) in each target by adding or removing energy to affect particle motion and intermolecular forces. The player breaks or forms intermolecular forces by adding or removing energy in order to change the states of matter.
The heating interaction adds energy and the cooling interaction removes energy. The player can break the intermolecular forces that are holding the molecules together in order to change their phase.
Wireframes
High Fidelity Designs
Interconnectivity
One element of chemistry that is difficult for students to understand is how interconnected these concepts are. With feedback from teachers, we wanted to provide more difficult challenge levels that explored this. Once users had completed a challenge, whether that was building atoms or creating molecules, they could use pipes that connected to a previous or future game module and use what they created to complete new challenges.
Teacher Web Portal Re-Design
During my time working on Collisions, I was also leading the effort in updating the teacher portal and providing ideas for Google Classroom integration.
User Flow
Teacher Portal Dashboard
Conference Video
I created our 'Collisions' conference/expo video which shows gameplay from all of the game modules! Here you can view gameplay from all of the 'Collisions' game modules.
The best designs come from collaboration. It was inspiring to see how each person on a small team was able to contribute different perspectives during the multitude of brainstorming sessions we had over the years long course of this project.
Key Takeaways
01
Design thinking is key to effective products. I have used Design Thinking on many projects as it inspires meaningful and impactful solutions.
02
04
Avoid bias. All people have biases and it's easy to think of solutions beforehand only taking away information that confirms your initial beliefs. This will never solve the users' true pain points. Our team got around this by simply observing users playing 'Collisions' and only asking questions if issues occurred. Multiple user tests provided our team with insights that were not apparent to us beforehand and that is what we based our solutions on.
03
Experiment early. As we progressed through 'Collisions' it became increasingly more difficult to make changes as is the case for most game and app projects. I have learned how crucial it is to experiment early on in the sketching and brainstorming phase of development which will save a lot of time down the road.