Accessibility Design

I led a team that created a morse code game for Ben, a 9 year old who loves trains, minions, and elephants. The game aims to teach the fundamentals of morse code in a fun way that is specifically tailored for Ben.
 

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

You can try the prototyped game here.  Turn on your sound on to hear the beginning and Ben’s mom narrate the personalized lessons!

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

Tools: HTML, CSS, Javascript, node server, Illustrator, and AfterEffects.

How It Works

The game allows Ben to unlock his favorite videos by pressing the correct morse code combinations. This encourages Ben to continue to isolate his finger on a screen, learn letter-based patterns, independently play games, and have fun.

Above, a video showing the main interaction.  Ben visits a Start page, from which he visits an Index page where he can choose a favorite video. A personalized lesson on a morse code letter follows, narrated by Ben’s mom. If Ben types the correct morse code letter, he can watch his favorite video. If he answers incorrectly, he is encouraged to give the correct answer.

Background

This project is created as part of the Morse Code Game Jam run by Google and Adaptive Design Association.

The goal of the game jam was to design games for five potential users of Morse code who are not able to enjoy games using standard controls. 

 

As a tool to reach this goal, Gboard’s Morse code keyboard allows users to customize the keyboard to their unique usage needs. For example, you can access predictive text and plug your phone into physical switches to choose which of morse code buttons to press with Android Accessibility features like Switch Access and Point Scan. Especially for people who are differently abled, typing with the Morse code keyboard can save time and energy.

We did not include the actual Gboard in the prototype in order to quickly control the size and shape of the buttons for Ben's physical needs and learning goals. He needed the buttons to be a little smaller and did not need the predictive text. With these changes we could guarantee a large video playback for Ben.

We plan to post the game on Google’s Experiments with Morse page, and prototype a second version with even more feedback from Ben and his family.

Creative Process

Stage 1 – Conceptual Package

  • Our team met Ben and his mom at Adaptive Design. From them we learned Ben’s interests and his learning goals. An Occupational Therapist helped ask important questions and context.

  • We synthesized the major goals stated by Team Ben. Recording these allowed us to reflect on them while we designed the game.

Stage 2 – Design Prototypes & Research

  • We whiteboarded general ideas as a team, while always making sure any direction still met the interests and needs of Ben.

  • Sought out advice from experts such as professors specializing in accessibility, interaction principles, and game design.

  • Made two rough prototypes of our main directions.
     

Stage 3 – User Testing & Production

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

  • Step by step, we built the game by pulling together a user flow, Javascript and HTML/CSS to enable interactions, individualized lessons, and beautiful and simple assets personalized for Ben.

Stage 4 – Fabrication

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. We also wanted to create something physical around the morse code buttons, so that he could quickly know where to touch.


The case has an elegant design made of one piece of cardboard which folds into a closed box or open stand.

Stage 5 – Next Steps: Open Sourcing the Project

We plan to open source the project on Google’s Experiments Page and create a second version based on even more feedback from Ben and his family.

  • Grey LinkedIn Icon
  • Grey Twitter Icon