After discussing with the lead developer for the site, I figured it would be best to spend a little time informally interviewing players both current and no longer returning.
I interviewed 10 people in total and found the two largest core insights after synthesizing the data:
Because the community has stagnated for so long, it has become rather tight-knit. Newer players felt they couldn't fit in. The first change we made was to provide tooltips for users unfamiliar with the rules of the game. See example below:
People also felt there was a level of toxicity that permeated the community, largely due to how hardcore the remaining players were. We began to implement a more comprehensive report feature as well.
The general philosophy I utilized was to prototype with the most “difficult” scenario in mind. When choosing the screen size to design for, I used the smallest Mobile frame Figma had to offer, an iPhone 8. (375x667) When designing the game interface, I designed around a situation where there would be the maximum number of players (10).
iPhone 8 Frame 375 x 667 (Mid-Fi)
iPhone 8 Frame 375 x 667 (Hi-Fi)
iPhone 16 Frame 393 x 852 (Hi-Fi)
In redesigning the desktop site for mobile, I needed to make some big considerations as to the placement of elements onscreen.
King Arthur’s knights now discuss their quest around a 2x5 rectangular grid rather than a round table. The quest tracker, originally in the center of the table, now moved to the top of the screen and enlarged to ensure everyone can see the game's status.
Putting a non-interactable element on the top brings down the grid of player cards by 85 px and makes it easier on the thumbs to reach the top row of players.
The player card looks deceptively simple at first glance. However, many crucial pieces of information need to be communicated throughout the changing game state. By default, the only info on the player card is the player icon and the username.
However, the following also needs to be conveyed throughout the game:
• If a player has a particular role, like Merlin or Percival
• If a player is choosing the current quest (has the crown) or will be choosing last should the mission be rejected enough times (has the hammer)
• If a player has been selected to be on the current quest (has a shield)
• Whether a player approves or rejects the quest
• If another player is highlighting their card
• If they are claiming to be a certain role
• If they have the Lady of the Lake
Continuing with the philosophy of designing for the most “difficult” scenario, I designed all of the elements and their positions on the player card simultaneously. This ensured that should all 7 of those optional pieces of information be displayed simultaneously, the design could still be understood and fit the smallest screen size possible.
Color was one of the trickier elements when it came to redesigning the web app.
In the original site, the same green is used as the button color for both “Approve” and “Success.” Similarly, the same red is used for the “Reject” and “Fail” buttons. While the goal is to try and discern a player’s loyalty based on their votes and their behavior, approving a quest is not necessarily a sign a player is good.
Oftentimes, a quest with only approvals means the evil players liked it, too. Similarly, being skeptical of a mission and rejecting it doesn’t mean that player is evil as well. New players very frequently associate rejecting with being evil, even in the physical board game version. I decided to use Green and Orange as dedicated “approve” and “reject” colors. That way, newer players won’t associate the color with any particular role.
I recorded the prototype user flow starting at the point the user logs in and creates a new room up until the end of the first round of the game. Here you can see the most important functionality of the site and its usability in this updated mobile version.
