Arish Dubash

Menu

Improving game status indicators in Colonist.io

Improving game status indicators in Colonist.io

Improving game status indicators in Colonist.io

Improving game status indicators in Colonist.io

Year

Year

2020

2020

2020

Client

Client

Colonist.io

Colonist.io

Colonist.io

My Role

My Role

My Role

Sole UX Designer

Sole UX Designer

Sole UX Designer

Overview

Colonist.io is an online multiplayer game that serves as an alternative to the classic board game Catan. The game captures the essence of Catan, offering a digital platform for players to enjoy the game with friends or other players worldwide.

Colonist.io is an online multiplayer game that serves as an alternative to the classic board game Catan. The game captures the essence of Catan, offering a digital platform for players to enjoy the game with friends or other players worldwide.

Colonist.io is an online multiplayer game that serves as an alternative to the classic board game Catan. The game captures the essence of Catan, offering a digital platform for players to enjoy the game with friends or other players worldwide.

Colonist.io is an online multiplayer game that serves as an alternative to the classic board game Catan. The game captures the essence of Catan, offering a digital platform for players to enjoy the game with friends or other players worldwide.

(Scroll)

Overview

The primary focus of this project was to enhance the user experience for Colonist.io – an online alternative to the popular board game Catan – by designing features that help players keep track of critical game statuses.

I aimed to improve the following 3 indicators: when a player…

1

Has 8+ resource cards in their possession

and risks losing cards if a 7 is rolled

2

Holds the Longest Road or Largest Army

and consequently has 2 additional Victory Points

3

Has the most Victory Points

and therefore also the lead

These features aimed to improve gameplay clarity, ensuring that players are always aware of their current standing and can strategize effectively.

Overview

The primary focus of this project was to enhance the user experience for Colonist.io – an online alternative to the popular board game Catan – by designing features that help players keep track of critical game statuses.

I aimed to improve the following 3 indicators: when a player…

1

Has 8+ resource cards in their possession

and risks losing cards if a 7 is rolled

2

Holds the Longest Road or Largest Army

and consequently has 2 additional Victory Points

3

Has the most Victory Points

and therefore also the lead

These features aimed to improve gameplay clarity, ensuring that players are always aware of their current standing and can strategize effectively.

Before we begin…

Essential game terminology

To help you understand the important concepts in this case study, I've included a few definitions of key terms used in Colonist.io.

While these terms won't help you understand how to play the game in its entirety, it will help you understand the essential concepts addressed in this case study.

Understanding the problem

Addressing community complaints

There were growing complaints from the online community about not intuitively recognizing which player held the Largest Army or Longest Road. These issues were affecting the overall gaming experience, leading to frustration among players. Recognizing the importance of addressing these concerns, the founder of Colonist.io approached me to strategize a solution.

To understand the extent of the problem, I conducted user interviews with 5 participants who were familiar with Catan (the board game) but had not played Colonist (the online alternative).

To understand the extent of the problem, I conducted user interviews with 5 participants who were familiar with Catan (the board game) but had not played Colonist (the online alternative).

Assessing Player Awareness with Gameplay Screenshots

I presented research participants with the following screenshot of Colonist.io gameplay:

I asked the participants to describe their observations and verbalize the in-game events depicted in the screenshot. This approach allowed me to assess their awareness and understanding of these critical gameplay elements.

The three key elements I focused on for feedback were the following:

A player with 8 cards

The green player (Kylia 🟢 ) has more than 7 resource cards, and therefore at risk of losing half of them if a 7 was rolled

A player with 8 cards

The green player (Kylia 🟢 ) has more than 7 resource cards, and therefore at risk of losing half of them if a 7 was rolled

A player with 8 cards

The green player (Kylia 🟢 ) has more than 7 resource cards, and therefore at risk of losing half of them if a 7 was rolled

A player with the Largest Army

The blue player (Darda 🔵 ) is the only one who's played more than 3 Knights and therefore owns the Largest Army

A player with the Largest Army

The blue player (Darda 🔵 ) is the only one who's played more than 3 Knights and therefore owns the Largest Army

A player with the Largest Army

The blue player (Darda 🔵 ) is the only one who's played more than 3 Knights and therefore owns the Largest Army

A 6-player setup

I wanted to highlight a UI issue where additional players are hidden from view, making their points and stats invisible until scrolled. For example, although the yellow player (Cynthia 🟡) is in the lead with 8 points, her score isn't visible in the screenshot.

A 6-player setup

I wanted to highlight a UI issue where additional players are hidden from view, making their points and stats invisible until scrolled. For example, although the yellow player (Cynthia 🟡) is in the lead with 8 points, her score isn't visible in the screenshot.

A 6-player setup

I wanted to highlight a UI issue where additional players are hidden from view, making their points and stats invisible until scrolled. For example, although the yellow player (Cynthia 🟡) is in the lead with 8 points, her score isn't visible in the screenshot.

Key Insights from Testing

1 of 5

mentioned discarding risk

Only 1 participant recognized that Kylia, who had 8 cards, was at risk of losing half her cards if a 7 was rolled.

This highlighted that the risk of the "discard penalty" wasn’t immediately clear to players.

2 of 5

identified the Largest Army

identified the Largest Army

The subtle circles around the knight count were largely overlooked.

After I pointed it out at the end of our interview, a participant noted – 

"

"

I see it now, but it’s not very noticeable at first glance.

1 of 5

correctly identified the leader

correctly identified the leader

Only 1 participant correctly identified Cynthia as the leader with 8 points.

Most participants mistook David as the leader because his 7 points were visible on the panel, while Cynthia's points were hidden due to the overflow panel.

These insights underscored the need for more prominent and intuitive design solutions to ensure players could easily track these crucial game statuses. The feedback confirmed that the lack of clear indicators was a real problem that needed addressing to improve the overall user experience in Colonist.

Design Process

Moodboard for achievements, icons, and indicators

I assembled a moodboard featuring a variety of game indicators, badges, and related UI elements from both Colonist.io and other popular games. This helped us understand the existing design standards and visual language within the gaming world.

Brainstorming variations

Largest Army, Longest Road, and leader indicators

Using common game achievement elements outlined in the moodboard, I created several variations of solutions to address the issues of card busting and milestone recognition. For each variation, I aimed to incorporate familiar visual cues to make the indicators more prominent and intuitive, ensuring users would find them easy to understand based on their experiences with other games.

Variations for alerting players with 8 or more cards

To address the risk of card busting, I focused on altering the design of the card to make it more noticeable when a player had 8 or more cards. The elements we used to make this stand out included color, outline, box-shadow effects, and an intuitive, yet eye-catching icon on the card.

These visual cues aimed to capture the player's attention and clearly communicate the potential risk of busting if a 7 was rolled.

Stakeholder feedback and decisions

Throughout the design process, I collaborated closely with the game's founder and key stakeholders. They preferred subtle indicators over flashier ones, wanting to ensure that the indicators didn't detract from other elements of the game. In response to their feedback, we kept the design simple:

  • For the Longest Road and Largest Army, we chose to "golden" the road and knight count indicator icons, respectively, to signify these achievements.

  • To indicate the risk of card busting, we opted to simply change the resource card color to red when a player had 8 or more cards.

  • For the leader indicator, the stakeholders were torn between the designs presented. They requested further research to determine the best solution for clearly identifying the leader without disrupting the game's visual balance.

Additional testing for leader indicator

Given the mixed feedback from stakeholders regarding the leader indicator, I decided to conduct additional testing by casually interviewing avid Colonist.io players. The goal was to determine which indicator design was preferred and why.

During these interviews, I presented several design variations and asked players for their opinions on each. Interestingly, a recurring theme emerged: many players expressed concern about drawing too much attention to the current leader. They explained that prominently indicating who was in the lead could lead to unwanted attention, potentially causing alliances to form against them and increasing the likelihood of being targeted.

One player mentioned, "I like to fly under the radar when I'm winning. If everyone knows I'm in the lead, they'll start ganging up on me."

This feedback highlighted an important aspect we had initially overlooked. While it is crucial for players to have visibility into game standings, it is equally important to maintain a level of subtlety to preserve strategic gameplay dynamics.

However, the issue of additional players not being shown in the panel remained a significant problem. Players noted that not being able to see all participants at a glance was frustrating and detracted from the gaming experience. The real problem, therefore, was not about indicating who was winning but rather addressing the UI's overflow issue.

Conclusion

What's next?

Based on the insights from additional testing, it became clear that the issue of hidden players and their points due to UI overflow was a significant problem that needed addressing. However, my engagement with Colonist.io concluded before this issue could be resolved. The overflow issue was added to the roadmap for future consideration, highlighting its importance.

What did I learn?

This project provided several valuable learnings:

  • Importance of User Feedback
    Engaging with users and gathering their feedback was crucial in identifying and prioritizing the most impactful issues. The initial hypothesis about leader indicators shifted when users expressed concerns about being targeted.

  • Balancing Visibility and Subtlety
    Designing UI elements that are noticeable yet not distracting is a delicate balance. The preference for subtle indicators that do not detract from the gameplay experience underscored the need for thoughtful design choices.

  • Adapting to Stakeholder Preferences
    Collaborating closely with stakeholders and incorporating their preferences helped ensure that the solutions aligned with the overall vision for the game, even when it meant making compromises.

While the project ended before implementing the solution for the UI overflow issue, the experience reinforced the importance of user-centered design and the need for continuous improvement in enhancing gameplay experiences.