Provide a brief overview of the project,
including the context and objectives.
What I did
Describe the problem you aimed to solve with this project.
Tools
Outline the research methods used
(e.g., user interviews, surveys) and summarize key findings.
What is Catan?
Catan Universe is a board game adapted online
on web, steam and mobile platforms. I started
playing again during covid on the web browser
version. They launched a UI update 2.0 DURING
COVID lockdown.
UX ISSUE
1. Invasive Welcome Screen
It’s been quite some time since I wanted to get back to Catan and play a few games.
I’m welcomed on the landing page with an “Important Message” pop-up about Catan tournaments.
Here are the issues I found on this pop-up screen:
Relevance. I did not log-in for a long time, hence there’s a little chance I’ll be interested in tournaments
White space. I understand the intent for elegance and maintaining focus on the text and call-to-actions but, the message itself and the t-copy is poorly done
Text copy & design. Same style and color for every word, nothing stands out. If this is important information why not put it on this screen instead of redirecting users on the external Discord server.
This is the first screen I see when landing on Catan Universe Browser Game.
SOLUTION
Add the Discord link + external link icon for better visibility
Change CTA copy to be more clear
Change title and text in bold for visibility and readability
Add a close button (in coherence with the other screens interfaces)
UX ISSUE
2. Log-in and Password Reset
Stepping-in the bigger issues here, it took me around 4 minutes
to reset my password and log-in (no, this is not normal).
No error prevention. There’s no error prompt when mistyping an email address. I didn’t understand why I could not click on the new password button until I saw a missing character in my email.
Legal freaks. This is the second time I’m asked to confirm if I’ve read the Terms of use and Privacy policy, which is blocking me from getting my new password.
Wrong Error prompts. I can see there are two error prompts here but I am not sure what’s really wrong: the code and the password fields are both highlighted in bright red but there’s only 1 error prompt saying “wrong code”. Is it my password ? or my code ?
Legal freaks #2. I managed to update my log in credentials, but… I’m asked to accept T&Cs again before I can log-in (for the third time).
UX ISSUE
3. Unintuitive Game Creation
Some critical information to understand how to create
a game and play are missing and/or are badly delivered.
Issue of information structure. “The Game” is the first option I’m given, what are the others?
not games? this interface needs better explanations on game options I have.
Both singleplayer and multiplayer “The Game” options have the same description when the content
cannot be adapted for both, creating a confusion for players.
Confusing text copy. The “Scenario” and “Activate per buying gold” are out of context.
Are scenarios games? Do I need to purchase something to activate the game?
SOLUTION
Adapt the content to the context and chose careful vocabulary that matches
the real world for better understanding (Jakob Usability Heuristics).
Add an option to buy expansions if they are presented on the side of the screen.
USABILITY ISSUE
Use of radio buttons instead of checkboxes.
when there are in fact a list of options where I can select any number
of choices (Consistency & Standards).
The “Start game” button has a sun icon associated to it underlying
I can’t play without those. This should be explained somwhere
before so there’s no bad surprises.
UI ISSUE
4. A very crowded HUD
The overall game interface just feels very busy.
For a strategic game like Catan, I really just need
the relevant information so I can focus on my next
move (Aesthetics & Minimalist).
Unnecessary UI elements. I’m not sure this huge vertical menu on the bottom left is
for. Here are 8 small icons that are not necessary
(maybe keep the main settings and the chat?)
All the other elements can be hidden into the settings
icon and shown when clicked if necessary.
Missing what’s happening during another player’s turn.
The visual hints to understand what is currently happening
are too small and going too fast (the bottom left white text,
cards animations, yellow highlight on player’s picture)
(Visibility of System Status)
An example of how quickly a turn goes.
It’s hard to see who is winning.
I can’t easily distinguish key information from each player:
number of points, development cards, biggest army, and longest road.
This is an issue since it’s critical information for this type of
strategic game.
I don’t know which and how many cards I have in my hand.
This is a key information that I need to have in mind at all times
(when it’s my turn or when exchanging with other players).
Considering the size of the board, the number of other visual
information and the pace of the game, it’s hardly impossible
to quickly scan what types of cards I have in hand.
SOLUTION
Going back to the previous design would be a good start:
full cards easily recognizable.
Dice button in the wrong place. The most frustrating miss-click
in my life… the dice roll and skip your turn buttons are at
the exact same position and if you’re acting too
fast and misscliked, you lose your turn.
Emojis to replace human interactions.
The only exchange I can have with my fellow AI co-players are
emojis displaying expressions that range from happy, confused,
angry, cocky, or sarcastic (from what I interpreted). The worst
is “impatient” emojis from other players when It’s my turn and
I usually need to think in calm on what will be mly next moves.
Final thoughts
Even though I am not a fan of the new design,
I still play a lot online with friends because
I love this game - it might not be the same experience
for new players who are discovering it now.