Case Study
Designing Gizmos, Science and Math Interactive Teaching Tools
At ExploreLearning I designed over 35 science and math Gizmos, interactive we-based teaching tools. Below is a summary of the design process I used to create the Embryo Development Gizmo.
Choosing a topic for an interactive:
When I joined ExploreLearning there were already over 350 Gizmos in existence. Gizmos are aligned to the NGSS standards and other state education standards.
My first step when designing a new Biology Gizmo was to determine where there were standards coverage gaps in our library and design interactives to fill those gaps.
The Embryo Development Gizmo was designed to cover or partially cover several standards: MS-LS4-3, MS-LS4-2,HS-LS1-4 .
Pedagogic content research:
My background is in biology and I was trained to understand embryo development, so I was already familiar with the topic. But in addition, I reviewed educational textbooks and online resources to refresh my knowledge.
Gizmo design:
I decided based on the standards and contents we wanted to include that students should visually compare embryos from different organisms at different time points during development. To do this, I laid out a grid showing the embryos of five different organisms so they could all be easily compared. At the bottom left of the Gizmo, there is a slides that allows the student to step through different stages of development.
To make the exercise a bit more fun, I didn’t label the different organisms. Instead, I let students guess themselves by dragging a name card from the left to each of the organisms.
I regularly incorporated feedback from my manager to perfect the content.
Letting students experiment:
In the second half of the Gizmo, we wanted students to learn how cell division and differentiation produce an organism. Students are often shown videos of blastocyst development. But I wanted the student’s experience to be more interactive.
From my training in biology, I knew that scientists had done experiments where they label a cell with a dye and follow the dye during organism development. By doing that, scientists were able to determine the fate of different cells during development.
In my Gizmo, I wanted the students to act like those scientists. At different time points during development, students can drag a syringe with dye to different parts of the embryo. They are then able to follow the labeled cells as the embryo develops. At the end, they would see (a simplified version of) which cells contributed to the fully grown gorilla.
This empowers students to do their own experiments and be their own scientists.
Gizmo graphics and animation mockups:
For all the Gizmos I designed, I created the Gizmo graphics in Illustrator, Photoshop, or Maya and mocked up the animation and interaction examples in Adobe Animate.
The programmers I worked with were able to export animations directly from Adobe Animate to use in the Gizmos.
Working with programmers to convert graphics files to functional interactives:
I supervised a group of programmers to convert my designs into functional Gizmos. I wrote detailed spec documents to describe how the Gizmo should function to a group of programmers. I would then work together with the programmers to alpha and beta test the Gizmos, providing them with feedback until the Gizmo functioned the way we wanted.
If you would like to see the Gizmo in action you can click on the video here or test it out for yourself on ExploreLearning’s website.
