In this final part, I’m looking at art and the technical side of UX. You can also read part 1 and part 2.
Technical
I’ve included this section to show that improving user experience isn’t just the job of art and design departments. Much of this is common knowledge, but paying attention to it and pushing it further matters. In a small mobile team, everyone is a UX designer, whether they like it or not.
Fast loading times
The title says it all. Fast loading usually means keeping the amount of data loaded into memory small. Clash Royale has a small scope, and its developers paid attention to asset optimisation. They use several tricks to reduce memory use, including sprite mirroring and limiting the number of frames in character animations. The result is really good loading times: around 4.5 seconds on the iPhone used for this test.
Of course, not every game can achieve that. It depends on the project’s goals and the type of game.
Two examples of texture packing in Clash Royale: the Elixir Collector on the left and the Goblin Barrel on the right. You can see how the developers change team colours, probably by placing the circled elements onto the unit or building.
Loading screens
As we’ve just discussed, loading times are a common bottleneck. Every second spent on a loading screen increases the chance of a player switching games or opening a browser. It takes away from the pleasure of playing.
Clash Royale has two loading screens: one when entering the game and another before entering a battle. That’s a restrained approach, and it works really well for UX.
Battery Drain
Battery drain is another common problem. Pushing a device’s performance drains its battery, and some games can empty a phone in two hours—especially those with real-time 3D graphics and an internet connection. Supercell’s art style has an advantage here. It uses pre-rendered 3D sprites, so the game is essentially 2D. That can reduce the load on the GPU and let players enjoy longer sessions. I assume this is only part of why Clash Royale uses less battery, and I don’t want to speculate too much. But it’s good to be aware of these things. Players care, and developers should too.
Disconnecting from the game
Clash Royale requires players to be online. As with any online game, you can lose your internet connection, especially while travelling. The game lets you rejoin a match after losing connection or closing the app. Its fast start-up time is another advantage here.
Being able to reconnect reduces anxiety. Losing the connection might not be the player’s fault. Letting them return to an important tournament match is simply empathetic.
There’s one small change that shows how Supercell thinks about players. A few months after launch, the developers noticed that players pushed harder when an opponent disconnected, hoping to gain an advantage before they returned. They removed the notification that an opponent had lost connection. Now, a disconnected opponent just looks as though they’re taking a little longer to choose a card. It’s a small change, but it gives players time to reconnect and makes things fairer.
On the left is the old notification that an opponent had lost connection. On the right is the message shown to a player who loses their own connection.
Ordered randomness
When people talk about randomness, they often have a particular experience in mind. A player might chase an item with a 1% drop rate and still not find it after 100 or 200 attempts. Many games use pseudorandom systems: deterministic under the hood, but appearing random to the player. Some also adjust the sequence to avoid frustrating streaks.
In Clash Royale, chest drops follow a predefined order that imitates randomness. It’s about the player’s mental model. If players think it’s random and enjoy it, that may be enough.
Players discovered the chest-drop order and published it, so anyone can look it up. Adjusting randomness is an interesting practice. It shows that the developers considered the experience from more than one angle.
A screenshot from clashroyalearena.com showing part of the chest-drop order.
Aesthetics
Aesthetics is one of the main tools of UX design. Visual choices can make an experience incredible—or awful.
Art Style
Supercell created a distinctive style: a pre-rendered, Pixar-esque 3D look adapted for mobile. Strong contrast, bright colours and clear silhouettes make it readable on a phone screen.
The image above shows how distinct the units are, from their icons to their shapes and colours.
Gameplay Colours and VFX
Colour is valuable when it emphasises gameplay information. Clash Royale uses it to improve readability and clarity. For example:
When time runs out, a red outline flashes around the screen.
Units flash a brighter colour when they take damage.
A full elixir bar glows with an animated effect.
Cards show radial progress until there’s enough elixir to use them.
Each unit has its own characteristic colour theme.
Effects show statuses such as poison and freeze.
Blue and red distinguish the two teams.
All of this helps players understand the battlefield without spending too much time working out what’s happening. Visual consistency matters, especially when it’s part of gameplay. Art and game design are closely connected: interactions and visual style often work together. Understanding that relationship is how we take our games further.
When the game enters overtime, a reddish frame appears around the screen.
UI Colours
I’ve already touched on colour in the UI. The developers use yellow for the most important actions, green for secondary actions, and blue for backgrounds and some buttons.
Used well, colour makes the UI clearer and directs the player’s attention.
There’s also a fourth colour: red, used for notifications and the exit button.
The bad in Clash Royale
Clash Royale certainly has flaws. But the developers have reduced them enough that interacting with the game is a pleasure. Improving user experience is an ongoing battle.
The biggest UX problem we encounter is input delay.
Input delay
Many players treat this as a bug, but it’s part of the design. Clash Royale uses an authoritative server, meaning the server controls the game logic. Player input travels to the server, where gameplay is calculated, and the server sends the result back. My assumption is that the developers use a fixed delay of around 500 ms to allow that exchange to happen reliably. A slow connection can add more delay, but most of the time the system is stable.
So why use a system that hurts the gameplay experience?
The reason is to close loopholes for cheating. Online games often attract players who don’t follow the rules. Calculating outcomes on the server removes many opportunities to cheat and keeps both players working from the same result. Most of us have encountered cheaters, so we understand why this matters. The developers sacrifice some responsiveness to improve the overall experience. It’s a trade-off we face every day. Things aren’t always black and white.
Live games
Games as a service was still a fairly new concept when I wrote this. Supercell focuses on games people can play for years. Supporting a game long after launch has side effects: players want more features, bigger features and shiny features. Every addition makes the game more complicated. For UX, that’s a problem that grows over time.
Even a relatively young game like Clash Royale had already seen a decline in UX. We should prepare for that pressure rather than wait for it to become a problem. Long-term planning can help.
New and old shop.
Updates
The October 2017 update introduced many changes, including one to shop items. Every few days, the shop offers an Epic Chest for coins. It’s a rare opportunity, and usually a good purchase. The update changed the item’s button to yellow. Why is that a problem? Until then, yellow had been associated with key actions and rewards, and rewards were free: no soft or premium currency required. This breaks that consistency and can create confusion, especially around purchases.
The same update removed the red text indicating that you lacked the resources to buy an item. That’s another break in consistency. It can lead players to tap an item thinking they have enough resources when they don’t.
Fortunately, the developers listened to players and brought the red text back in the following update.
The free item is green, while the paid item is yellow. That breaks the earlier association between yellow and rewards.
Summary
We know the immediate effects of better UX: players feel more immersed, enjoy interacting with the game and want to come back. But there’s a longer-term effect too. Fairness and empathy build a bond between developers and players. If we care about players, they can reward us with loyalty. If we do the opposite, they’ll respond accordingly. I think this helps explain why Clash Royale is popular, and why other developers can learn from it.