StormHacks
2026
Fine Line: A Digital Experience
An interactive digital experience that brings awareness to how everyday habits impact the environment.
Overview
I designed an interactive digital experience that demonstrates the sustainable impact of your everyday actions.
Inspired by sustainability and narrative video games, I designed an interactive digital experience that brings awareness to how one's daily habits can impact the environment.
Approach
We all know about climate change, but why is it so hard to take action?
Modernization is slowly destroying our planet, but it's difficult to take action when your habits feel insignificant in the grand scheme of the world.
Research
What are some misconceptions about climate change, and how can we disprove them?
Insignificance of Personal Habits
Climate paralysis occurs when solo habits feel insignificant in isolation, according to Claude.
Awareness of Systematic Factors
Social media discourse reveals lots of misinformation about the biggest contributors of climate change.
Detachment from Climate Issues
"Because it doesn't affect me directly, I don't care," is a recurring theme in interviews with friends.
Problem
Roadblock
My team worked so well together, that I felt a bit of guilt for not taking on the brunt of the game design process.
I had the best team I could ever wish for. My teammates drew each scene by hand (shoutout Avia and Iris), and handled the entire back-end with the help of Claude. Though I did most of the initial planning, I felt a bit guilty for not being able to help out more. I'm slowly learning that delegating tasks is not a sign of personal incapacity, but good leadership.
Design System
I made design tokens for the colour, typographic, borders, radius, stroke, and shadows using Claude and Figma's Token Studio.
Recently, I've been really excited about design tokens and variables. Due to tight time constraints, I challenged myself by prompting Claude to create a warm grey, sketch-like design system, which I imported through Figma's Token Studio. Establishing this system early on helped maintain consistency across screens.
Lo-Fi
I extensively sketched out the game's narrative flow, before making a storyboard and wireframes.
I was surprised how similar mapping out a narrative flow was to my previous work in Cinema Studies (finally, putting my degree to good use). I ideated three choice scenarios, which would allow for a good, neutral, and bad ending. After that, I created a brief storyboard, and made lo-fi wireframes in Figma.
Mid-Fi
While my teammates were drawing each scene, I experimented with different placements of the dialogue pop-up.
During this phase, I was mainly deciding where to place the dialogue box, and if we would display diegetic time. I played around with various iterations of each scene's interface, before going on a snack run for my team (super important).
Hi-Fi
Here's a working version of the digital experience!
Click here to play in full screen.
I also made a gameplay trailer, which you can view here.
Reflections
Our project was a top ten finalist for Best Design (out of 250 teams).
This was my first time designing a game interface! I'm so grateful that I had the opportunity to do so along with some of the most talented designers I know. It's also incredible that our game was a contender for best design at Canada's second largest hackathon. I'm excited to design more game interfaces in the future. Maybe in 3D?
Shoutout to Iris Chan, Avia Wen, and Sukhraj Crane for being the most hardworking, empathetic, and talented teammates ever. I'm so grateful to be apart of UBC UX Hub, and work with such cool people.
