Morse Code and Accessible Game Design

I led a team that conducted design research to identify Ben’s needs for a game to learn morse code, while meeting his other learning goals and interests.

Ben was our 9 year old child expert at the Morse Code Game Jam in New York City.  

 

After conducting research, we built Ben's game online in the web browser so that it's easy for him to access from his family's iPad. You can try the game yourself here. Be sure to turn on your sound! You’ll hear a “choo chooo” after you press Start, and Ben’s mom as she narrates the game for him. 
 

We also built an elegant iPad case made of one piece of cardboard which folds into a closed box or open stand. You can learn how to create the iPad enclosure yourself at Sandy Hsieh’s blog.
 

My talented teammates were Sandy Hsieh, Hau Yuan, Keerthana Pareddy, and Mithru Vigneshwara. We represented NYU’s ITP graduate program.

Ben's game on his family iPad's browser, enclosed in a case designed to help him tap each button. The game's home screen shows a train with four train cars. Each lead to a personalized morse code lesson for Ben.

Team Ben: Ben and his family with classmates from ITP.

Role: Leadership, ideation, concept development, user testing, coding
 

Tools: Game made with HTML, CSS, Javascript, node server, Illustrator, and AfterEffects; enclosure made with laser cutter and cardboard
 

Project: Part of Google’s Morse Code Game Jam hosted by Adaptive Design Association

Timeline: 2.5 days

How It Works

Ben playing the game with his dad's help.

We designed the game so that Ben could work on his goals in the context of his genetic condition called Phelan-McDermid Syndrome. Ben’s goals were to:
 

  • Try a new communication method: morse code

  • Learn how to isolate his finger

  • Strengthen his muscle tone 

  • … Watch his favorite videos : ) 
     

A short clip of the game's user flow: Start Page, Home Page, Lesson Page, and Video Page

By playing the game, Ben can watch his favorite videos while becoming familiar with morse code. We knew that favorite videos were a huge motivator for Ben. We designed the game to unlock a favorite video of Ben’s after he enters the correct morse code pattern for a letter of the alphabet. 
 

We also wanted to hold up the iPad for Ben, so that he could focus on pressing the surface itself. In response, we built an iPad stand that highlights the location of the morse code buttons.
 

The game can be expanded to multiple game levels using all alphabet letters and tailored to a specific child’s favorite videos.

My Role

I decided to put together a team of my classmates from NYU’s ITP masters program to participate in the Morse Code Game Jam. I led us through the major stages of the game jam to be sure we met Ben’s needs, including heading up user research.

What Problem Did We Want to Solve?

We went into the Game Jam wanting to do two things. As the top priority, we wanted to satisfy Ben’s needs, and if possible, work within the creative constraints of the game jam. 

 

The game jam's constraints were easy to identify. They were hoping we might use Hello Morse, the Android Google keyboard that can be used with physical buttons for people who have dexterity impairments that prevent them from using computer screens.

 

Ben's needs took more time to identify and describe. While conducting user research and user testing, we learned that:

 

  • Ben didn’t need separate physical buttons. One of his goals was to learn to isolate his finger on his family’s iPad so that he could be more independent.
     

  • At the same time, he needed large iPad screen buttons in order to successfully tap them.
     

Unfortunately, the Hello Morse keyboard at the time didn't have keyboard button size settings. 

As a solution, we hard coded our own keyboard with buttons large enough for Ben.

 

In the end we meet Ben’s needs while demonstrating to Google a possible new feature: adjustable sizing for their Hello Morse keyboard buttons.

Paper prototypes of the user flow to gather feedback from Ben, his family, occupational therapists, and Google developers.

Creative Process

Stage 1 – Research
 

  • Our team met Ben and his mom at Adaptive Design. I led Stakeholder Interviews with the two of them to learn about Ben’s interests and his learning goals. An Occupational Therapist served as a Subject Matter Expert by helping answer important questions and providing context.
       

  • I synthesized the major goals stated by Team Ben. Recording these goals allowed us to reflect on them while we designed the game. Whenever we disagreed, we could return to the goals to find clarify and shared purpose.
     

  • We researched the functionality of the Hello Morse Android Google keyboard.

    Ultimately we learned that the keyboard did not allow increasing the size of the keyboard buttons, so we hard coded our own version just for Ben and to demonstrate the functionality as a product feature for Google to consider.
     

Stage 2 – Synthesis
 

  • I ran sessions to whiteboard general ideas as a team, while always making sure any direction still met the interests and needs of Ben.
       

  • We sought out advice from additional Subject Matter Experts such as NYU ITP professors specializing in accessibility, interaction design principles, and game design.
       

  • We made two rough prototypes of our main directions. We showed these to Ben and his family, and went with the strongest option.
      

Stage 3 – Design
 

  • Step by step, we coded the final game design ourselves. We built our game’s user flow with Javascript and embedded video frames to enable Ben’s interactions online in the browser on any device, and especially his family's iPad.
     

  • Teammate Hau made four beautiful individualized lessons for the letters T, E, A and M. The letters were specially chosen by Ben’s parents to match a few of Ben’s favorite things: trains, elephants, aliens and minions.
     

  • Meanwhile, Sandy prototyped and finalized an iPad case for Ben. The goal was to hold up the iPad for Ben, so that he could focus on pressing the surface itself.
     

Stage 4 – Testing
 

  • I ran a robust user testing plan with the Occupational Therapist to get feedback on learning and game principles, and then again with Ben and his parents to hear any thoughts on improvements.
     

  • Sandy showed the iPad case to Ben and his family to get feedback that gave us insights into how exactly to prop the case up and the size of the keyboard openings for Ben’s finger.
     

Stage 5 – Handoff
 

  • In just 2 days, Ben had a game designed just for him! 

 

  • By the end, he was using the game to unlock his favorite videos and showing great delight each time. 

 

  • Most important of all, Ben went on to play the game online at home. Here is a video of him playing it at the dining room table!

Ben playing his game with family at home.

What’s Next?

  • The game can be expanded to multiple game levels using all alphabet letters and tailored to a specific child’s favorite videos.
     

  • The game is still online and working. You can play it here.
     

  • If you're interested in using this game or working on the next version, my contact info is on my About page.