Interactive Exhibit

Mussel Hatchery Interactives

The Mussel Hatchery hopes to change freshwater mussels’ endangered status by breeding mussels and educating the public on how these creatures can improve the health of drinking water. We created three digital interactives to provide an engaging and educational way to explore the mussel and the other inhabitants of the Delaware River.

About the Project

The Fairmount Water Works is one of Philadelphia’s landmark historical and educational institutions. We worked with them previously to create a Digital Activity Guide to educate students on clean water stewardship and relationship between Philadelphians and their watershed. For this project Fairmount Water Works collaborated with the Delaware Estuary and Academy of Natural Science at Drexel University to develop a living science laboratory about the freshwater mussel. We worked with Habithèque Inc., cultural producers with expertise in content development, exhibition design, and creative visioning and direction.

This new exhibit space provides visitors with an introduction to the mussel and its ecological impact on local waterways, with a live mussel hatchery, art installations, interactive art and science exploration stations, and digital interactive components.

User Testing

Midway through the process we conducted user testing on-site with middle school students from Fairmount Water Works’ Project Flow initiative, a summer program for the interdisciplinary exploration of water. Each student was given a designated amount of time to explore each interactive and then everyone came together for a group discussion. We learned that users were inclined to hurriedly tap on various places on the interactive screens, so we added in animated bubbles and zoom effects on tap so that the interactive responded to user inclinations. We also learned that users expected to be able to tap text to get more information, so we added additional content such as definitions when a keyword was tapped.

The Mighty Mussel Interactive

We used javascript, CSS animations, and Adobe Animate to create three digital pieces:

The Mighty Mussel interactive features animations on a 32 inch touchscreen that teach the lifecycle and filtration systems of the mussel. We collaborated with scientists and education interpretation experts to make our animations both accurate and interesting. They provided feedback to make sure we were properly displaying the lifecycle, and that our animations were scientifically sound. We used layers of transparency and sequential animation to showcase mussel anatomy and functions, such as the reproductive process.

The river character flashcard interactive allows users to learn more about the animals present on a corresponding art wall created by artist, Stacy Levy. To represent each of the river characters from the glass etchings, we illustrated and animated each character as they swim, fly, or scurry across the screen.

A personality quiz helps visitors identify which of 27 river characters they most relate to. To encourage users to complete this experience we created a rising water level indicator so users knew how close they were to the end of the activity.

Visitors have expressed they enjoyed the interactives’ highly visual and animated nature.

Imagery Courtesy of the Fairmount Water Works Interpretive Center.