To make learning intuitive, the app centers around a responsive, interactive body map. I mapped out distinct target nodes across a custom vector mesh, allowing users to click anatomical locations to call up information. This architecture connects user clicks straight to data lookups without complicating the main screen flow.
Clicking a hormone node opens a deep-dive modal overlay dedicated to that character's identity and vital stats. These panels are completely dynamic—a single HTML modal frame updates its images, backgrounds, and text files instantly on the fly based on whichever hormone character the user selects.
The Body State Simulator lets kids toggle everyday scenarios—like sleeping, running, or skipping a meal—to watch internal systems shift gears. JavaScript event listeners track these radio inputs and immediately calculate which hormones spike or drop, updating the screen instantly to reflect real biology.
To encourage exploration, the app includes a Lab History page that functions as a personal sticker wall. When a user clicks the save button inside a character's profile, the system logs that character to browser storage. Even after refreshing the page, the dashboard pulls that list and displays their collected stickers safely.