Collisions

'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

UI/UX Design • Wireframes • 2D Art & Animation • Game Design • Interaction Design • Iconography • User Testing

2D Art & Animation

User Testing

Iconography

Game Design

UI/UX Design

I was the sole Visual Designer on this project and worked cross-functionally with a chemistry pedagogy team, developers and the Creative Director throughout the course of the 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 it much more engaging, visually appealing and intuitive, both from a UX and learning perspective.

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 modules.

My first step was to analyze the flow and overall aesthetic appeal of the app as well as create the visual UI/UX design for the new modules. I looked at the current way the app was structured to make sure there weren't any problems with the flow.

My Role

Original Flow

Users were not understanding the connection between the modules within a chemistry context.

Defining the Problem

01

Through brainstorming sessions, in-school playtesting, teacher interviews and student testing, the team uncovered these pain points felt by individuals. It was revealed that:

Users had difficulty understanding and remembering game mechanics since they varied depending on the module.

02

03

04

Users had no tutorial or help system that they could refer to if they were stuck.

Users were not feeling rewarded for completing challenges.

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

New icons & colors to visually represent each game module

Updated Main Menu & Module Menu Wireframes

Original Main Menu & Module Menu Design

Re-Designed High Fidelity Menus

Revised main menu interaction created for a smoother and engaging transition

Re-designed 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

Tutorial levels are clearly marked on the module level menu.

The help menu reminds users of the level objective and game mechanics and lets the users 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 & Low Fidelity 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.

Initial Sketches & Low Fidelity Wireframes

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

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.

Honors & Awards for 'Collisions'

--- MORE PROJECTS ---