Context:
Role:
Duration:
Exploratory design at Moving Lab
UX + interaction designer
Two months (part-time)
Reefkeeper investigated the potential for VR to connect middle and high school-aged youth to marine conservation and problem-based learning about reef ecosystems.
This project brought a single moment from the larger experience to life, allowing us to think through design opportunities and challenges for this and related XR projects. We hoped to use it to develop novel UI patterns, interactions, and a range of speculative prototypes that we could then use to start conversations with institutional partners where we could find alignment with their design and outreach needs.
This video shows two of the Unity prototypes that I created during the process, looking at how a single UI control could seamlessly move between scales of a reef ecosystem.
In this case, we focused on middle and high school marine biology lessons about food webs: the predator-prey relationships that move energy from photosynthetic organisms into successively larger creatures, allowing these environments to persist. Based on learning materials produced by science museums and aquariums, resources for home salt-water aquarists, and NGSS standards, I started to assemble an age-appropriate model of a coral reef food web with dynamics like algal bloom that would introduce challenge and discovery.
Smithsonian Learning Lab’s Secrets of the Sea online experience addresses similar topics but relies on a simple collection game mechanic that doesn’t involve players in ecosystem dynamics
Since we weren’t in a position to produce a full game, but rather visualize some of the core interactions, I sketched out the game dynamics based on the first couple levels of the food web and spent a couple days making a rough prototype in Unity to test out a simple ecosystem model. Playing with the model proved out that some engaging game dynamics relating to learning goals were possible and helped give me a sense of what information would need to be available to the player when. The world of saltwater reef tank aquarists, with its many additives and filtering devices, was an invaluable resource in thinking about what options to give the player in managing the ecosystem
In this version, players could increase nutrient levels and sunlight to grow plankton populations and accommodate more coral, but needed to rely on fish to graze on excess algae, preventing an algal overgrowth that can kill coral when ecosystems become nutrient rich. The numbers were intentionally rough, focusing on teaching relationships rather than predicting exact real-world outcomes.
Testing out a 2d version of the game also helped us think about how satellite interfaces could work. Could some of this be present in a mobile interface that kids could take home from class or an aquarium visit? What information would we present in which place? How did putting some of this information into the reef space change the game experience?
With a version of this simplified model to play with and some sense of how to scale it up, I moved into storyboarding to think about how to make this experience work in VR.
The main design challenge I settled on bringing to a higher fidelity was that of moving between scales. Creatures within reef ecosystems range from micrometers to centimeters, so our players would ideally need to be able to scale the scene up and down to maintain some continuity in the spatial relationships of the reef, rather than having different scale levels feel disconnected. The Eames Powers of 10 film is a classic example of this visualization technique in action.
I wondered how this XR UI and UX challenge translates to other examples like smart cities or factories, where visualizing the spatial organization of data can not only help with memorization and reasoning (think diagram of car engine vs a parts list), but also with inferring causes and effects (for instance diagnosing cooling issues within a data center).
To accomplish this, I did rough sketches like the ones above to get a sense for what the UI would need to do and what other elements it would be in dialogue with. User flows were crucial in developing multiple elements at once.
As I worked out the UI design for the scale control, I started prototyping it in Unity with a simple underwater scene using 3d coral models from the Smithsonian's online archive.
For player locomotion, I used VRChat creator Hirabiki's swimming system, which they released for free on Booth.pm. The swim system worked well as a way to move around the reef space, suggesting some interesting possibilities for related applications where users need to move around large spaces in multiple dimensions at once. Since it did not involve player view rotation or long, continuous movements, it was also more comfortable than flying locomotion mechanics like the ones used in Zenith.
