Deception - designing a digital board game
Project
To make a digital version of the board game "Deception: Murder in Hong Kong"
Tools
Pen & paper, Figma
Role
Designer, together with five other people
"Make a tablet-phone version of the game, made to be played by co-located players"
Process
Playtesting the physical game
Ideating & Sketching
Prototyping in Figma
Background
This project was part of the course "Graphical interphases" on the master's programme. The project lasted for 2 weeks and therefore there was only time for one iteration. The game "Deception: Murder in Hong Kong" involves one player to be the murderer, choosing a means and a clue to the crime. There is also one accomplice, and one forensic scientist, the latter giving clues to the other players to guide them closer to guessing who the murderer is. The requirements of the project was that the game should include one tablet view and a phone view for each player. The players should also receive their role inside the game.
Playtesting
In order to get an understanding of how the game works, as well as what elements are the most essential, we played the physical board game a couple of times. This also made it easier to understand the flow of the game, what is done in which order, and what actions should be made by different roles. We also tested the game with different number of players to see how this would affect the game play.
Ideating and sketching
The whole group brainstormed on different ideas of how the layout of the screens should look. These were then sketched on paper to visualize the approximate placement of each element as well as to give the group a common view of the layout.
Prototyping
The paper sketches were brought to Figma to be transformed into more hi-fi digital prototypes. Here we created components to make the recurring elements of the screens consistent. Each member of the project group was assigned a specific part of the game to design.
Final concept
For the final concept of the game we tried to make it as similar to the physical board game as possible, both in visual design and in functions included.
Insights and learnings
Decision making
When designing, a lot of decisions need to be made regarding both large areas and smaller details. In this project I realized that not everyone has to be part of every decision, but that it is better to divide the group to work on different parts, making the work more efficient. However, where big decisions are needed, the whole group should be involved.
It is easy to get stuck on details
Very early on we got stuck on details in the design. When sketching rough paper prototypes small details might not be needed as the goal is to get an overview of the different screens needed. The details can be brought in later, when prototyping in higher fidelity.
Dividing the work requires a common vision
We decided to assign different screens of the game to each group member to make the work more efficient. However, we had not set a style guide or an inspiration board, making the designs look rather different since everyone had a separate vision of the design. Setting up such a thing would have given us a common understanding of what the design should look like.
