Board Game to Mobile Game
Creating a mobile version for Betrayal at House on the Hill
Link to original developer, Avalon Hill and game, Betrayal at House on the Hill.
Overview
Betrayal at House on the Hill is a board game released in 2004 that has spawned a number of spin off versions over the years. I enjoy the exploration, narrative storytelling as well as player driven stories that have grown out of this game. What follows is a concept project for a mobile port. I am treating the game’s rules as my client and the game designer. I will not change the rules of the game, only how it is visualized in response to user needs.
Tools and Methods
Usability testing, competitive analysis, archetypes based on user research, sketching, wireframes, clickable prototype, digital painting to develop polished UI.
Programs: Sketch, Invision, Photoshop
Project Goals
- Maintain the theme, promote the experience that people receive from the original on mobile.
- Take the project from user research, sketching, wireframes, prototypes, polished UI, and game art.
Overview of the game play:
This game is about exploring a spooky house and either defeating the monster, or becoming the monster.
The game takes place in 2 phases.
The first phase, the players explore the house, tackle events and gain items to become stronger. In the process they trigger omens which have a chance to start the second phase.
The second phase of the game is known as “The Haunt.” One of the players becomes a traitor and the other players become the survivors. Traitors and survivors read their new rules and win conditions and play out their scenario.
What do the players want?
Players need to have the rules on hand or they must be easily understood as they play.
Through usability testing on the board game itself, I discovered the most important aspect to the player was their access to the rules. This game has 3 rule books. 1 overall rule book for the game and 2 rule books describing the interactions in the second phase (The Haunt) of the game.
The types of players can be divided into two types. The Strategists and The Overwhelmed
The Strategists require the rules to concoct their best plans and role-play to full effect.
The Overwhelmed want to play the game correctly, and consult the rules to make sure they are playing the game properly. They are intimidated by how many rules this game has.
It became clear that in the mobile version of the game, the rules must be either easy to access or it must be instantly understandable what are rules of the game.
Designs
Below is a prototype of a “normal” turn in Betrayal. The prototype does not include dice rolling and ends before that aspect of the game needs to occur.
The goal of the UI arrangement is meant to give as much information to the player as possible without feeling too cluttered. Anything that needs more explanation will be provided when the player needs that information.
During testing it was discovered that the rules are important to the player. If at any point the player wants to dig through the rules they can reach them at the top left of the screen. During testing, some players didn’t understand the purpose or their goal during the first phase of the game. On the top left, reminders of the players current objectives are available.
Turns begin with the player profile at the bottom of the list on the right dropping. Their turn portrait appears to show a more in depth view of the active player’s stats. The action bar and portraits rise from the bottom. Inspiration for this is from the Pandemic mobile game.
After “Your Turn”, the player’s portrait and the action bar disappears. When it is not “Your Turn”, other player’s portrait and action bar appear. The words “Your Turn” on the action bar would say the other player’s username. This way, the players are aware of what other players are doing.
The action bar is designed to show what players can do in any given room they are in. if an action is not available, (the attack icon in the example) it will be inactive till the player enters a position where they can use that action.
When the player clicks an action, a number of visual cues will appear to help them decide what to do next. In the case of movement, the movement icon shows a selected state, and on your portrait, the value corresponding to that action glows. Movement and speed are connected in this game, so this establishes how many rooms the player can move through. Also, the game field shows the squares the player can potentially reach because of their movement value.
If the player moves but does not expend all of their movement capability that turn, the map cues change to adjust how many spaces they can still move.
Note: In the example on the left, “Attack” becomes available because there is another player in the current room.
If the player needs even more information regarding an action, they can tap the “i” that appears next to a selected action to bring up a modal that explains the rules of that action in detail. This is precaution for any players that want further explanation.
In the examples above, the player enters a new room with a room event, the new room modal appears to all players showing any necessary information they need to know about the room. This room would have the player draw an event card. This forces the player to end his movement for the turn. The move icon becomes inactive and it shows they can not move anymore.
In the case of attacking, similar to movement, the field would show the rooms where your attack will reach. Items can affect the range of your attack, so this would also adjust according to those elements.
Next steps/Conclusion
One thing that I have not completed yet, was exploration of how to emphasize omen cards and haunt roles to convey the climactic tension to the player. Testing showed that the differentiation between item cards and omen cards needed to be greatly increased. The next step for this project would probably be tackling how to signal that rise of tension as more omens appear in the house, and portray the scary feeling of “The Haunt” starting.
