These drawings represent the design progession of a game that the Human-Computer Interaction Lab's Intergeneration Design Team, Kidsteam, created in response to the challenge of helping children be more environmentally friendly at home, school, or while visiting the White House. The game is called Energy House and has been well received by those who have played it. A video of the gameplay can be found at http://youtu.be/DCmFeNawUS4 . Although the game is fun, I am more fond of the design process we followed than what was generated.

Kidsteam is based on the idea that children should be partners in the design of new technologies for children (Druin). In order to do this, we use various techniques to co-design these new technologies. Energy House was designed through a technique we call Layered Elaboration (Walsh et al.). I really like layered elaboration because it enables designers to build on other designers’ ideas through the use of transparent overlays or old-fashioned overhead transparencies. In short, here's how it works: one designer (or team) creates a design on paper, then a transparent overlay is applied and the design is given to another team that adds to the first design on the transparent overlay. This overlay process can be repeated to accommodate multiple teams. 

We used this technique with three Kidsteam groups. I’ve attached the progression of designs that the group made for helping children be more green at school. The first drawing shows the school that contains a robot and books about being more environmentally friendly (Figure 1). The next image shows litter with an X over it indicating that it is bad and, in the lower left corner, it has a green playground that generates electricity (Figure 2). The final group added a tree that displays how green you are acting—the more green you are, the more alive the tree is, but, if you act unfriendly towards the environment, the tree begins to lose leaves and withers (Figure 3).

Figure 1: Kidsteam game design session using Layered Elaboration (Layer 1 in the progression)

Figure 2: Layer 2 in the design progression. In the lower left corner is a green playground that generates electricity.

Figure 3: Layer 3 in the design progression, which introduces the tree feedback idea: the more environmentally green you are, the more alive the tree is.

That part of the story can be read in extreme detail in the previously mentioned paper on Layered Elaboration (see the "Works Cited" section). The part that I’m excited to talk about is the next steps towards the final prototype.

The kids' idea of generating your own electricity through play was really cool. Based on discussions with the other adult Kidsteam members, I looked into attaching devices that generate electricity to things like a pogo stick. Fortunately, I have no archivable materials showing me on a pogo stick. I quickly realized that the technology would need to be screen-based in order to realize the designs of the group. At this point, I shelved the idea of generating electricity.

Figure 4: Prototype based on Kidsteam game design session, using the tree feedback concept proposed in Layer 3

My next prototype was to be a game that utilized the tree feedback idea (Figure 4). The game would allow players to build a house and the tree would let them know if they were being green or not. I only ended up making the screenshot above because I suddenly looked up from my desk and saw a USB dance pad in my home office. Our family had ordered it as a free promotion from a food company that wanted to encourage kids to move as part of the game. When we received it in the mail, we found out the online games it was designed for only worked with PCs and we had Macs. From then on, it really didn’t get used.

While looking at it, I thought it would be cool to jump up and down on the mat to generate electricity as part of a video game. I started drawing in Flash, and switching from a school motif to a house, drew up a one-bedroom house with some energy draining objects (Figure 5). I made a rough prototype that was really just a drawing with an energy bar. When you pressed keys on the keyboard, the energy bar filled and then slowly drained and a window popped up letting you know what keys were pressed.

Figure 5: Game prototype showing a house with energy-draining appliances, such as a lamp and plasma TV.  An energy bar is pictured in the top right corner.

At this point, I connected the USB dance mat to the computer and used USB Overdrive as a middle-ware connector to map jumps on the mat to keys on the keyboard. It was straightforward to make energy bars for several different things in the house and have them work independently (Figure 6). The final image shows the screen I worked in most of the time—using code to tweak the settings for each of the objects as well as the overall rate at which the energy builds up from jumping (Figure 7). I had begun to add other factors like outside temperature, air-conditioning, and a refrigerator but had to cut those in order to have it ready for the next Kidsteam design session.

Figure 6: Screenshot showing process of creating separate energy bars for each appliance in the house. In the finished game, players touch an object on the screen to "electrify" it, then jump up and down on the dance mat to energize it.  The lamp illuminates when it has energy, the music player plays a song, and the television plays a short cartoon. 

Figure 7: screenshot showing source code for Energy House

I used Creative Commons-licensed and public domain media for the in-game television and music player. After it was over, the kids didn’t like the video I had originally chosen to play on the TV. I found a long, public domain Bugs Bunny cartoon and used that as the video instead. The next time (and subsequent times) we played it, it was a huge success and generated a lot of great ideas and designs for the next version of the game.

Works Cited

Druin, A. “Cooperative Inquiry: Developing New Technologies for Children with Children.” CHI  ’99: Proceedings of the SIGCHI Conference on Human Factors in Computing Systems. New York: ACM, 1999. 592–599. Print.

Walsh, Greg et al. “Layered Elaboration: A New Technique for Co-design with Children.” Proceedings of the 28th International Conference on Human Factors in Computing Systems. New York: ACM, 2010. 1237–1240.