The Resistance

Project Timeline

GRDS 387 – Interface Design
3 Weeks, Fall Quarter 2018
Savannah College of Art and Design

“TRANSFORM A PHYSICAL GAME INTO A DIGITAL EXPERIENCE.”

This project was completed for my Interface Design course during my visiting semester at Savannah College of Art and Design.

Our assignment for this project was to convert a physical game into a digital experience. We chose to digitize a game called The Resistance. In this game, members of the resistance carry out missions to defeat the government, but have to avoid being foiled by the government’s spies.

PROCESS

How to Play

At the start of the game, each player receives a character card that tells them if they are a member of the resistance or a government spy. Their identity remains a secret to other players; only the spies know who they other spies are.

The game consists of a series of missions, and each mission is made up of a set number of players. Once selected to go on a mission, players have to choose if the mission should fail or succeed. These votes are anonymous. Resistance members have to choose succeed, and spies can choose either option. If one fail card is put down, the mission fails and the spies are one mission closer to beating the Resistance.

Transition to a Digital Interface

In several ways, the game can be simplified by translating it to a digital experience. The current physical game relies on several different types of cards, tokens, and markers, and game-play is disrupted if people misplace or lose these components. In a digital experience, the interface can keep track of things like whose turn it is and which team won each mission. The variety of tokens, cards, and markers can be simplified into buttons and screens that are presented to the user.

A major part of this game is the arguments and discussions that ensue. I wanted to make sure we kept this element, so my group designed a solution for friends to play in the same room as one another.  My group discussed implementing chat features for long-distance play, but ultimately we felt the direction that was truest to the physical game was playing in the same room as your party.

User Personas

My group generated around ten user archetypes to get an idea of the range of people who may play our game. I sorted these archetypes along 2 x 2 matrices, and noticed a few patterns emerged. There were noticeable clusters of players who were experts who played for leisure (red), emotional novices (blue), and social, busy players (yellow).

My group used these clusters to define our three user personas for the project. The personas below were designed by my teammate, Luthfan.

Current User Journey

I created a journey map to explore the current journey users experience when they play the physical game. It was difficult at first to synthesize all of the information down, but it was very useful to make myself illustrate the cycles users go through.

This journey map helped me identify several opportunities to improve the flow of the game. Most importantly, I needed to simplify the on-boarding process to ensure players wouldn’t abandon the game. I also found areas where the game could give players additional guidance to clarify the instructions.

Card Sorting

Once we determined what features we needed to include in our digital game, my group performed a card-sorting exercise to decide where these functions should exist in the game. Below is an overview of our findings. We noticed that we similarly group basic features to begin a new game, key features during game play, and settings. This exercise informed the structure and flow of our digital game.

DESIGN

Wireframes

This game is quite complex in that it contains many steps and users must fully understand the instructions to get the most out of the game. It was challenging but helpful working on different iterations of wireframes, because I had to find ways to balance a clean overall design with screens that were informative enough to teach the user how to play the game. Below are images of my initial wireframes and my group member’s wireframes.

After comparing initial wireframes with my group, I drew these revised wireframes. I also created wireframes on index cards so we could test our designs with potential users.

Final Design

Below are a few select screens from our digital game. The UI was designed by my teammates Ashlyn and Luthfan. I took these screens and created a prototype in XD.

New User Journey

I created a new user journey showing how users interact with our digital game. The core part of the journey dealing with game-play is very similar to the old user journey. This was intentional – I wanted to have our digital game stay true to the feeling of the physical game. We improved the physical game by making the instructions an integral part of the digital game. Users can view the instructions at the start of the game, but the game will prompt them with instructions as they play.