• Son Luu

Save the Twins - Interactive Game Design

Updated: Oct 2, 2019




Midterm project was also my first interactive system that involved physical controls. And, what would be more fun to stay true to the inspiration of Halloween season 🎃? Indeed, Halloween was the theme for everyone's midterm projects, and I couldn't wait to check out everyone's work inspired by one of the most favorite seasons of the year.


For my first physical computing project, Nancy - a smart and funny classmate, was my project partner. I really enjoyed our collaboration.


My role:

  • Research

  • Ideation

  • Sketching

  • Designing interaction

  • Trouble-shooting coding problems

  • Prototyping

  • User-testing

  • Fabricating final experience

  • Project management



Project Statement


Project goals:

  • Create a device or experience for a Halloween party

  • On a technical level, system should include digital input and output, analog input and output, serial communication, and good physical interaction design principles.

  • On a conceptual level, the project should help people to enjoy a Halloween party, with just enough surprises to make it fun, with no chance for injury or psychic trauma.

  • Consider the  behavior of the things that the user will see, hear, or feel, and choose sensors that create that kind of behavior



Design Process:


Brainstorming/Finding inspirations


1. A device or an experience? We decided to go with an interactive game

2. Infrared (IR) break beam sensor: Nancy proposed the use of break beam sensor - a simple way to detect motion, and one that neither of us has used in the past so that we can learn a new electronic component.

3. Interaction: we wanted to research on interactive games that involve human motions that trigger responses from a computer, is easy to understand, creates both visual & sound effects.



---> Halloween inspiration: from researching for supporting materials, I found these packs of tiny rubber hands. They look funny and we both wanted to create a fun experience with them. In addition, the idea of a game that involves saving children from a dangerous situation or an evil character seem to be able to address all the requirements of the project from a concept perspective.

---> Escape themed game concept: player will be asked to make a guess on the correct pair of hands with a matching pair of codes, by scanning one primary hand against one of the given hands in the game (inspired by a futuristic si-fi concept of chips planted inside human bodies). As the right match is found, the "code" will then unlock the haunted house to free the children.

---> Matching a pair of hands will be enabled by the mechanism of two break beam sensors (embedded inside these hands). They will be sending and receiving infrared light beams as they are placed facing each other. If one sensor (inside a hand) accepts the beam sent from another sensor (inside another hand), it will form a correct match, which will trigger the winning scenario of the game.



Building overall experience


Overall experience design

Choosing visual graphic design


  • Visual design approach was committed to Halloween theme; however, we made sure the design would not cause traumatic experience or overly sudden reactions. At the end of the day, the goal is to create a fun experience where people can enjoy and have a good time during Halloween while playing an interactive game.

  • Color theme was darker, and consisted of colors of fall such as orange, shades of brown.

An image of happy, cheerful twin girls is used for the ending scene as they are freed from the haunted house.

  • The opening image of the twins was more doll-like. The idea was that they were trapped in bodies of dolls in an abandoned haunted house. Once they are freed, a happy image of actual human twins would show.







An image of the twin girls trapped in dolls, locked in a haunted house, opening the game's first scene


Prototyping



*Testing technical components:


  • Testing break beam sensors

  • Testing button clicking

  • Testing visual rendering on p5 js from Arduino micro-controller






*Building physical prototype

  • Prototyping with wood and paper cardboard

  • Building a platform that would allow laptop screen to sit in the back to support as backdrop graphic, and an enclosure to hide all electric wires


  • Cutting through these tiny rubber hands to fit break beam sensors inside

  • Testing sensors again to ensure their functionality even after being tightly fit inside


  • In addition, we spent a large amount of time on researching more on Halloween themed images, visual and sound effects

  • Work by music author Scott Holmes ended up being our useful resources for the game's soundtrack.



Further Design Exploration with User Test


User Test


📝Findings from user test:

  • Users loved the visual design and interaction with physical components

  • Strong interest in implementation of break beam sensors

  • Game instructions were too lengthy

  • Questions raised were quite unexpected because they were so basic: "how do I start the game?" "when do I click this button?" "where is the most effective place where I should place the hand?" This is not a good thing! Before we jumped into anything more complex components, we needed to figure out how to resolve some of these fundamental problems of a typical game.

  • Users loved interacting with the tiny rubber hands. They were "creepy"✋🏼✋🏼, which fits the halloween theme, yet were funny to interact with




Implementation and final product

🎈Improvements from user test:

  • Completely transformed visual design to reflect Halloween theme (with more detailed hand-painted designs, and added appropriate lighting for mood creation.

  • Shortened game instructions to eliminate redundant information, only included crucial details, resulting in more straightforward and simple navigation for users

  • For any key components that require physical interaction, we provided sufficient, easy to see and understand, instructions so users can navigate the game themselves. For example, actionable instruction is given: "click the green button to start playing" while such green button is placed right in front of the user.

  • Reduced the number of sensors to 4 instead of 8 (effective cost reduction)

  • Eliminated count-down clock to simplify game rules without sacrificing an interesting experience by adding beautiful images and graphic design on screen

  • Added soundtracks to create moods for different scenes: opening, winning scene, and losing scene.


💁🏻‍♂️Challenges / What can be better?


  • More interesting and engaging details: The final product was simple and straightforward, but it did seem that because of such simplicity, it lacked more potentially interesting details, and excitement building elements. For example, if we had more time to be more creative and explore additional technical capabilities, we could potentially create a multi-round scenario game where there may be more obstacles that need to be solved by similar guessing game mechanism, or creating increased intensity by adding more options from which users could choose the right combination of code or adding a count-down clock.

  • Duration: Due to similar reasons as above, the game duration is very short. It was almost too quick to end. The players all seemed to have expected more from first round of playing, which is very understandable. What we did was allowing players to keep playing the game by re-starting it and keeping making new guesses of the right match of hands. Still, the game can be improved by giving it more interesting elements and details to engage the players for longer duration.



Technology:

p5 js application, break beam sensors, Arduino micro-controller, Adobe Audition, Adobe Illustrator



Final design:





I designed all physical components, including embedding sensors inside the rubber hands, constructing wood platform to fit computer screen (for backdrop), lighting and visual effects to create Halloween atmosphere for the game set.




As shown in above image, behind the wood platform, we were able to hide all electrical components such as all electric wires and micro-controller, leaving a clean look from the front.


Reflections

Key take-aways:


  1. Ideation: 🤝Nancy and I worked well during ideating because we had patience and we listened to each other's ideas. We spent many hours trying to come up with an idea which both were happy with. There were compromises made, which allowed us to explore creative alternatives which worked for both of our inspirations.

  2. Design process: Both of us complimented each other's strengths. Nancy was quick with technical elements while I was quick with fabrication and prototyping. We divided tasks according to what we feel comfortable with, but at the same time, we learned from and help each other in our process. I was able to help Nancy trouble-shoot some coding issues, and Nancy was able to help me with minor fabrication tasks as well. I learned that an interactive experience doesn't have to be complex, or it doesn't need to include too many components to give users an interesting experience. The key is to figure out how much is enough to make the interaction effective, inspiring thoughts and feel it is intended to give users. We scaled the project back on a few aspects including scope and the number of physical control components, yet still managed to achieve all of project goals as intended.

  3. Design exploration: the user test we conducted for this project was a great example of the need to answer questions as basic as "why is the button here and not there?" or "how do I start the game?". We were expecting more complex questions, but soon realized that we needed to figure out the basic interactions first before any ambitious add-ons.

  4. Communication and project management: I was comfortable being the member to keep us on track with project timeline and tasks to be completed. The most important thing in a group project is to maintain open and frequent communication, making sure we both were informed of challenges and how we could help each other resolve them. There were times we could not meet up to work on the project together, but we made sure to inform each other on our individual progress and whether we needed any help from the other person.

Overall, it was a fun team project, and we achieved a functioning, beautifully executed project. People were impressed with the visual effects, and enjoyed playing the game. There was no question on navigating the game from all end-users. The most fun activity was when we all shared and showcased our projects among peers from the other classes. I can't remember the last time we had that much fun and laughter during a midterm submission day out of all my college years 🎃.