Team & Roles

Carolyn Chen (https://carochenmedart.com)​​: Project management and wireframe creation
Hannah Forward (https://forwardmedart.com/): Storyboarding, style development, and asset development
Alexandria Dannhardt: Backend development and interactive design

Description

This project was a collaboration with second-year medical course instructors aiming to transform static nephron study sheets into an interactive learning tool. Dr. Cervantes and Dr. Monroy-Trujillo had previously created detailed BioRender diagrams organized into five “tiers” of renal physiology content. Our team chose to prototype one of the more complex tiers: how medications affect different nephron cells.

Our goal was to develop a functional proof of concept. Personally, I also aimed to leave behind a clean, modular codebase that future students could easily build on. We had about a month to complete the project alongside other responsibilities.

The process

Together, we conducted content research, developed interaction goals, and designed the overall structure of the tool. 

Carolyn led the interactive design and created both low- and high-fidelity wireframes, which were approved by the content experts.

Hannah led the visual design. She developed a clean and consistent visual style and created a style guide that we could reference to build out assets efficiently.

I focused on development. Once the high-fidelity wireframes were approved, I began building the interactive, with the goal of having a working version within a week so we could start gathering feedback. Hannah supplied visual guides and final assets, which I integrated as development progressed. We presented the interactive prototype to the content experts shortly after completing that first version.

I wanted the code to be as modular, expandable, and easy to maintain as possible, so that someone following after me would have a clear starting point. Everything is built on simple mechanics that allow for flexibility. All interactions are modular and only lightly linked, it’s easy to update or expand the project without breaking things.

• Each cell type in the nephron is a prefab. Inside each cell, transporters are placed based on the study sheet. Each transporter knows which medications affect it, what visual change should happen, and what information it should display. You can add as many medications as you want, and the system will adapt.

• Each medication is a ScriptableObject that contains its name, relevant data (like effects on urinalysis), and other interaction-related content.

• The urinalysis sliders dynamically reference the active medication’s ScriptableObject data.

• When a medication is selected, the code looks for all active transporters in the scene and pulls their relevant information. If you update a transporter’s data, it’s automatically reflected in the UI with no extra wiring needed.

• Colors are handled through a global palette script so the look stays consistent and can be tweaked easily from one place. Palette updates in-editor.

All of this allowed us to move quickly, stay flexible, and still produce a solid working prototype in a short amount of time. The structure is lightweight enough to run smoothly, but sturdy enough to support further development.