A playable website, from investigation structure and interface design to character rules and implementation. The main investigation is designed to be readable; the hidden ending is an optional, more demanding route.
Players enter as a detective investigating a death. Conversations, records, and clues on external websites offer different ways into the same case.
Conversation
Ask in your own words.
Private chats let players question characters through free-form input. Each character's prompt defines a voice and the information they are allowed to share.
Design choice
Use a familiar chat interface so the player can focus on what to ask.
Tradeoff
Open input gives players freedom, but also demands behavior for unexpected questions.
Keep the next move visible without prescribing the answer.
The core loop is to question, inspect, and connect evidence. Players can revisit records and characters as new information opens another route.
Investigation loop · high-level structure
01
Take the case
An incident report establishes the player's role and the mystery.
02
Question & inspect
Choose between conversations, member files, calls, and diaries.
03
Connect the evidence
Cross-reference records and follow clues onto the web.
04
Open another route
Use discoveries to access more records and revisit characters.
05
Reach an ending
Different paths resolve the case differently; closer attention to connected clues can open an optional hidden route.
↶ New information sends the player back to earlier conversations and records.
Eight endings, plus a hidden ninth.
Opened from an ending screen in this recording, the story map shows revealed and locked branches. It offers a view of the routes through the case after an outcome has been reached.
Information architecture
Give each kind of evidence a home.
Chat, the member registry, and the mission board occupy separate routes. The player can return to the same record structure as the case grows.
State feedback
Show what has changed.
Locked records, available files, member status, and counters distinguish what is known from what still needs investigation.
Early explorations behind the non-linear structure
Two exploratory exercises informed the direction: people could form different interpretations from the same fragments and inspect clues in their own order. These exercises informed the concept; they did not validate the final game's usability.
01 / Trace inferenceParticipants inferred an owner from discarded objects. Their confident but differing interpretations suggested room for more than one reading of a clue.02 / Visual detective exerciseA room contained ten inspectable objects with short records. Participants chose their own inspection order, informing the modular record structure.
03 / AI interaction design
Design what happens when the player goes off script.
Free-form conversation needs limits. I defined character personalities, knowledge boundaries, and responses to off-topic input, then connected those behaviors to the investigation.
A boundary in the working build
A warning becomes a consequence.
The chat history records repeated weather questions and Lily's warnings. The recording then shows the disconnected chat and the “Revoked” ending.
Intent
Keep an off-topic exchange inside the story instead of returning a generic assistant response.
Tradeoff
Revoking access makes the boundary consequential. It also risks punishing normal curiosity; the clarity of the warning needs further testing.
Each character has a separate prompt for tone and conversational style. Midnight, for example, is calm and controlled, with a deliberate sense of distance.
02 / Knowledge
A limit on what can be revealed
Rules distinguish acknowledging another member from revealing their private file. These instructions guide responses; they do not guarantee that the model will never reveal too much.
03 / Off-script input
A response when players test the rules
Off-topic questions, challenges to the administrator, and questions about the AI have defined response rules. Repeated probing can become a story consequence, as the recording shows.
Character prompts and response rules
Illustrative exchange · not a playtest transcript
Player
“Who is No. 1?”
Rule
May confirm a member exists; may not reveal their private file.
Character
“There are others here. What they carry is not mine to hand over.”
Character-level instructionsMidnight's prompt defines tone, conversation style, boundaries, and off-topic handling.Input-handling rulesEnglish and Chinese patterns cover member queries, off-topic messages, and attempts to challenge the fiction.
Built with Claude Code and the ChatGPT API. My design work covered the characters, response boundaries, interface states, and the relationship between conversation and progression.
04 / Playtesting & iteration
A readable main investigation, with an optional hidden route.
The hidden ending asks players to pay closer attention to clues and connections across the story. Discovering this layer is part of the challenge; universal completion was never the goal.
8players in the working-build test~35 minreported time to identify the main suspect2 of 8players reached the secret ending
Two of the eight players reached the hidden ending. I treat this as an observation of discovery in this group. It provides a starting point for examining how players explore the optional layer, but does not establish the ideal level of difficulty or determine the game's overall usability.
01 / Entry
Give the player a role before the first chat.
The text-heavy opening left testers unclear about who they were and why they were investigating.
Changed
Shortened the introduction and reframed the first screen as a visual police incident report.
Later observation
Most players in the eight-person working-build test followed the main storyline and identified the main suspect. This was not an isolated before-and-after test of the introduction.
02 / Conversation
Design for questions outside the script.
Players challenged the fiction; keyword-based replies repeated themselves and made characters feel artificial.
Changed
Moved to character-specific prompts with personality, knowledge limits, and rules for off-topic input.
Implemented behavior
The current build demonstrates warnings and a revoked-access ending. More varied prompts are still needed to assess how consistently the boundaries hold.
03 / Discovery
Evaluate the optional route on its own terms.
Two of the eight players reached the hidden ending. This is an observation of discovery in this group, not proof that the difficulty is right or wrong.
Next evaluation
I would examine where players stop, what they believe remains to be discovered, and whether the interface gives them enough feedback to choose a next step.
Design intent
Clear navigation and record states should support the investigation while preserving the effort required to solve the mystery.
The first playable chatroom
A plain chatroom and member list provided an early way to explore the interaction. Testing exposed the need to establish a role and a reason to investigate before asking players to start a conversation.
05 / From Figma to a working website
Building it exposed the states a static screen could miss.
The high-fidelity designs established the visual language. Working with real content made navigation, locked records, and changing member states part of the design work.
Left: Figma designs. Right: implemented screens with locked records, member status, and diary access.
Navigation
Separate destinations as content grows.
Chat, the registry, and the mission board moved into their own routes when a single stacked view became too dense.
Interaction states
Design before and after access.
Locked and unlocked records, plus alive and deceased member states, needed recognizable treatments beyond the default screen.
Language
Support English and Chinese input.
Character rules were maintained in both languages. Supporting the same intent requires more than translating the interface labels.
Visual system / a readable digital archive
Type
Pixel display type establishes the fiction; monospace body text gives records a consistent rhythm.
Contrast
Dark surfaces and light text frame the evidence, with red accents for status and alerts.
Record patterns
Repeated headers, folders, status tags, and counters help players recognize new information.
What I take forward
Preserve the mystery, then test whether the challenge is fair.
My next evaluation would examine whether the main investigation remains understandable, whether hidden-route clues can be reasoned through, and whether navigation and record states provide enough feedback without revealing the answer.