Learning Through Making—Bluecadet and River Alive!

Read Time: 7 minutes

Bluecadet (Philadelphia) used the power of prototyping to lead the creation of a suite of digital experiences that support educational goals established by partners Habithèque and the Independence Seaport Museum for “River Alive!”

“River Alive!” is the new core exhibition of the Independence Seaport Museum in Philadelphia. The exhibition educates visitors—with an emphasis on young students—about the life of the 13,500-square-acre Delaware River Watershed, which supports thousands of species of flora and fauna in addition to more than 15 million human residents. The exhibition further informs visitors of past threats to the watershed and encourages action steps to improve its health and preserve it as a resource. The modern challenges, wonder and science used to understand the freshwater system are all addressed through hands-on exploration and thoughtful use of technology, created through collaboration between ISM, exhibition designers Habithèque , interactive experience designers Bluecadet and a host of talented education and fabrication partners.


The Source

Bluecadet began the project as a strategic partner to Habithèque; their role was both visual and experiential, working to encapsulate the vision of the project in a brand and graphic system, and translate learning objectives into a series of engaging experiences. The most pressing goal, however, was finding the best mode to convey complex scientific information and a sense of environmental urgency—without overwhelming or boring young visitors. Essentially, they had to figure out a way to combine learning and play.

Known for their thorough, human-centered approach—inspired by IDEO’s Human-centered Design Toolkitand principles of experiential learning theory— Bluecadet adapts the prototyping approach to meet the needs of each project. Their tactics have evolved over time and can range from paper prototyping and code explorations to physically acting out the experience. This process led the development of visual and interactive experiences for River Alive!.

Collaboratively, the design team set out by gathering a cross-project team for a vision-setting exercise and a concept-generating sketch brainstorm, including representatives from the museum alongside architectural, exhibition and content partners. This sketch brainstorm—where all team members contribute titled hand sketches—focused on a set of experience opportunities the Bluecadet team put forward. While some ideas just didn’t make it very far, everyone expressed enthusiasm for a physio-digital projected ecosystem, an interactive watershed map and a digital character mirror. In total, five unique media experiences were conceptualized.

Next, what should “River Alive” feel like—playful or serious? Hyper-graphic or photo-realistic? They asked these questions to establish the visual tone on which to develop graphic content and laid out initial principles via a “fill the room” exercise, where a range of reference images were shown and voted on. Through the process, an organic, naturalistic, playful and nuanced graphic concept was determined. Dubbed “magical realism,” the system uses graphic “pops” to call attention to the wonder of the natural world and embodies the voice of the river with energetic, hand-made typography.

After testing, the kid-friendly graphic concept and ensuing “cast of characters” would be formulated into a style guide and rolled out—reinforcing animal recognition and providing continuity and familiarity—across the entire exhibit. Designers studied videos and images of animals to ensure that the characters were as anatomically accurate as possible, utilizing advanced tools to rig and animate each one.



Testing the Waters

(As told by Bluecadet’s Creative Director Brett Renfer and Associate Producer Emily Archer)

For River Alive!, we took a “learning through making” approach for each experience, especially for our “Continuum Wall” concept. The Continuum Wall is a physically-driven digital ecosystem, where visitors drive the health of a virtual watershed through real-world interaction. We first expanded our earliest sketches into a “bodystorm”: a live-action roleplay of the concept, with our design team acting as both users and exhibit.

First, the team used an IKEA cart as the physio-digital input and a whiteboard as the projection wall. This initial test helped us realize our interactions were too difficult, the river would fill up with creatures too quickly—and importantly, that this system was too complicated to test in this way. On the second test, we used a more advanced cart and a cast of dozens of paper river characters. Our collaborators, Habithèque, came along for the ride; our client Victoria tested out our giant paper blow wand, and agreed that this interaction wasn’t quite right on its own.

The third test was comprised of user testing; we developed an “MVP” version of the experience with two different inputs and put it in front of 100 school-aged children. This gave us a first-hand opportunity to see what the most exciting, educational and confusing aspects of the prototype were. One input made it all of 15 minutes before getting broken! Heading into production design, we now had a concept that we played through in three different versions, as well as plenty of actionable feedback from our core audience. (Our team worked with an evaluation partner to capture feedback and direction on our concept.)

One of our additional concepts, “Be a River Character,” proved to be a learning experience and one of our favorite prototyping stories. Although we didn’t use it in our final delivery after user testing, it provided us with important take-aways that were used in the final product. During testing, we followed a similar sketch-and-prototype-driven process to arrive at the concept. We wanted users to build empathy for the diverse creatures of the watershed—by becoming one! From a technology standpoint, we knew how to accomplish the experience using depth camera-based skeletal tracking. However, from an experience standpoint, we weren’t sure it would provide the right educational balance.

We planned to utilize the same 100-kid user test, but in order to prototype this concept, we would have to build the real thing. However, the possibility of a dysfunctional prototype would mean users fighting the technology, rather than thinking about the experience. Inspired by a scene in “Duck Soup,” we prototyped a digital mirror using only people and handmade costumes. After some initial awkwardness, children and adults alike were able to interact with our “digital characters.”

There were a lot of learning moments during prototyping that challenged our assumptions about how the audience would interact: fact-based speech bubbles were ignored, and the audience quickly grew bored with the simple one-to-one mirroring. However, since no technology involved, we could easily improvise. Our fiddler crab and eelgrass began to wink at the audience, intentionally breaking from the system to create an opportunity to sneak in a learning moment. Although everyone loved the experience, we ultimately decided to invest the resources to other areas of the project.

Overall, our team realized that users will interact with the most loose of prototypes, and often the lowest-tech ideas often result in the most transformative take-aways. We also learned a lot from letting story drive concept, letting real-world tests and prototypes hone and refine the experience—and from putting those ideas and interactives in front of the audience earlier than we felt comfortable.



Watershed Moments

The final Continuum Wall is a curved, 32-foot long projection driven by five physical sensor inputs custom-made from scratch by firm Creative Machines. As visitors roll, drum, blow, or spin sensors to add virtual characters to a digital watershed, the game-like system slowly becomes “healthier” as ecosystem diversifies from plankton, to plants and animals. A hit in testing, “party mode” surprises guests with a celebration of the resulting healthy watershed. The intuitive, playful installation comes with powerful tech under the hood like custom lenses and a full-fledged game engine to create a precisely-mapped curved projection surface, animations that mimic real-life behaviors, and a multi-channel ambient and responsive soundscape.

Three other interactives define the digital experience of River Alive: Watershed Map, Currents and Wetland Data. The Watershed Map is a scale map of the Delaware Watershed with embedded lighting and touchscreens that provide content “lenses” on the history and science of the watershed. Currents is an interactive personality quiz that pairs visitors with river characters and local opportunities to get involved. Lastly, a multi-user touchscreen entitled Wetland Data, informs kids through engaging activities and animations, which distill scientific methods for measuring the impact of global warming, deforestation and pollution on the river’s health.

River Alive! provides ISM with a unique, Philadelphia-centric cornerstone exhibit that gives residents a way to more deeply understand the environmental science and biology of their surroundings in both traditional hands-on and tech-enhanced ways. The exhibit has been a transformational one for the museum and hopefully will have a continuing impact on the community’s engagement with the Delaware River Watershed. The Bluecadet team describes their proudest achievement on the project as, “the way that the visual language, marketing and digital interventions we developed interweave with hands-on elements, live science demonstration and experiences with the water itself—creating a holistic journey for audiences that deepens the understanding and appreciation of the Delaware Watershed.”


Project Name: River Alive!
Client: Independence Seaport Museum
Location: Philadelphia
Open Date: November, 2018
Project Area: 4,000 sq ft
Project Budget: $857,260
Exhibition Design: Habithèque
Interactive Experience Design: Bluecadet
Design Team: Aaron Richardson (associate creative director); Katie Savage (art director); Sam Winfield, Alyssa Hamilton, Jillian Hammer, Wyatt Glennon (designers); Xavier Johnson, Siji Chen (motion designers); Ben Bojko (tech lead); Kevin Zakszewski, Pete Inge, Chris Arasin, Adiel Fernandez (senior developers); Weili Shi, Sarah Polansky, Henry Steinberg (developers)
Fabrication/Digital Integration: B Fabrication, Creative Machines, Frazer Technology
Collaborators: Habitheque, Hands on! Studio, Handymakes Studio
Photography: Dan King, Bluecadet