This article is a collaboration with partner Justin Smith, Head of Product at Officevibe, and myself. For all Catan and UX fans — we hope you enjoy it.
Coping with Redesign: Catan Universe
How you can easily ruin a product (and your users’ lives) with a redesign that ignores core UX heuristics
Living in one of the top global pandemic hotspots when the Covid-19 crisis began, I started to seek a sense of human connection and fun to help me cope with the quarantine. Instead of staying stuck at home in the negativity vortex of news and social media, I figured as a professional product designer and definitely un-professional gamer that finding a fun game would be a positive outlet and way to spend my hours.
During the pandemic, video games are seeing a massive surge in popularity. Staring at screens is the new social. In a March 2020 survey, video gamers in the United States reported that they spent 45 percent more time playing video games amid the quarantine. Interest in multiplayer games is surging as people seek experiences they can share with friends while staying safe at home. For me, one game in particular hooked me and helped me cope while Covid-19 was at its peak in my city : Catan Universe.
Catan Universe is a free-to-play multiplayer online game version of the original Settlers of Catan board game released in Germany in 1995, where your goal is to harvest resources that will help you build roads, settlements and cities. By doing so, you get victory points which are needed to win the game.
When I came across Catan Universe at the beginning of Covid-19, I started playing and hooked my boyfriend on it immediately. We’d play together and entertain each other while social distancing — our routine was to login and play after a workday to wind down, share our day in the chat of the game, and usually, antagonize each other.
We were loving the game and were thoroughly addicted to its fun, intuitive gameplay, simulating IRL table-top gaming with friends. Sheep were plentiful. Cities were built. Life was good.
Then, on June 29th, the development team of Catan Universe released a much anticipated new UI version of the game — Catan Universe 2.0.
We are super excited to finally be able to officially announce CATAN Universe 2.0 which includes a full menu UI overhaul, a new more flexible in-game currency system and groundworks for exciting new content in the future.
OMG. A new update to my beloved game / addiction? Best. Pandemic. Ever.
But, after our First Time Experience with the new version, we quickly felt something was horribly wrong. What… what have they done? We felt confused and disappointed. We both work in product and know that users hate change. But this was something else. Many elements in the UI made less sense and the “improvements” seemed to only make things worse. So, we went to validate on STEAM if we were the only ones feeling this way.
And people from the STEAM community, were…not happy:
This new interface is terrible. The actual physical look of it is awful. I don’t know why it’s changed…I can’t think of ONE positive thing about the new update. This honestly looks like the opposite of an update. This was a reverse update. — Icavvy
As a Product Designer… Ouch, brutal reviews for the poor Catan Universe product team, who clearly worked hard to improve the game.
As a Catan player… Yeah, damned right, fellow nerds! *shoves laptop*
Instead of raising my sense of connection, Catan Universe 2.0 lowered my faith in humanity… of design. So many principles of good design were upsettingly ignored or violated that I felt triggered as a product designer with every turn I played.
Thinking about it more after I closed my laptop in dismay, I realized that this tragic tale is played out regularly in product design across the world, by well intentioned product designers. This time I was on the receiving end as a user, but I have to admit that I’ve sometimes been on the other side, contributing to a redesign gone wrong. I can now confirm, the experience on both ends sucks.
I hope the details from my painful experience of getting a product design update (which many users never really wanted or asked for) will provide a perspective on key user interface principles and how to approach iterating on them in your designs.
Hopefully, my pain can be your gain to make your redesigns incremental, effective, and less painful for devs, designers, and your die-hard fans.
A few small changes can make all the difference, if you pay attention.
1. Don’t make them think (Recognition, not recall)
Visibility of System Status
The worst for me… I CAN’T SEE THE GAME NOW: the cards, the turn, the warning when more than 7 cards, and I don’t have any vision issues. Are you aware that there are people with reduced visibility? — Sigur
When playing a game, or using any interface, users need to understand the current status so they can accomplish tasks more efficiently.
With the new update, critical system info became much harder to understand and track. Decision-making and taking actions takes much more time now. If you don’t pay close attention to the game, you lose a lot of the understanding in the interface of whose turn it is and where the system is at.
For instance, if you missed a quick animation at the beginning of a turn, you’d be lost. The only visibility of whose turn it is and who is asking for resources when trading is a tiny indicator on top of the screen and light contouring around the avatar.
Look at this example below, can you tell at a glance whose turn it is?
Me neither. What the hell is going on.
Another example of poor status visibility is understanding who is winning (has more victory points or development cards) and how many cards are in your hands. These are basically the core of any board game. Looking at the top of the image above, it’s challenging to see which number represents resource cards versus development cards and victory points. They look so similar in format and size of importance.
Instructions on the current state of the game should be always visible or easily recognizable whenever the users are looking at your interface.
Try to get in the heads of your users, so they don’t have to think.
With Great Animation Comes Great Responsibility
(The) animations slow down the game too much and UX is worse in my opinion. I think a table board has to be as dynamic as you were with your cards over the table.
Please, try to respect Kreuber family’s game spirit and play some hours before releasing an update. — Chaiki
Interface animations can delight users while satisfying requirements. It feels good.
Seeing the amount of cards dynamically fly around the board was enhancing the gameplay experience. Remember, we play games to have fun, together.
Seeing 3X the amount of cards flying into my hands into a fat stack, while my opponents were blocked by the robber was sooooo satisfying. Conversely, seeing them fly into my opponents’ hands at a critical moment felt like dying. The animations weren’t a nice-to-haves, they were core to the emotional experience!
Look, I understand that story points (like wheat and rocks) are precious commodities. For every animation a product designer asks the devs to code, another feature or bug might have to be de-prioritized. Sometimes, animations just can’t fit the backlog.
But, the redesign removes some key animations, while adding some that made things worse!
In the new version, only one resource card flies towards the player, whatever the amount of resource they’re receiving. Only a tiny number appears on the avatars after the card animation. So, you need to be super attentive to understand which player is getting more resources during a turn. This completely removes the emotional impact of receiving a large amount of resources, and makes it functionally complicated to follow who receives what. One step forward, three steps back.
Always deliberately balance emotions and functions in your interface designs.
Next, there is the dice animation, another change which seems to be universally despised. While trying to add a feel for the real board game (a great heuristic! keep reading), the change slowed the gameplay to a crawl and everyone wants it removed.
The balance between utility and usability is delicate. Pursue delight, but don’t lose sight of the profiles of your users and their functional needs.
Here, we want it to feel like table-top, but playing online gives us a need for speed. “Let’s gooooo” was probably in the top 3 most common messages I’d read in the chat system before they removed it in the redesign (more on that later too).
Okay, to be fair, it’s not ALL bad. I have to give credit where it is due; one new thing that was delightful from the 2.0 animations is the new highlight system on resource tiles. As you can see above, the tiles where your resources are coming from instantly flash and clearly link the resource tiles to the dice numbers rolled. No more looking around the board to understand who got what from which dice rolled. Kudos. A shining jewel in a storm of confusion.
2. Keep it simple, not simplistic (Aesthetic and minimalist design)
The new UI is terrible. Terrible. The resources at hand was much, much more legible before with actual cards. And the resources given from every roll equally so. It’s all just so obscure now. So abstract. And really, the UI was the only part of CU that made it a better experience than Colonist.io — Crusader
Oops. They went too far. The team clearly intended to simplify the interface for a mobile-first experience; with a broader user base and potential of massive traction, it’s an understandable objective. Personally, I became so obsessed with Catan Universe that I’d happily play on the go, once things open back up, continuing my Catan-Covid bubble in parks, subways and parties where I pretend to anti-socially read the latest reddit threads to hide my Catan addiction.
Minimalism can be a dangerous trend.
Less is more! Simplify! Yes, but no. If you don’t understand the essential elements of the system you’re designing, it can be easy to strip away the indicators of meaning for your users. Whether you are exploring interface design or physics, “Everything Should Be Made as Simple as Possible, But Not Simpler.”
Here are two UX design principles where simplifying can cause more problems than it solves…
Match the system with the real world
New Interface Removes Board Game “Feel”. They replaced card/dice graphics with buttons and tiny icons. The only reason I put up with connection issues was because old interface was attractive and clean. — BreakfastTaco
Creating a match between an online game environment and the real board game environment was the core of the Catan Universe experience. It made each turn fun and reflective of holding a real physical hand of precious resource cards with which I could destroy my opponents.
In the new version, the digital cards were thrown away for a new “more simple” icon system. This stripped away the fun and the meaning. I’m playing a board game, not a spreadsheet.
These icons did nothing but confuse me yet again, as I was often second-guessing myself as to what was going on, the number of resources I was receiving during a turn or the ones I had accumulated, who had the most victory points, or the longest road and other critical representations.
This is horrible!!!! I cant stand the resource bar. I literally am getting a headache trying to look at it. Please allow the option to have the cards again or at least make that bar a lot bigger! — SRNighthawk
It needs to be… at least 3 times this big.
Catan Universe went from aesthetic original playing cards, to minimal icons. These icons, while more mobile friendly, are now much harder to understand at a glance and lose the visual context of playing cards.
If you want to keep things usable and matching reality, it’s okay to get stuck on a particular aesthetic, if you understand your users’ perspective.
If users want and understand a deck of playing cards, you can simplify the cards, but if changing a playing card into a numbered icon destroys their experience, you’ve gone too far and have become too simplistic.
Replacing human interactions with an emoji system
Bring back the chat. I hate these emojis and I miss playing with humans — ME
This is without a doubt my biggest pain with the redesign.
When starting a new game, people often would greet each other in the chat to spark a conversation, create a connection, or just generally talk trash. In the new streamlined UI, I found a social game totally stripped of human interactions. The chat has now been killed and the only way you can communicate with other players is by sending an emoji that would appear over your avatar’s face. The expressions range from cocky, to sarcastic, to meaningless, depending on what people interpret.
Using emojis is like playing game of emotional charades where everyone loses.
Before, when a player would take a long time to play their turn, it was very common to write in chat and poke them to play faster, or if someone had a shitty internet connection, they would share in chat so that we knew we’d had to be patient sometimes. I even enjoyed full conversations with people sharing how they were doing during this pandemic, and other conversations just talking strategy during the game.
Nice try, Catan Universe, but there is no emoji to express how satisfied I feel trolling my boyfriend online.
Removing the chat showed just how much communication is necessary to the game and really, to any social experience — In what world do friends sit silently around a board game in an apartment for 45 minutes, exchanging nothing but silent eyebrow twitches, winks and thumbs ups?
People play games with each other to connect. It feels good to exchange, negotiate, argue, beg, and sure, to win, and throw it all in their faces. But, in an effort to focus on mobile audiences and adopt the trendy and popular emoji packs, the new experience loses its soul.
In your product designs, always consider what one user segment might have to lose for another to gain something.
3. Lighten the Cognitive Load (Maintain consistency and standards)
The new graphics are not intuitive at all, it’s very hard to track how many cards I have with the new resources bar. Please return to old UI. — Crouton
The interface also somehow became less consistent with the redesign. The changes make an already mentally demanding strategy game much more cognitively taxing, due to different UI interfaces presenting the same concept.
In the original Catan gameplay, you’re already trying to strategize your play, thinking about the amount of resource cards (well, icons now…) you have to manage for a successful turn — but there’s also harbours, development cards, upgrading your settlements, trying to build the longest road, or largest army, keeping the robber out of your hair, interfering in other players strategy, planning your trades, anticipating everyone else’s moves and strategies, yada yada yada.
As a product designer, keep the cognitive load from your interface choices to a minimum, so your user can solemnly concentrate on their goals and complete their tasks.
Here’s an example. Below, you can see two different UI situations for the same concept : Resource negotiation.
Can you guess at a glance what I’m trying to do on the left, versus right? Which one do you think is the more intuitive approach? And which do you think was chosen for the redesign? Trick question. Unfortunately, the team seems to have thought Porque no los dos? and implemented both.
In the above example, I’m offering 1 sheep for 1 wood on the left. Makes sense so far. While on the right, a player is offering 2 rocks for 1 brick and 1 sheep… but wait, recalling the pattern on the left, I second-guess myself, since this is a different interface for what I assume is the same action.
Am I actually giving away 1 brick and 1 sheep, or is it the inverse? If that is the case, how many cards will I have left to build my next settlement? Crap, I can’t decide now and the clock is ticking on my turn…
Let me just decode my tiny icons in the interface and get back to you…oh damn it, the other player traded first and I lost my chance, and probably the game because of this interface! (Okay I am probably just pissed because I lost the trade, so blaming the UI is a convenient excuse that makes me feel better).
As a user in a dynamic system, I already have enough I’m trying to keep track of. I should not have to recall the different information from one part of the interface (offering) to another (receiving) when it comes down to the same concept — I want it to simply be shown in the same way.
Train your users on how to do something in the interface, then get out of their way.
The lesson? These problems can all be avoided by reducing memory and cognitive load; make actions, objects and options easily recognizable, consistent and clear. Bonus… This also means less work for your product team — recycling your polished UI elements across the product!
Continuous Development over Big-Bang Redesign
Like Cinderella at the ball, I experienced the Catan Universe as a blissful moment in an otherwise dreary period of my life, which ended up abruptly at the stroke of midnight on June 29th. Except this time, prince charming is not coming and I’m stuck with a rotten pumpkin.
All of this could have been avoided with an incremental approach that included user feedback, designing as things progressed.
It’s extremely challenging for even the best product teams to keep all of the core UX heuristics in mind across a multi-month (or multi-year) redesign that spans multiple platforms. Approaching interfaces piece-by-piece can free your full attention to focus on the user experience and good principles, without having to juggle the complexity and context. An incremental approach might seem like it’s slower or more work upfront, but it provides the time and space to prevent the corner cutting that must inevitably occur when big-bang waterfall redesigns run over schedule and crash the backlog.
Nobody wants to design poor products or ruin their user experience. But this is how it happens. And it happens fast. And it happens a lot. One minute your team is popping the champagne for finally, finally, delivering that epic redesign after blood, sweat and tears from long zoom calls. The next, you’re all drowning in enraged user feedback and a massive list of urgent fixes that is totally demotivating. “But we just wanted to make things nicer for our users!”
Complete big-bang redesigns can ruin your whole product experience.
Try coping by doing continuous testing and development instead. Or add me on Catan Universe to continue this conversation while building some things together… if they bring back the chat.
—
We hope you enjoyed reading! This article was co-written with my ultimate co-nerd partner Justin Smith. Also, despite all our critiques and analysis, Catan Universe remains an amazing game, available on Steam free to try. Check it out!
