Bit Heroes Connect

In partnership with:

A group mobile icebreaker game

Overview

White Duration2.png
noun_team_2837544.png

Project duration:

8 weeks

WhiteTools.png

Tools Used:

Unity Engine,

Visual Studio, 

Aseprite,

MagicaVoxel,

Adobe Photoshop,

Figma

Team Size:  

5 individuals

07fe4b6b-f842-4ac1-8ddf-b1e7b78a8fd9.png
WhiteRole.png

My Role:

 

Design major game flow and intended user experience.

Designed and implemented major gameplay systems such as interactions and in-game economy.

Scripted and built a modular scene transition/debugging tool that allows designers to efficiently test and deploy their code.

Improve game flow and gameplay mechanics.

Prompt

Traditional Visits By Police Officers to local Schools are becoming ineffective,  there are less engagement and interaction between police officers and youth during these routine annual visits.

 

After the age of 12, children are often hesitant to engage Police Officers in public, therefore they are less likely to interact with them. However, as authority figures in the public, law-enforcement agencies need to promote trust and strengthen their relationships with the community starting with better engagement with the youth of today.

There are three major issues and can be addressed:

5179583554947.image.jpg

Old Teaching Technique

1b76c499bd4e4f7d82b0c3e0f71c03cc.jpg

Unengaging Medium

AR-190419730.jpg

Intimidating

Appearance

Challenges and Goals

kids-apps-416x416.jpg

The youth of today experience engagement with their immediate surroundings through technology.

 

By consuming media and interacting with each other through social means such as playing games and watching movies

Using existing technology, we can leverage this engagement to improve their interactions through a collaborative video game session.

Design Challenge:

 

Create a mobile game that can promote learning, engagement, and interaction between youth (ages 8 to 12) and police officers.

noun_goal_2511218.png

Goals:

  • Create a team-based collaborative experience

  • Promote engagement between players and assistants (who will be played by police officers)

  • Incorporate a positive role model into the experience

boys_playing_pokeman.jpg

Main Design Process

 
Design Process.png

The main design process used for this project involved extensive testing and reiteration in order to produce a prototype with the desired results.

 

We held multiple playtest sessions with the intended audience to gather pertinent data that can be used to further narrow our design goals. We then refine and analyze feedback in order to include changes in further prototypes that could produce results closer to our design goals.

Design Personas

 

Designing for a specific end user usually requires research into specific personas, since the game is designed for elementary school students aged 8 to 12. We came up with some main design personas that we used to construct the intended experience around.

img20200113_11173713.jpg

Our first user persona is Amy:

She is our typical user for the game with traits that  we find are most common for children within the age span.

Amy is a player that can communicate and engage with most other players

Our design decision attempted to focus on her traits and personality the most. 

She is also very interactive and likes to play team based games and activities.

Our second user persona is Ben:

Ben is player with ability to interact with many players around them, Ben also prefers a very interactive play style.

Ben is also more focused player and likes a competitive environment for games and activities.

Our design decisions are made in mind to allow players such as Ben to feel motivated and engaged during a team based game. 

Our priority is to promote team based activity while allowing for a sense of competition through aiding and helping other players.

img20200113_11170943.jpg
img20200113_11160627.jpg

Our third user persona is Claire:

Claire is a player with a more reserved play style, her personality is rather shy and she would prefer to play games alone rather than in large groups.

Claire also represents a significant design challenge for our design process to a make a group based game.

For Claire we had to approach certain design decisions through Empathic Design lens.

 

We learned a lot by including design practices and methods that would make our game more inclusive towards players with a more reserved play style.

Play Design Matrix 

Group 7.png

Play matrix of our game compared to some popular games consumed by our target demographic of players (ages of 10 to 12). Our focus during design was to on the social and simplicity aspects of the game design to play in order to create a group experience where players of all levels can contribute and participate in a common shared objective.

Basic Game Flow

IMG_20200113_191639.jpg

Find

Find Bots.png

Find bots by looking through the AR camera and tap on them to interact!

Recharge

Battery Empty.png

When you run out of energy find an assistant to recharge!

Gather

Bots Capture.png

Tap on bots to generate bits, collect them as a group!

Transfer

Energy Transfer.png

Transfer Bits together as a group to recharge UNITED!

Share

Trade Bits.png

Share bits with your teamates to increase the total amount of bits!

Victory

Victory.png

Achieve Victory as a team!

Interaction Loop

The design of the game is to facilitate interactions between players and assistants which can be assigned to police offers. The game is meant to create organic conditions of which players can interact with each other in order to strengthen communication and break the ice.

Phase flow summary

06c4ee17-ba38-4158-bdb9-41014d113cb2.png

promoted interactions

Our main loop emphasizes on group interactions and a common objective of gathering fictitious resources known as bits. While individual play is possible, group interactions such as trading bits and looking for bots together as a group is heavily encouraged. Assistant players (usually played by police officers) act as teammates that help other players replenish their energy needed to help to keep them going.

The promoted interaction here is sharing bits between players (the more players share with each other the more bits they end up getting) and recharging (players and assistants).

 

Visual Narrative Character

menu screen.PNG
Unity and United.PNG

Two superhero characters were commissioned and added the game to provide players with a sense of narrative goal. The goal of the game is to gather energy that is needed to power their suits. Both of these characters are represented on transition screens in comic strips.

Trade Prompt.png

Unity

Instructions.png

United

United Pixelated Start.gif

Technical Design Contributions

 

Technical Design always starts on papers where main concepts and design ideas are solidified and described, at this phase many systems are still prototypes and may not make it to the final design of the game. However, due to the easiness of using paper to prototype systems, it is almost always a preferred way of designing major in-game systems and tools. 

1. Modular Scene Transition Tool:

thumbnail_image2018-06-25-111946-1.jpg

A specialized tool was used for this particular project with the following requirements:

  • A rapid and modular scene transition tool to allow for easy plug and play of scenes.

  • Allow designers to save time by automating the scene transition process based on a modular design. There would be no need to modify or manually change scene indices.

  • Utilizing a finite state machine, the project becomes scalable and expandable with a modular number of scenes and transitions.

2. Main In-Game Debugger

DebugMenu2.png

Main Debug Menu Tool allows other designers to quickly test newly deployed code without having to sit through splash menus or playing the game to reach a specific scene or sequence of events.

 

This is achieved with the extension of the use of the finite state machine (FSM) previously designed for the scene transitions.

 

The normal flow of scenes would only occur with the progression of the game, with the debug menu in place, any state corresponding to any scene can be loaded through the main debug menu without having to play through the game in its entirety.

Before deployment

BeforeDebugMenu.png

average time spent per test session:

5+ minutes

After deployment

AfterDebugMenu.png

average time spent per test session:

< 1 minute

3. Improving the Game Flow

In the traditional version of the game, players would need to have their in-game batteries charged by assistants, the would also need to share their progress with each other the same way to progress through the level, this was achieved by entering a 4 digit code that was unique to each player.

 

However this process was slow and prevented players from getting back into the game to join other players.

Interaction Screen 2.png

Before revision

Fluidity Chart.png

Players waiting to get back to the main game loop ultimately limited the experience of the game

Solution: Use existing tech (QR codes)  

to speed things up!

Interaction Screen.jpg

A quicker method of replenishing player's in-game battery thus putting them right back into the main game loop

After revision

Improved Game Flow

Fluidity Chart.png

4. Visual Redesigns

Collected Bots.png
GoldBot Example.png
Sprite-0002.png

Photo gallery: