CivRep: Game Design

Project Overview

CivRep is an Early Prototype of a transformational civic learning RPG.

CivRep Team: Simon He(Artist), Jeesub Lee and Martin Ke(Programmers), Yuji Sato(Producer/Writer), and Me(Designer/Co-Producer).
My Role: Game Designer / Co-Producer

Project Duration: 14 Weeks (2021)

Prototyping Platform: AirConsole

Project Goal: To help our client translate an in-person multiplayer activity into a single player role-playing game for mobile devices.

What did I do?

Transformational Design

We applied the transformational framework to help direct our design to create the player transformations.

Visit the Figma board where we discussed and organized our research.
Research

I used Figma to organize the research and guide our team discussion.

After researching on our domain topic, I put together a rough sketch of the framework, created separate brainstorming boards for different research topics, identified key questions, then brought in the team to have them throw in their ideas and talk through their thoughts.

Examples of Transformational Design

To build-up the role-playing experience, I structured the metrics and factors for becoming a representative in real life, and designed the “political capital” currency.

Exploring different icons to effectively communicate the concept of
“political capitals”, not just “coins”
Why Political Capital?

The term “Political Capital” came from research and conversations with our client. It can be described as the invisible string that is connected to all policies and political relationships. I hoped the political capital currency would incentivize our players to think ahead by illustrating the trade-offs and consequences of various decisions.

Paper Prototypes

All playtests were done remotely. I made and tested some “paper prototypes” based off of the original activity design from our client—each player played as a representative on a city council, where they would vote on bill proposals that help improve their city.

Visit the First Paper Prototype
Google Slides + Zoom

I recreated the activity on Google Slides by adding some simple UI, visualizations, and hyperlinks to show results based on testers’ decisions.

I designed for 5 players because we wanted to keep odd number players to avoid ties during voting sessions. We sent each player specialized information separately, wanting to see how it could affect their discussion.

Visit the Second Paper Prototype
Iteration: Mobile Mockups

For the second prototype, I iterated on the game flow by adding more bills to observe the progression, and experimented new ways to convey informations, such as receiving letters from your constituents.

Visit the Figma Prototypes

I prototyped mobile mockups on Figma, and exported them as png files. We mimicked “AirConsole” by screen-sharing the slides on Zoom while sending these png files to the testers through Slack direct messages.

This is what the playtest looked like. I screen-shared on Zoom, using google slides as the main screen, where I could manually moved the icons as they voted, and on the side was a timer + some basic information and hints.

It was an efficient and simple way to observe players’ behavior and reaction.

We discovered that how players digest the information, then form their own position is critical to structuring meaningful conversations, so I iterated on how to better engage our players with the content and incorporate different perspectives.

Structuring Game Flow

Structuring Conversation: To observe how players digest the information
Player Flow Map (1) – this was for our second paper prototype, testing on how to better structure the discussion.
Visit the Player Flow Map Iterations on Figma

For our second paper prototype, I explored different ways of “feeding information” to help structure the conversation. I designed so that each player would receive information at different times, to help give them buffer time to read, digest, and discuss with each other.

Visit the Game Flow Mockup for first prototype on AirConsole
Visit the Game Flow Mockup for second prototype on AirConsole, where I made PC screen and 3 sets of mobile screens mockups.
Game Flow and Mockups

I created mockups of both PC and mobile screens on Figma to help communicate the game flow with the team.

Because it’s a small-scale prototype, Figma was an efficient choice for laying out the mockups, while including the team, so they could fill in the art, narratives, and necessary notes where they saw fit.

Choice-Based Interaction Map

To prototype our first interaction map, I used Miro to communicate the interaction structure with our writer. Our writer created the flow map on Miro, then I visually translated them onto Figma.

Visit the Mobile Mockup on Figma
Visit the Clickable Prototype

Playtesting and Iterations

We began with a multiplayer activity where inter-player discourse was the most engaging aspect. During the transition to single player, we phased out discussions with other forms of player engagement. We created experimental settings to observe player behavior and conversation, which helped us capture key moments of interaction and recreate them in a single player setting.

Adjusted From 5 Players to 3 Players

After a few playtests, we noticed having 5 players was too chaotic for us to gather meaningful observation, so I adjusted to 3 players to allow for more balanced player interactions.

Engaging with the Content

I explored different narratives and visualizations to reinforce empathy while conveying information. I also wanted to guide the players to digest and form their own positions.

Creating NPCs and Conversations

In multiplayer, we found that it worked best when one of the playtesters acted as a “host”. We simulated this by creating an assistant NPC who helped drive forward the game, and I designed the interactions with the citizen NPCs to increase player engagement.

Visit Next:

CloudWorks: System Design | Surgical Tutorial | Zodiac Race: VR Storytelling

Download Resume