GRACIELA  SMET

WISPS

Narrative mini game about personal identity


What would it look like if personal identity wasn't expected to be quantifiable, made of single words and multiple choice questions?

In a world dominated by identity politics, we have become accustomed to identifying ourselves through multiple choice options and dropdown lists, asked to boil down all the complicated parts of ourselves into a handful of words.

Wisps is a narrative mini game built in React. Written in a surrealist magical realism style, Wisps encourages us to reconsider which of our identity labels are genuinely important to our understanding of ourselves and which feel arbitrary and externally imposed.
Play the game >

(Note: the game is best played on desktop)

OVERVIEW

This project was created as a solo project for Stanford's CS 347G, Serious Game Design over a time period of 3 weeks. We were given the prompt to create a text-based interactive fiction about a problem we cared about with the goal of getting others to understand

Tools

React

PREMISE

In brainstorming the premise of my game, I was immediately drawn to the aesthetics of magical realism, especially by the short stories of Haruki Murakami and his story “Confessions of a Shinagawa Monkey” in particular and decided to descend down a path of absurdity. In doing this, though, I set myself up for the difficult task of communicating something important through a surrealist storytelling technique, which I've never done before.

I decided next that I would focus my game on labels and identity politics.

In the midst of a job application cycle, I often feel reduced to a pile of words and labels, worried that I have to try to capture as much of myself as possible in a very limited space. The checkboxes and multiple choices can all feel so arbitrary.

As more identities become normalized, the lists and options get longer and longer, but in my opinion it doesn’t solve the fundamental problem of trying to categorize the incredible diversity of people into discrete buckets. In a more political sense, these categories can erase nuance and attempt to simplify complex narratives, and in an age of AI where data is gold it can be scary to think of people just as quantifiable and distinct instead of multifaceted.

However, I also recognize the value of labels to people in offering them control and solidity in their identity, so I wanted to make sure that my game also allowed players to hold on to what they felt was important to them.

LOW-fi prototype

Testing the visual aesthetic

Initially, I dove right into Twine (the interactive storytelling tool recommended for the project) and tried to start building my first tiny playable prototype on that app. At this point, I had come up with a story game inspired by Haruki Murakami, where labels are “stolen” and replaced with absurd images, with the hope that images would evoke a more subjective interpretation of identity.

As I began working with Twine, I quickly discovered that what I wanted to do was just not possible on the platform, specifically with images. Thus, I went to my old friend Scratch and built my first prototype there.

Screenshots from low-fi Scratch prototype

In the first prototype, the player goes through a narrative in which they’re dreaming about filling out a form. Then, a swallow enters and begins “pecking at” (clicking on) words, replacing each one with an image.

The goal of this prototype was to see how people responded to the “abstractification” of identity into images and how that communicated my point, as well as how they felt about the character of the bird.

And with that, I did my first playtests!
Playtest 1:

Location:
In-class
No. Playtesters: 3
Demographic: Different genders, all college-aged
From this first scrappy prototype, I got a lot of positive feedback about the abstract/surrealist direction and excitement, so I knew I wanted to stay true to that original vision.

Generally, however, this initial version of the game lacked a clear player motivation behind choices. It also relied heavily on my verbal explanation of what my goal was. There was no narrative explanation as to why the bird was “stealing” words, and there wasn’t much weight behind any choice a player made, so I knew I'd have to further refine the storyline to add more player autonomy and make my message more clear.

REFINING THE NARRATIVE

How can I adjust the game and narrative to make player choices feel more meaningful?

Before moving the entire game onto a new platform, I decided to focus on refining the narrative and had a couple different options to pursue.

In the end I decided to flesh out an option : instead of having the player play as the bird, they would play as the person in the dream. Rather than stealing labels at random, the bird would present the player with one of their own labels, giving them the choice to either keep it or let the bird replace it with an absurd alternative. This core loop would continue until the player was happy with the “identity” that remained on screen.


This core loop allowed me to use player behavior to reinforce my message, grounding the entire game in the question: does this label matter to me?

My goal was for players to question the arbitrary labels that have been externally imposed upon them, so forcing them to engage in the choice over and over would both make my game longer and more impactive.

Since I still wasn’t sure that I’d be able to do my idea of images in Twine, my next playtests consisted of a combination of the Scratch narrative with a short Twine narrative that together illustrated the intended aesthetics and core loop. The goal of this prototype was thus to determine if my narrative was getting closer to capturing the message I wanted.


Playtest 2: Elyse
Location:
In class
No. Playtesters: 1
Demographic: College student

Playtest 3: Nick
Location:
At home
No. Playtesters: 1
Demographic: 21-year-old man
For these playtests, I began by explaining how the two demos overlapped, let each playtester go through the two demos, then explained my intended purpose and asked them what they thought about a) the visual aesthetic and b) the narrative, then c) how they supported my goal.

Again, reception to the visual aesthetic was positive from both participants, and they both liked the fact that they would be given a choice as to whether or not to abandon a particular label. However, both agreed that there was still room for improvement in the narrative. One playtester suggestion included adding something to better wrap up the game and leave the player thinking, perhaps a moment where they wake up from the dream and realize that the forms in real life haven’t adapted to the flexibility and absurdity of the dream.

From here, I knew I wanted my next prototype to be stand-alone and all-encompassing, combining the core narrative loop in Twine with the visual aesthetic explored in Scratch. As I brought it all together, I planned my higher-fidelity prototype to respond to these concerns.

ELEVATING IN REACT

Bringing together the narrative and visual aesthetic

In choosing such a complicated and surreal idea, I inevitably made it more time-consuming since it was unable to be made in Twine. Between project checkpoints I decided to build my idea in React, and although it was time-consuming this flexibility allowed me to get as close as possible to my original vision.

To ensure that I held true to the constraints and intentions of text-based interactive storytelling on Twine, I modeled my React app using a set of messages with hard-coded links bringing players to different screens depending on their choices. To plan this out, I made a quick FigJam board to map out all the necessary screens and their key values.


Using React allowed me to display images inline and display the “identity” on screen at all times, reinforcing the surreal style and a focus on player choices.

The inline images allowed me to achieve the absurd/surreal effect that I was going for, with images bleeding out and around the text and quite literally breaking out of boundaries.

The second feature was an important narrative detail that ensured that players are focused on the idea of their personal identity at all times. I wanted to make sure that even as players make choices and new messages are displayed, their previous choices feel constant and that they’re able to see this progress and status at all times.

A screenshot near the beginning of the narrative, when the identity form first appears on the screen

While filling out the identity form, I also decided to force players to click through the cycling options a certain number of times before the message would give them an option to continue, with the goal of encouraging them to fill out the form with answers that reflected their real-world answers. To make sure that they kept filling it out even if the message appeared, I put the link text on the word “finish.” This made the choices later in the game even more meaningful as they were labels originally chosen by the player instead of pre-filled by me.

Further into the narrative, the player is being offered a decision about which gift to accept in return for their label.

Now, the prototype was fully functional as per my original vision, consisting of a short exposition explaining that the player is in a dream and filling out a form with their identity information when a bird flies in, then a core loop where players are offered a choice at random to keep a label or let the bird have it, at which point the bird offers them a choice from 3 gifts to replace it and the loop continues.
Playtest 4: Liv
Location:
At home
No. Playtesters: 1
Demographic: Female college student

Playtest 5: Laura & Max
Location:
In class
No. Playtesters: 2
Demographic: College students

Playtest 6: Jason
Location:
At home
No. Playtesters: 1
Demographic: Male college student

For my first playtest, I let the player just cold start with the game to see her thoughts without an explanation beforehand. I also had a playtest with someone who had playtested in the original round, so his feedback on the evolution was super important.

Some playtesters told me they were excited about the game but that they still didn’t quite understand it until I explained it. Max, who knew my premise from the first playtest, felt that the narrative and mechanics were much stronger than at the beginning yet agreed that the “seed” of my idea could be planted earlier and made more explicit.

While some thought the end state wasn't necessary because players could step away when they felt finished, one completed the playtest asynchronously and thought that the endless loop was a bug. Laura also told me that the loop became less effective after the first one or two passes, as she stopped reading the text and was just clicking through screens to get to the meaningful actions.

Some moments that I observed that weren’t explicitly mentioned to me were that my design choices in the exposition were successful. When the screen with the form first appears and there’s no underlined text, players clicked around to explore and there was always an “Ahhh” and a moment of delight as they discovered the cycling blue text and began filling the form out. To my surprise, all the players spent time on this screen filling the form out honestly, which was great for the goal of the game.
Goals: Make my target message more explicit from the beginning and tighten the core loop.

FINAL PROTOTYPE

As I went into my final prototype, I made some key changes to improve the game.

First, I added an intro screen to start the game, reading “welcome to wisps. a mini interactive fiction about the absurdity of labels.” With this, players have a short and sweet moment to take the game in instead of just immediately being thrown into the game, and I’m able to plant the seed of the game’s message at the very beginning.

I also made some big adjustments to the narrative to make it crystal clear what my intention was, adding a short intermediary message while the player is filling out the form at the beginning to provide explicit context about the options for labels feeling limited.

In the middle of filling out the form, the player explicitly reads that the options feel limited.

Next, I decided that instead of the bird choosing words at random, the very first word she picked would always be the exact same to allow me to be more intentional about setting the scene for the beginning of the core loop.

I decided that no matter what, the first word that the bird picked would be the choice of introvert/extrovert.

This felt like a good label to start with since I don't think it applies perfectly to anyone, which allowed me to explicitly call out the absurdity inherent in the label before offering the player the core loop decision, hoping to make players more likely choose to let the bird take the word. After they choose to exchange the word, I explicitly call out after the word the intended effect: that the sentence “made just as much sense either way”.

The moment where the bird chooses the word and the player reflects on the arbitrary binary of the choice.

The player is offered a choice whether or not to keep the word.

After exchanging the word for one of the bird's gifts, the silliness of the binary is reinforced through another message.


Next, in response to feedback about the loop being unnecessarily repetitive, I shortened the length of messages involved in the core loop after the first decision is made. During the second and third loops, I call out that once again the player is supposed to reflect on whether or not the label feels important to them, again to explicitly reinforce the message of the game.

After their first choice, the player repeats the loop on a shorter, single screen that reinforces the main question: is this label important?


Finally, I added in an end state to the game, taking inspiration from a suggestion during the initial playtests to incorporate an end as “waking up” from a dream. Adding an end state also prevented any confusion about the infinite loop, especially for players who have exchanged every word and can no longer continue.

Allowing players to "wake up" after a couple loops respects the fact that players might choose to keep the labels they feel especially connected to.

To make sure that players understood the goal of the game, however, I decided not to offer the choice of “waking up” unless they’d gone through three core loops. After these three loops have been completed, instead of seeing the message above, they see a third option asking whether or not they were happy with what was on the screen. If the player wakes up through either of these methods, the screen simply shows the “identity” form, giving players space to reflect.

Once the player has completed multiple loops, perhaps keeping some labels and exchanging others, the following loops now offer them the choice to wake up.


With these changes in place, I was feeling much stronger about my game’s ability to communicate its intended message, so I continued with one final playtest to test whether or not it was successful.
Playtest 7: Joyce
Location:
In class
No. Playtesters: 1
Demographic: Female college student
In my final playtest, I received a lot of positive feedback: Joyce said that she really liked the game and described it as simple but effective. Furthermore, after playing she was able to correctly describe the message of the game.

One other small moment of delight happened on the screen describing how the new sentence with the image made “just as much sense”: She let out a small laugh!

As intended, she chose to let the bird take the initial word “introvert,” but chose to keep some of the other labels on the screen since she said she didn’t want to let those labels go. This made me feel GREAT about the success of the game in sparking decisions that encouraged players to actually reflect on the labels they wanted to keep.