Physical computing to teach STEM to kids

Adopted NGSS Standard

5-PS1-3: Make observations and measurements to identify materials based on their properties.


This project won the award for Best Student-Teacher Alignment during a showcase at Microsoft in Redmond, Washington.

Team & Role

• Timeline and duration: January 2019 - March 2019 (10 weeks)
• I worked with Jennifer Wang and Tiffanie Horne while being advised by Jon Froehlich, Michael Smith, and Adi Azulay.
• I contributed as a Developer, Physical Computing Prototyper, Graphic Designer, Character Artist, and Animator.

Beyond Black Boxes

At the heart of Microsoft's Hacking Stem is the inspiring work done Mitchel Resnick and Robbie Berg. Their work shows how students, by building their own scientific instruments, can pursue a broader range of scientific investigations of their own choosing, feel a stronger sense of personal investment in their scientific investigations, and develop deeper critical capacities in evaluating scientific measurements and knowledge.

Microsoft Hacking STEM tries to bridge the gap between hands-on learning and digital technology with full and ready-to-teach lesson plans.

We decided to design a holistic experience for students to learn the concept of Thermal Energy Conductivity. This was done via initial discussions with advisors, teachers, and review of NGSS study guides.

Interviews with STEM teachers

We sat down with a few STEM teachers in the Seattle area to understand their teaching process. While interviewing, we also tested an extremely rough prototype with them by adopting the Wizard of Oz method.

A simple cardboard box, which was faked to be a thermometer, was connected to a computer which worked as the interface for the collected data. The cardboard box had an Arduino circuit inside along with a pushbutton which controlled a LED. The button was added to test the behavioral aspect of our final envisioned device. The temperature probe, which stuck out of the box, gave the participants the impression of an actual working thermometer.

We spent less than 15 mins building this setup.

We learned that teachers often spend a lot of focus on instigating a discourse amongst students while keeping them engaged in the activity. Also, scientific accuracy wasn't that big a priority for kids of that age. Hene, we focused on ensuring conceptual understanding while promoting thinking and dialogue amongst students.

“Our objective is to carry out experiment as scientist, to engage in the process as it goes along … we want to recognize patterns and look at the results … it’s about dialogue and discourse of the process"
STEM teacher, Middle school Science using NGSS standards.

“Umm, I was wondering what to do in the one minute. How can this be made more engaging? Always think of ways to keep their [students] energy and spirits high."
STEM teacher who teaches middle school students in mathematics.

Building a storyline

To keep the students interested in this scientific investigation, we created a storyline of a superhero duo. Different iterations were tested with kids which helped us build an exciting storyline.

I illustrated these initial superhero concepts.

One of the testing sessions with kids.

In our final iteration, we came up with Equinox and Suri, twins who have the power to store an infinite amount of thermal energy. They needed help from the kids to find the material with the highest thermal conductivity for their special glove.

Meet Equinox and Suri. Illustrations made by me.

Developing the physical interface

The thermometer was created using Arduino Uno and DS-182B0 waterproof temperature sensors. The kids, apart from building the Arduino circuit, would build a small paper-case for their thermometer.

We also designed a high-fidelity prototype with an LCD screen for the demonstration at Microsoft's office.

Diagram for the Arduino circuit.

Jennifer created a 3-D printed case for the thermometer which also holds the LCD screen.

I developed this Mario-inspired loader animation for the thermometer. The LCD isn't soldered to the breadboard yet. I created a very hacky solution using copper wires to test the desirability of the concept.

You can find the Arduino code for the high and low fidelity circuits from the link below. We also created a comprehensive guide for the students to create this setup while guiding them through the steps. Read more about it in the study guide.

The set of things needed by students to create a complete experimental setup.

Developing and designing the investigating interface

An investigation is the dominant activity of the scientific investigation interface. The interface emphasizes conducting the experiment and making sense of data. It provides rigorous yet engaging guidance by using comic-book inspired characters that lead your students through developing and evaluating explanations.

Suri and Equinox assist your students in each stage of the scientific investigation.

I used P5.js, developed by Lauren McCarthy, along with pure JS to build the interface. A Serial controller was used to send data from Arduino to processing. I also a helper parser to send float data through the serial controller. The Serial Communicator only sends Byte values, hence I wrote this simple fix to read float values.

Story and user flow

We use the characters of Equinox and Suri to build a story which runs through the entire application. Students play the role of scientists who help the duo-superheroes to find the best material for their glove.

At the same time, we cautiously design the guiding steps and provide contextual feedback which helps the students to easily navigate the investigation.

Our usability testing sessions showed that students do not really desire a highly polished interface. An interface with kiddish, non-sensical animations truly proves to have more affordance.

A screen capture of the investigating interface. A few steps have been manipulated to create a shorter video.

I developed animations like the typewriter effect and the bounce effect of islands using CSS and JS. These little animations helped in keeping the kids engaged.

I used HTML5 Session Storage to store the readings for plotting graphs together. This helped the students to easily infer the differences in readings for the various spoons.

Handling errors by asking for the hypothesis

Throughout the application, there were many instances where we gracefully handled any possible errors so that the students understood the scientific concept. Rather than us fixing these known issues, we asked students for the reasons to do such a step (unboxing the Black Box) which they wrote down in their companion Lab Notes.

The thermometer needs to come back to room temperature before a new spoon's temperature could be measured. We ask the students to give a reason for doing this.

Iterating on the visualization

One of the feedback from the STEM teachers was to somehow showcase the idea that the thermal energy transfer is the movement of molecules. Hence, I played around with various visualizations to demonstrate that concept. However, during our usability sessions and feedback session with teachers and advisors, we realized that kids need not to depend on the digital interface to understand the concept. It was too overwhelming for the students and hence, we removed that aspect from the interface.

An earlier concept using Perlin Wave noise used to replicate the "molecular" movement which leads to thermal transfer. Items with higher conductivity have "molecules" moving faster while being more random in direction.

You can get the code for the complete project from my Github repository. More steps on setting up the interface are mentioned in the study guide.