Codenames

The Codenames boardgame designed for online.

YEAR

2020, ongoing

TYPE

Collaborative,
with a Project Manager
and Fullstack Developer

ROLE

UX, UI

PROBLEM STATEMENT

“How can we make the Codenames online experience more user friendly?”

APPROACH

Codenames is a popular boardgame. Due to the pandemic, boardgame cafes were not an option for those who wanted to play with their friends. Online alternatives began emerging up after a couple of months, but there were complaints on the user experience and confusing UI of the game board.

We wanted to apply UX practices to improve the online experience, while trying to maintain the boardgame experience as much as possible. Our goal was to produce an MVP, then iterate to improve.

RESEARCH METHODS

  • Feedback
  • Market research

Market research

We got some feedback from users who tried other versions, and the market research was conducted on current versions available online, primarily from the most popular one, and the official one.

KEY PAINPOINTS

PROJECT GOALS

  1. Create a userfriendly UI
  2. Break down the options to reduce cognitive load and make the user's goals for each step more concise
  3. Separate the spymaster and player gameboards and their user flows

USER FLOW

User flow sketch, and thinking of possible gameboard settings/features
The refined user flow

GAMEBOARD FEATURES

  • Switch teams and roles
  • 'Game start' button available to spymasters
    - prevents users from switching roles or teams and start the game
  • Reset Game/New Game
  • Timer
  • Track score
  • Declare winner
  • List of players and their roles
  • Color contrast for accessibility

Nice to haves:

  • Chat function
  • Game log
  • Keep track of each team's wins over multiple rounds (given that it is in the same room)
  • Mobile/responsiveness
  • Bigger text
  • Microinteractions

WIREFRAMES of the gameboard

Sketch of the gameboard

Spymaster gameboard

Spymaster gameboard with only the start game button visible
Spymaster gameboard after the 'Game Start' button is pressed. The spymaster has the option to start a New Game, End Turn, turn the Timer on and off, and switch teams/roles
Spymaster gameboard with the Timer on and the the switch button pressed

Player gameboard

Player gameboard, without the settings available to the spymaster
Player gameboard, once they guess the card and click on it to reveal the agent's team colour
Player gameboard when they click on the switch option

STYLE GUIDE

Style Tile

PROTOTYPE

FUTURE POTENTIAL

We are currently working on coding the MVP. The next steps will be to begin user testing, getting more feedback, and iterating on the process. We will also work to implement the 'Nice to have' features. Hopefully we will be able to get it to a point where the users don't need to be on a video call to play the game.

LEARNINGS

Balancing the requirements of the boardgame and user experience was an interesting part of this project. I enjoyed breaking down the steps, separating the flows, and simplifying the gameboard. In the beginning, I was worried about designing with strict requirements while also trying to simplify the development side of the project. Ironically, I found myself having more creativity within those restrictions and collaborating with others.