ENERGY SKATE: A CASE STUDY
THE GOAL
Develop an original video game that teaches kinetic and potential energy to local 2nd-5th graders with a timeline of 3 months.
MY ROLE
Lead the UX and UI design and development of Energy Skate.
THE TEAM
I assembled our development team, "Team Nice," that consisted of 2 back-end programmers, 1 filmmaker, and myself.
THE CONTEXT
Professor Christopher Weaver, founder of Bethesda Softworks, teaches Video Game Development at Wesleyan University. After each student presented their high concept for a video game, 4 concepts were voted to be developed by the class. My concept was selected and I was given the role of leading a group of 4 students to develop a game demo with Unity by the end of the semester.
CHARACTER AND STORY DEVELOPMENT
Our game’s story, characters, and world was inspired by viral Youtube live stream video, “Lofi Hip Hop Radio - Beats to Relax/Study to,” in which a girl studies with her cat while listening to low-fidelity hip hop music.

We wondered: what if her cat ran away, and she had to skate from rooftop to rooftop, learning about kinetic and potential energy along the way, in order to reunite with her cat? Before developing our game, or even knowing how to develop our game, we conducted user research, read Earnest Adams’s “Fundamentals of Game Design” and Bob Bates’ “Game Design” textbooks, and created a GANTT chart to plan out our schedule of development.
FIELD RESEARCH
We conducted field research on our audience of local 3rd-5th graders to see what aspects of a game hold their attention. We entered 5 different classrooms, asked students about their favorite video games, and watched them play a few. While watching, we took notes on which parts of the games kids skipped and which parts were they most excited about. We also asked them what they do and don’t like in video games. Here’s what we concluded:
COMPETITIVE ANALYSIS
We assembled various popular games engaged with teaching kinetic/potential energy as a reference for designing and implementing our own game mechanics and UI.
PBS: WHoaHler Coaster!
Legends of Learning: Mr. Genius Kinetic Energy
Brainpop: Energy Skate Park
We noticed that many games teaching this concept relied on text-based learning and were not playable on mobile devices. The games that involved skating as the main gameplay demonstrated the process of potential and kinetic energy with movement more effectively. We saw a window of opportunity in using skateboarding to teach our concept, and felt that we could stand apart from our competitors by simplifying the UI, developing a more fun way for users to build their skate tracks, and by creating a unique character backstory and game world.
OUR CORE PILLARS OF DESIGN
From learning about our intended audience from our field research and analyzing the gameplay and design of similar games through our competitive analysis, we established several core pillars of design that we would prioritize in our development schedule.
CORE FUNCTIONALITY
We decided that our gameplay would include users building a skate track between two building roofs. Then, the user can test their track by having our game character skate across it. Users advance to the next level by safely navigating kinetic and potential energy and avoiding hazardous obstacles to arrive at the target building roof.
MOCK-UPS
To provide this gameplay, we implemented two modes: draw mode and skate mode. In draw mode, players draw a skate track connecting the two building tops and avoiding obstacles. In skate mode, players test their track. If the track is safe enough, the player has the option to proceed to the next level.
Our initial mockup of draw mode included a click and drag functionality where users would pick a track piece from an a kit of pre-drawn track pieces in order to design their own track. After revisiting our core pillars of design, we abandoned this version of draw mode because we found the mechanic of forcing the user to pick from a small selection of track pieces restricting, tedius, and generally, less fun.
Our next mockup of draw mode allowed users to build their track with draw, erase, and erase all functionality. We felt this was a less restricting, more modern, and more playful and fun game mechanic, and would work well for our goal of developing a game for the browser and for touch screens. We also realized that in order to support more levels, we’d want to be able to create a greater distance between the start and end building tops, so we included a scrollbar.
Our design of skate mode included dynamic potential and kinetic energy bars, a restart button that would place you back into draw mode for that level, and a zoomed in view of the player skating across the track. Once the player wins or loses, they are met with a pop-up UI panel with the corresponding win or lose condition, and they have the option to try again, quit, or proceed to the next level if they won.
FEEDBACK UI POP-UP SYSTEM
We utilized a system of responsive canvases to communicate our win and lose conditions to players.
This process included collaborating with the back-end programmers to enumerate and confine each win and lose condition, and then to map every condition to a brief explanatory pop-up canvas. In the design of these canvases, we used as many images and as few words as possbile to deliver the main message of why the player won or lost.
TUTORIAL LEVEL
To avoid a text-heavy tutorial level, we used interactive animations and instructional audio to create our tutorial level.
UI COMPONENTS
We wanted our UI to be intuitive, minimal, and to be easily distinguishable from the gameworld. We assigned color palletes to each aspect of our game. In this visual language, the UI was distinguished by its pink hues, the gameworld with darker muted hues, and gameplay objects, including the start and end platforms, pieces of the track, and the obstacles with yellow hues.
CHARACTER ANIMATION
One of my favorite parts of development was designing, animating, and programming the characters and obstacles.
I illustrated Energy Skate’s characters in Photoshop, and rigged and animated them in Unity.
Finally, the filmmaker on our team and I collaborated to animate an introductory video. We did this to to showcase our character’s story, motivation, and world to our audience without relying on text to tell this story.
RESULTS
We deployed two versions of our game to support cross-platform distribution, so that we could host our game on the browser and on mobile iOS devices.
60 local elementary school students played Energy Skate. Due to COVID, we had to cancel our original plan of having a class “carnival” in which students would be able to play our games and give us their feedback. Instead, we uploaded our games to itch.io for students to play, and requested that they fill out questionnaires regarding their experience with our final products.

When asked to rate how fun the game was from 1-5 where 1 = not fun, 3=fun, and 5 = lots of fun, 75% of students rated the game a 3 or above. Energy Skate was also used in a 4th grade STEM classroom to teach kinetic and potential energy. Students had the option to write what about the science they learned. Unfortunately, none of the teams in our class got much written feedback. The couple of students who wrote what they learned explained:
We had the opportunity to present our game to a panel of industry professionals and STEM professors. Wesleyan’s physics professor told our team that this was a simple, effective way to demonstrate the relationship between movement and kinetic and potential energy. We were happy to hear from other panel members that their kids had fun playing Energy Skate, they felt our UI was intuitive and stylistically cohesive, and that our gameplay was an effective way to teach a scientific process.
About a third of the way through development, Wesleyan canceled school due to COVID-19 and we all have to move out of our university housing and transition to online school. Overcoming this unexpected change and continuing with our development process was a challenge. It brought us all a lot of joy to know that actual young students had fun playing Energy Skate.