What Lurks in the Dark

Finalist in CHI Play 2017 Amsterdam
In a team of 5, we are creating a game that involves crowd participation and integration to the Twitch web platform. It's a survival horror game in which viewers use a website UI to interact with a Twitch streamer playing in real time to affect the game outcome. This game is part of CMU's Audience Participation Game Project.

How Might We:
Create a horror game in which both the player and viewers can interact with each other and affect the game progess + outcome?

My Role:
Designed the game level, visuals, atmosphere, and UX. Lead ideation of game structure and interactions.

Built the front end of the web interface.

First, the concept and prototypes of our game! Then I'll show you how we arrived at this solution.

or jump to the process + design decisions now

MVP of Our First Phase

Game play showing the main player stream, and the viewer's participation UI. Watch in fullscreen for all the details!

Next Steps
Allow the audience to assume a proactive role: viewers who help the player can earn points to unlock more levels of interaction.
- Viewers can create noises and sounds to distract the ghost
- Viewers can interact directly with objects in the game to help or hinder the player
- Viewers will spend points for each interaction, more points will be required to hinder the player

Next Steps
Scale the game: create a voting mechanism for when there are too many viewers, and the chat becomes useless.

Why?
By adding different layers of interaction for the viewer, we wish to add more incentive for the audience to take on a proactive role and to create a dynamic streaming experience for both the main player and his/her viewers.

Second Phase - New and Improved Audience Participation UI

Working with Chaoya Li, the lead Interaction Designer, we sketched out our new UI brainstorms so we can visualize our thoughts.

Insights
From our sketches, our vision for the front end was solidified. The sketches will inform our mock ups and code.

Compared with our prototype in the first phase, we utilized all the screen space to create a responsive layout. Additionally, we added space for event triggered menus.

View the current live protoype here!

We created a variety of event-triggered menus for players to interact with. Voting is the main method of determining which event can happen.

Why?
As the game viewers scale, we need to create a way for many viewers to participate at once. Voting leverages the wisdom of the crowd in making choices, and a time-out function eliminates spam and encourages action due to scarcity.

Next Steps Going Forward

We set out to create an MVP in 5 weeks, and we did it! We had great feedback and live demoed with 20+ people playing, and also presented to Twitch streamers and employees.

In our second phase, we built the designs and the framework for the Web UI 2.0. Going forward into the summer and beyond, we will implement the rest of our new features, as well as new game graphics.

View Ideation Decisions

Ideation

To begin the ideation process, we sketched house layouts and discussed how the house layout, atomosphere can affect possible game features.

Why?
The level design of the game is the backbone in which the rest of the game will be built upon, tackling this challenge first would let us be more efficient in brainstorming how other features would fit the level.

Insights
Our first sketches and discussion revealed that we wanted a house with enough rooms for exploration but also feel open.

Eventually we consolidated our ideas and combined it with my own design.

Why?
The house has an “ambulatory” design, meaning the player can move in a circular fashion through the space. We wanted the player to be able to have multiple options to enter and leave rooms during the player’s exploration.

Multiple entryways and doors means the player can gain access to different parts of the house quickly, and also escape from the ghost easier. However, this also means the ghost can follow the player he/she forgets to close doors during his/her exploration. In this sense, we wanted to foster an atmosphere of exploration and uncertainty for the player.

Insights
With the house design finalized, we were able to envision where to place objects in the house and where the player and ghost can spawn.

The next step was to figure out how collaboration was going to work in the game. We knew that we wanted the viewers to have access to separate screens from the streamer, but were not sure if Twitch or an external client were the better option for this task. Before making this decision, we decided to sketch some interfaces to see what exactly our final product would look like.

Why?
Using that information, we could then make an educated decision about which outlet would give us the optimal results for our interface.

Insights
The problem that we were asking ourselves was: how can we show the information from viewer side? The information includes: 1) chatting message. 2) ghost position information.

For the website, we created a basic sketch of what we wanted it to feature. We decided to build an interface for the viewers directly in the website. This way, viewers are able to access the cameras in order to see the location of the ghost, and are able to interact with streamer.

Why?
Originally we thought we could integrate our UI into Twitch itself, however we realized that was not feasible in the initial 5 weeks we had. We needed to move fast, and decided to build our own, simple UI in a website.

Instead, we opted to stream the gameplay on a seperate website where we can easily custom build the UI we wanted for viewers to interact with.

View Implementation Decisions

Implementation

We decided that our game should have a narrative, so that the player can feel more immersive about the tasks he/she will have to accomplish in the game.

Read Full Narrative (5min read)

Refining the in-game UI

We explored a simple UI for the player in the form of a mini-map or radar.

Why?
We wanted the player to be immersed in the game but also have an idea of his/her surroundings, and an actual Heads Up Display would take away from that. We decided the player can press a key to bring up some sort of navigation.

Insights
Streamers have access to the layout of the house as well as the position of the ghost and themselves. This option makes the game more playable. However, it reduces the horror level.

We decided to limit the information the player has to only roughly where the ghost is.

Why?
Players can only know the relative position of ghost to themselves. Because this is the only information about the ghost and the house, the game's horror level increases.

Insights
In this scenario, streamers will try to communicate more with the viewers to figure out the ghost's location, on top of being on edge as he/she explores the house.

Modeling the House

As we moved forward with designing the house, we first figured out what should be in each room, and where the cameras should be facing.

Why?
Having a good idea of where things are makes it alot easier to refer back on when building the house in 3D.

Insights
We found out we could leave some parts of the house camera-free, to produce a gap in the viewer's knowledge. We were also able to think about how each room should look in order to create a better horror atmosphere.

We created the house in Google SketchUp, and imported the 3D model into Unity later on.

Why?
We opted for building the level outside of Unity to take advantage of SkethUp's efficient 3D modeling features. We were able to iterate quickly and import those changes into Unity.

Insights
When we were adding textures to the model, we realized that certain patterns/colors evoke different emotions for a player (familiarity, fear, confusion etc.)

We created 3 iterations of Hi-Fidelity mock ups of the web interface which the viewers would use, and conducted user studies using them to validate the UI design decisions we were making.

Solution 1 has a compact design, we sought to fit everything neatly.

Why?
We wanted to have the map bigger, and we didn't think the chat will be active.

Insights
When testing with users, we found out that the chat is extremely important, and we could only see 3 messages at a time.

In solution 2, we enlarged the chatbox and overlaid the map ontop of the camera stream.

Why?
We thought the map overlaid ontop of the camera stream would look cool and make way for the bigger chat box.

Insights
Although the chat was bigger, users felt the overlay very distracting and interacting with it funky.

In solution 3, we decided to sacrifice the screen real estate in order to fit both the chat box and map.

Why?
We found out that the camera stream didn't have to be as big as the main stream, this paved way for putting the map next to it.

Insights
When we tested this, our users were very satisfied with the layout. Based on their feedback, we decided to stick with this solution.

We implemented solution 3 using HTML/CSS/JS, and PHP for the backend. We also had to opt for still images from the camera instead of a live feed.

Why?
We realized using a live feed for the camera feed was too complicated, instead we opted for a simpler solution.

We loaded the database with a set of still images that would trigger to show a version with a ghost if the ghost was in the room.

Insights
Thanks to our user studies, we were able to code the website knowing the design decisions were validated.

Here's a summary of what I contributed in this project:

What I Did

Designed and implemented the house, textures, and details.

Coded the front end of the website for viewers.

Contributed to the atmosphere and lighting design.

What I Learned

The level design of a game greatly impacts the player experience! From the general layout down to the details.

Sometimes for practicality purposes, a design mock-up must be changed in order to function.

For a horror game, the lighting and atmosphere make or break how scary the game could be.

Here are some more projects of mine

TeamUp
Web prototype of a To-Do List app to show my web prototyping skills.
uCare Mobile App
A mobile health app for elderly care coordination.
View All