AND DON'T FORGET TO FLOSS...
(2024)
Game Description
And don't forget to floss... is a short narrative psychological horror game about anxiety, pressure and self-judgment, as well as the well-meaning, but sometimes harmful, things we hear from others. It's an emotional and escalatingly anxious experience where choices matter. It's playable in the browser on most devices.
Genre / Tags
Visual Novel
Story-Rich
Psychological Horror
Drama
Emotional
Meaningful Choices
Design Tasks
Gameplay Loops
Player 3Cs
Emotional Feedback Mechanics
Narrative Pacing & Flow
Writing
WORK HIGHLIGHTS
Highlights of tasks I did and the design and work processes behind them 🌟
HOLISTIC DESIGN
Highlights from the design of the core concept and intended experience of the game. Also includes the Miro board.
Holistic Design ⭕
Designing the Overall Concept & Experience 📝
The game was centered around the theme of self-judgment and pressure, especially related to other people, and the feelings of anxiousness they induce. I started by clarifying and elaborating on the game concept; for example, what genre it was, who the target audience was, how the gameplay would work, what the intended mood was, what the setting was, etc. For every aspect, I tried to make it synergize to deliver on the intended theme and player emotions. Once I knew clearly what the game was about and how it would function, I planned out the design pillars for the player experience.
The Core Concept 🎯
The initial idea for the game was that I wanted to portray self-judgment and pressure and how they can be prompted in our daily life and relationships. I wanted to make an escalatingly tense, unsettling, and anxious experience that was something relatable that you could emphasize with, regardless of your experience with these mental health issues, and that the characters and experience would linger in your mind afterward.
Thus, I made the game take place at an increasingly intense dentist visit. This is a relatable daily life situation that tends to make us uncomfortable and judged, and that induces lots of pressures. For example, "you should to brush more at these spots", "you need to start flossing", etc. The protagonist's self-judgment throughout the visit eventually leads to a breakdown.
Based on this concept, I created a brief holistic summary of the game and what I considered the most important design elements and questions at the time. I tried to make all elements synergize to deliver on the intended theme and player emotions.
The initial design summary from the Miro board. Feel free to explore the full Miro board below.
Creating the Design Pillars 🏯
While the concept and intended emotional experience were clear to me, I felt like it was important to map out which mechanisms I should use to deliver on the experience and establish design rules for myself. This lead to the following design pillars:
Miro Board 👨🏫
Here is the Miro board I used to manage the project, plan the design, write the dialogue, etc. Feel free to look around!
Art & Sound 🎨
Dialogue design: no right choice, [Lie].. then regret/doubt, always judged afterwards, break up tension between
Encounter design: build up... contrast...
Intensity Chart
How the intensity of the experience and perceived anxiousness increase throughout a playthrough. Notice that it's extra high by the end of the experience and that it peaks in the middle, reflecting the peak–end rule.
GAMEPLAY & SYSTEM DESIGN
Highlights from the design of the core concept and intended experience of the game. Also includes the Miro board.
Gameplay & Systems Design 🎮
Visual Novel 3Cs Design 🎥
Options for 3Cs (Character, Camera, Controls) design for visual novels are more limited than in other genres. Still, I tried to lean into the medium as much as I could to leverage its advantages.
-
Character: I tried to design the player character in a way that would make it easier for the player to project themselves and their own experiences on them, something interactive fiction tends to be good at.
-
Camera: I wanted the player to feel judged, so I used a first-person camera perspective and made other characters face the player directly. I also used oppressive camera angles that conveyed power dynamics.
-
Controls: I used mouse controls to ensure accessibility and limited controls occasionally to induce anxiousness.
Character Design 🦸♀️
I wanted the game to be relatable and I wanted to players to project themselves and their interpretations on the experience, contextualizing the portrayed situations with their own experiences. Just like traditional books, interactive fiction and visual novels are great for doing this, since they leave much a character up to readers' imaginations and interpretations, making it easy for readers and players to project themselves on the character. I tried to leverage this in the character design.
The game is played in first-person perspective and the protagonist themselves have a gender-neutral name (Jackie). We never see a picture of the player, only a gender-neutral silhouette in a mirror. In the dialogue and player choices, the backstories, relationships between characters, and the protagonist's feelings are also subtle, implied, and open for interpretation, but never explicitly explained or stated.
Silhouette of Jackie in a mirror – the only time we get a glimpse of them.
Transition between two scenes. Notice how the eyes of the dentist and the dialogue text are all maintained at the same level.
Camera Design 🎥
I wanted to use the camera and perspective to induce or enhance feelings or being observed and judged. As a starting point, I made the game first-person. That way, the player would be facing other characters and their stares directly.
Eyes tend to be focus points for our attention. In film, editors usually try to maintain eyes at the same height or screen location between cuts to make the viewing experience smoother. I adopted a similar approach and:
-
Tried to maintain eyes at the same height between scenes to make transitions smoother.
-
Aligned the dialogue text with the eye level of the characters, rather than the top of the picture. This made it feel more smooth, direct, and personal.
Putting the text on the side of the images not only helped align the eyes, it also made sure that the unsettling and oppressive visual experience got its full focus and didn't get disrupted by the text.
The player laying down in a chair, looking up directly at the dentist. Also notice the strong lamp with a buzzing sound that makes you feel even more observed and judged.
Oppressive Camera Angles 📐
I also wanted to leverage camera angles to express power dynamics and make the player feel judged and inferior. Thus, I usually placed the eyes of the dentist high up on the screen, to make it feel like they looked down on you, or made the player lay down and made the camera look up on the dentist directly.
Controls 🕹️
I tried making controls intuitive and non-disruptive by limiting them to mouse controls. This was to:
-
Improve accessibility. I wanted the game to be easily accessible, even on mobile.
-
Immerse the player. I wanted to focus on the story and create a smooth flow in the dialogue.
-
Induce indecisiveness. With the freedom to move the mouse as you want, and without any default dialogue option, I figured I could make the player more indecisive about their choices and prompt feelings of anxiety.
I also limited player controls occasionally by reducing dialogue options, either to serve the narrative and increase the impact of certain themes or conversations, or to induce anxiety by forcing the player into an unavoidably uncomfortable situation.
The player first selecting between two dialogue choices and then only being limited to one in the next conversation.
Gameplay & Systems Design 🎮
Core Loop & Emotional Feedback Mechanisms 😰
Initially, I designed an adaptive system where player dialogue choices would reflect different styles of coping with judgment and insecurity, and the game would respond to your chosen style. However, I ended up using a simplified linear approach instead, which helped deliver an experience of escalating anxiety. Anxiety was reinforced throughout the game by a system of emotional feedback mechanisms and player dialogue responses. It was implemented in Twine with HTML, Harlowe, JavaScript, and CSS.
Coping Style System 💔
Original System Idea 💡
Originally, the dialogue and player choices were supposed to work differently. I wanted the dialogue choices to reflect ways that people cope when they feel judged or insecure.
The game was partly a personal artistic expression from me, so I based the coping behaviors on my own experiences and those of acquaintances, rather than on psychological research. Basically, player responses would would reflect two coping styles:
-
Withdrawn: Stays quiet, isolates and distantiates themselves, and avoids confrontation.
-
Defensive: Expressive, tries hard to prove their worth, and are aggressively defensive.
Technically, the game would keep track on how many times players choice either of the choices and adapt scenes, responses, and choices based on the score, leading to a branching narrative and personalized story.
Behavior Examples by Coping Style 🗣️
Withdrawn Style
-
Saying sorry a lot
-
Difficulty speaking up
-
Short or silent answers
-
Going along with what others say
-
Non-confrontational
-
Formal speech
-
Slower responses
Defensive Style
-
Self-deprecating jokes and comments
-
Trying to defend their worth by bringing up achievements
-
Long answers with excessive details or excuses
-
Confrontational & aggressively defensive
-
Impulsive or lashing out
-
Informal speech
-
Faster responses
Example of dialogue options. Notice how both still represent the two coping styles above where one's more withdrawn and the other more defensive, but that they are less on-the-nose.
Switching Approach 🔀
While the coping styles themselves seemed relatable to players, it didn't feel like the styles mixed well. Most people seemed to adhere to only one or the other. Having one choice from each meant that the player was likely to go down one of two predetermined routes. Moreover, one option would also always feel unnatural, incoherent with the protagonist, and immersive-breaking to players.
Thus, I decided to skip the coping style system and lean more towards the withdrawn coping style instead, but kept it subtler and less extreme. The game would still respond to your choices, but on a situational basis, not a systemic one.
Escalating Intensity 📈
I wanted to portray anxiousness as an escalating and overwhelming experience so I made it increase throughout the experience as the protagonist's self-judgement and insecurities are repeatedly triggered, eventually leading to a breakdown.
I also wanted the experience to be memorable and make the anxiousness linger afterward, so I also tried to leverage the peak–end rule from behavioral economics; that people tend to judge and remember an experience based on how they felt at its peak and end, rather than an average or sum of all the moments of the experience.
Thus, I made the end of the experience extra intense and included an extra intense and anxious moment in the middle. Read more about the plot structure and the most important scenes down in the Narrative Pacing & Flow section.
Intensity Chart
How the intensity of the experience and perceived anxiousness increase throughout a playthrough. Notice that it's extra high by the end of the experience and that it peaks in the middle, reflecting the peak–end rule.
Core Loop Diagram
Diagram of the core loop. Anxiety inducing questions prompt insecure responses, which lead to anxiety-inducing feedback that makes you feel even more insecure and anxious in the next echange.
Core Loop 🔁
To deliver this escalatingly intense and anxious experience, I designed the core loop as a self-reinforcing emotional feedback loop.
in sum, dialogue choices would reflect insecure coping mechanisms, and regardless of what you picked, different feedback mechanisms (e.g. dialogue responses, sound intensity, etc.) would make you feel judged, insecure, or overwhelmed – increasing your anxiousness. This would in turn make you even more anxious about your next choice and dialogue exchange.
To improve pacing and tension building, every dialogue exchange does not follow this pattern. For example, some exchanges contribute more, some are neutral, and some may even be perceived as positive and serve as build-up to sell the impact of later ones.
Loop Example
Example of a dialogue exchange and the two routes you can take when the dentist asks about how school is going. Notice how you feel anxious regardless of the path you take, which you'd bring into your next exchange.
Dialgoue Choice 1: Lie
-
You choose to lie, which inherently carries tension and anxiousness.
-
The dentist's response implies performance expectations, which become extra heavy together with the lie. On top of that, certain pressuring words are animated for emphasis, and the static noise in the background is louder.
Dialgoue Choice 2: Open Up
-
You choose to open up. The words are animated to induce anxiety and insecurity.
-
You get interrupted and hurt by the examination. A screen shake is added for increased effect. The dentist didn't seem to listen closely.
-
Insecure about it and having lost courage, you don't dare to open up again and say it was nothing.
-
The dentist responds "I see". It seems like he judges us over something, but we aren't sure what. Did he listen before? If so, does he judge us for not elaborating. Background static noises are louder.
Emotional Feedback Mechanisms 😖
The anxious emotion and feelings of judgement, insecurity, and overwhelm are induced mainly by these mechanisms:
Player Response Types 💬
Player responses fell in to three categories, each intended to contribute to the core loop and induce anxiousness.
Encounter Design Example 🦷
Dialogue design: no right choice, [Lie].. then regret/doubt, always judged afterwards, break up tension between
Encounter design: build up... contrast...
Intensity Chart
How the intensity of the experience and perceived anxiousness increase throughout a playthrough. Notice that it's extra high by the end of the experience and that it peaks in the middle, reflecting the peak–end rule.
Implementation 💻
The game was made in Twine using the Harlowe format. Each dialogue passage therefore required the following elements:
-
HTML code to define the structure, content, and layout.
-
Links to media files for the sound and visuals.
-
Twine Harlowe code to add animations, screen shakes, transitions, and text effects.
Additionally, the visual stylization (colors, fonts, responsive layout, etc.) was defined in a CSS stylesheet, and custom functions (e.g. to play and transition audio) were defined in a JavaScript sheet. I had not touched web development in years so much of this was new to me.
Twine Code Sample
Code example for a passage in the game. This is written in Twine's HTML infrastructure, with Twine Harlowe methods (blue) for custom text styles and animations. CSS stylization and custom JavaScript method definitions are written elsewhere. Media files are fetched from the web.
Result
How the code looks in-game. Notice the typing effect, the fade transition, and the text fidgeting. Hover for sound (a very faint static noise).
NARRATIVE DESIGN
Highlights from the design of the core concept and intended experience of the game. Also includes the Miro board.
Narrative Design 📖
Narrative Design & Writing ✍
I constructed the narrative in six steps: 1) Developing the premise, 2) Developing the characters, 3) Brainstorming scenes, 4) Establishing the plot structure, 5) Writing the dialogue and letting it direct themes and structure, and 6) Lots of iteration and playtesting. Overall, empathy for the characters was the foundation for all the writing.
Constructing the Narrative 📔
In summary, my writing process followed these steps:
-
Developing the premise: I did this while developing the game concept (see Designing the Overall Concept & Experience 📝).
-
Developing the characters: My writing tends to be character-first. I find it hard to write dialogue, elaborate on the themes, or imagine scenes without immersing myself in, and emphasizing with, the involved characters.
-
Brainstorming scenes: Based on the characters and their conflicts, I tried to come up with meaningful scenes and situations. In doing this, I also researched dentist visits and noted down my own experiences for inspiration.
-
Plot structure: I mapped out the most important scenes in an intensity chart to determine the pacing order. I paid extra attention in elaborating on the start, climax, and end scenes.
-
Let the dialogue direct: For this story, the content of, and transitions between, all the scenes weren't clear to me. I wasn't sure how the dialogue and visit would go exactly, so I started writing, letting the dialogue itself direct me and the story emerge from it.
-
Iteration & playtesting: It is hard to write natural dialogue, especially when you want to be implicit and not too on-the-nose. For me, the solution was lots of playtesting and iteration.
Plot Summary 📃
Logline
A girl borders on breakdown as her self-judgment is triggered during a dentist visit.
Summary
Jackie goes to the dentist for a routine check and to check up on her hurting jaw. She has low self-worth, is self-judgmental, and compares herself to others, which has led to stress in many areas. Moreover, she doesn't want to be a burden to others and isolates herself with her negative thoughts. She has been postponing the dentist visit.
At the dentist, the dentist chats with her and asks questions about her and her family. Her answers depend on the player's choices but implicitly reveal her stresses and self-judgment. As the conversation continues, she judges herself harder and harder and becomes more and more anxious. For her, the conversation feels more like an interrogation than a friendly chat. By the end, as the final drop, the dentist points out that she's not flossing enough.
After the visit is done and she get's home, she has passed her breaking point and flosses her teeth bloody, followed by a self-deprecating comment. After that, a family member knocks on the door and asks how she's doing. The player can either choose to open up and seek help or continue isolating themselves.
Miro Board 👨🏫
This narrative section is still under construction. WIP sections are: character breakdowns, pacing, writing for engagement, and iteration & playtesting. Until then, feel free to look at the Miro board. It's fairly well organized and already showcases much of my processes and intentions.
Character Summary 👪
Player responses fell in to three categories, each intended to contribute to the core loop and induce anxiousness.
Jackie Breakdown 👤
I wanted to portray anxiousness as an escalating and overwhelming experience so I made it increase throughout the experience as the protagonist's self-judgement and insecurities are repeatedly triggered, eventually leading to a breakdown.
I also wanted the experience to be memorable and make the anxiousness linger afterward, so I also tried to leverage the peak–end rule from behavioral economics; that people tend to judge and remember an experience based on how they felt at its peak and end, rather than an average or sum of all the moments of the experience.
Thus, I made the end of the experience extra intense and included an extra intense and anxious moment in the middle. Read more about the plot structure and the most important scenes down in the Narrative Pacing & Flow section.
Intensity Chart
How the intensity of the experience and perceived anxiousness increase throughout a playthrough. Notice that it's extra high by the end of the experience and that it peaks in the middle, reflecting the peak–end rule.
Intensity Chart
How the intensity of the experience and perceived anxiousness increase throughout a playthrough. Notice that it's extra high by the end of the experience and that it peaks in the middle, reflecting the peak–end rule.
Narrative Pacing 📈
I wanted to portray anxiousness as an escalating and overwhelming experience so I made it increase throughout the experience as the protagonist's self-judgement and insecurities are repeatedly triggered, eventually leading to a breakdown.
I also wanted the experience to be memorable and make the anxiousness linger afterward, so I also tried to leverage the peak–end rule from behavioral economics; that people tend to judge and remember an experience based on how they felt at its peak and end, rather than an average or sum of all the moments of the experience.
Thus, I made the end of the experience extra intense and included an extra intense and anxious moment in the middle. Read more about the plot structure and the most important scenes down in the Narrative Pacing & Flow section.
Writing for Engagement 😱
I wanted to portray anxiousness as an escalating and overwhelming experience so I made it increase throughout the experience as the protagonist's self-judgement and insecurities are repeatedly triggered, eventually leading to a breakdown.
I also wanted the experience to be memorable and make the anxiousness linger afterward, so I also tried to leverage the peak–end rule from behavioral economics; that people tend to judge and remember an experience based on how they felt at its peak and end, rather than an average or sum of all the moments of the experience.
Thus, I made the end of the experience extra intense and included an extra intense and anxious moment in the middle. Read more about the plot structure and the most important scenes down in the Narrative Pacing & Flow section.
Intensity Chart
How the intensity of the experience and perceived anxiousness increase throughout a playthrough. Notice that it's extra high by the end of the experience and that it peaks in the middle, reflecting the peak–end rule.
Screenshot from the feedback section in the Miro board.
Iteration & Playtesting 🧪
For me, iteration and playtesting were the keys to writing natural and not too on-the-nose dialogue, as well as making sure that the emotions came across and that the experience was relatable and connected with players.
I played the game with over 20 players. I iterated and made improvements between almost every playtest to accommodate the feedback. I let each playtest build on the previous one, making sure to ask questions to validate that the changes helped.
For the playtests, I actively reached out to different people that complemented each other and I knew would be able to give valuable feedback in key areas. For example, someone who was good with cinematography, psychology, or UX, or those who had and hadn't struggled with self-judgment, low self-worth, and anxiety issues.