CivRep is an Early Prototype of a transformational civic learning RPG.
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.
An overview of CivRep:
What did I do?
We applied the transformational framework to help direct our design to create the player transformations.
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.
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.
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.
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.
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.
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.
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
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.
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.
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.