Helen Lin - Storytelling for Project Development - Spring 2025
Brief
For my retelling, renamed dorm room, I would like to rework this interactive storytelling project that I built with my friends (JZ on code, Kathleen on art direction, Sarah and I on illustration, and Sav Du on music) in my sophomore year of undergraduate study.
“dorm room”, previously called R o o m, takes you through a college dorm room in four different states (one in each month) and encourages you to poke around, gleaning details into what kind of person the student is through their belongings and how the belongings change over time.
Original Version
This original storyboard has a linear story structure, taking the viewer through the room in four different states (one for each season). It starts with the beginning of the semester, unpacking boxes, through winter and spring, and then to the end of the semester, packing the belongings back up.
The original is more of an animated comic strip, but I want to make it more interactive with the storytelling elements being outlined more clearly.
We built this for a hackathon so we were working on a tight deadline and rushed some components. Initially, we wanted this character to be a lot messier, so in the new rendition, I want to exaggerate this aspect.
Reworked Version
I want to rework this piece into having a stronger story by fleshing out more literal glimpses into the owner of the room (who I will call JC). For the new version, I’d like to create a more meandering spiral story structure by creating more access points in learning different aspects about JC’s life.
Firstly, I mocked up some of the storytelling elements that I wanted to incorporate by mapping out the elements and adding text boxes to narrate for each object. I mostly wanted to focus on some repeating aspects of JC’s life, mainly the physics class, playing lacrosse, and a brief romance with a girl named Justine.
Mockup: dorm room mockup
I want the audience’s role will be to visit (1) or spectate (2).
To technically execute this new version, I wanted to practice what I’ve learned last semester in ICM by rebuilding the interactions using p5. I organized my files on my local computer and set up my local working environment using VSCode.
It took quite a bit of time to gather the exact position I wanted to place each object, so for the time being, I’m using the exact pixel number of each (x,y) coordinate. To quickly estimate each point, I put a mouseX and mouseY tracker on the top left.
Next, I drafted a thought bubble text for each clickable item. These texts would only show up when a specific region (mapped to the position of the object) is clicked. I reused the code of detecting a new mouse click from a different previous sketch I worked on. Whenever there was a newClick(), the code will display or hide a text box when applicable. The text is different for each clickable object. It was also important to me to change the cursor to a hand when hovering over a clickable object to make it intuitive to use.
One of the challenges I faced was to get the animation gif play on each new hover without needing to reload each time. I haven’t had the time to research and figure this out, but this would improve the user experience. For the time being, the gif only plays once while actively on the page, but resets once the page is changed.
For this iteration (since I was reusing illustrated assets), a lot of the creative freedom this time went into writing the text. I was able to support my meandering story structure by choosing what to highlight in the text.
All in all, it helped to push myself to throw a prototype together very quickly while focusing on the aspects of interactive storytelling I have the less experience with (writing, coding, interaction design).