Initial Brainstorming
Notes helped clarify the themes, tone, and major emotional beats. Early ideas were centered on fear, curiosity, and the mundane.
A Night At Home 2.0
Interactive Fiction UI & UX Design / 2024 / Writer & Developer
A branching narrative horror game where your choices shape the story and determine your fate.
Project Overview
Developed over 2 months (November–December 2024), A Night at Home is a branching narrative horror game where players decisions shape the story, blending interactive fiction with subtle atmospheric horror.
- Twine + Twison
- HTML/CSS/JS
- Custom JSON Navigation
- Canva for visuals
- Narrative Design & Writing
- UX & Choice Architecture
- Front-end Development
- Playtesting & Iteration
Experience the Game
Alone at night in your quiet, empty house, a noise pulls you from your thoughts. Do you brush it off and try to sleep, or let curiosity pull you deeper into the shadows?
Navigate a maze of creeping dread and uneasy choices in this interactive horror experience.
Branching Narrative
Multiple Endings
Atmospheric Horror
Player-Driven Story
Play A Night at Home
Technical Implementation
The development of A Night at Home moved through multiple phases — from story planning to interactive prototyping and finally a custom-coded interface.
Story Planning
Mapped narrative structure and key branching decisions using diagrams and flowcharts. Early visual planning helped define tone and pace.
Interactive Mapping
Built a playable Twine prototype to test narrative logic and player choice flow. Iterated based on usability testing and readability concerns.
Twison Export
Used Twison to convert the Twine story into structured JSON data. This enabled full control over passage rendering and logic.
Front-End Build
Rebuilt the experience using HTML, CSS, and JavaScript. Implemented a custom navigation system, conditional logic, and a responsive layout.
Evolution: Version 1.0 → 2.0
The game started as a simple Twine game. Over time, it transformed into a polished, custom interactive experience.
- Standard Twine UI
- Basic navigation
- Default styling
- Core story only
➞
- Three-page custom structure
- Save system (in progress)
- Improved pacing & visuals
- Atmospheric horror enhancements
Story Mapping
Before any technical implementation, the story structure was carefully mapped across several stages — from loose brainstorming to a full interactive diagram in Twine.
Preliminary Map
This branching diagram laid out key choice points and structural pacing, allowing for early testing of flow and pacing.
Final Twine Map
The final version was fully playable in Twine, showcasing 3 major paths and 5 possible endings. It served as the reference for all future implementation.
Development Process & Playtesting
Each phase of development was guided by iterative feedback from players. Here's how the game evolved over time:
Early Testing
- Identified issues with passage length → split content into more digestible chunks
- Recommended integrating choices within the narrative, not just at the end of passages
Later Testing
- Further optimized text for better pacing
- Suggested a "true bad ending" to amplify horror genre payoff
- Validated final runtime (~10 minutes per route)
Results & Impact
- Players consistently expressed a sense of agency and curiosity.
- Players returned to explore new narrative paths.
Challenges in Interactive Horror
Building an interactive horror experience required balancing choice architecture with pacing and visual design.
01
Passage Length & Pacing
Managing the length of passages was the key to maintaining flow. Early versions were too dense, so I focused on making each segment digestible and purposeful through iterative testing.
02
Twine to Custom Implementation
The transition to a custom interface using Twison broke some internal logic, forcing me to create a new navigation system and rethink how story data is handled.
03
Custom UI Design
The UI needed to support the tone of the story while staying intuitive. This included integrating save features, responsive layout, and page styles that reflected what's happening on-screen without distracting from the story.
What I Learned
Narrative Architecture
Designing branching narratives taught me how to maintain story cohesion while still giving players meaningful choices that shape tone, pacing, and outcome.
Technical Integration
Porting from Twine to a custom front-end pushed me to handle JSON structures, manage state persistence, and balance flexibility with usability.
User Testing Insights
Playtesting highlighted the importance of text rhythm: trimming excess, layering tension, and choice design.