Clash Royale is a mobile multiplayer real-time strategy game by Supercell.
The Problem or Challenge:
The game was designed for portrait screen orientation, but players were requesting a landscape orientation as well so they can better stream their gameplay. How can such a complex game be converted from portrait to landscape orientation while still maintaining a smooth UX and an elegant UI?
Since the game already exists and I’m sure the game’s UX design team has spent a lot of time designing the game’s current UX, I chose not to re-invent the wheel, and work with what we already have. I’ll first be showing you how I thought and what I did (ex. design trials and experiments), followed by my final design results.
1. Play & Observe The Game, Identify the Problem
Before I started, I first played the game to better understand and observe how it works and how its elements work and interact.
I realized that the main UX challenge we have in our case is the following:
The game was designed and optimized for portrait screen mode, and uses horizontal swipe-based navigation between screens. Some screens such as the “Battle” screen have too many details and info. In portrait mode, they were laid out in a vertical hierarchy that works well for that screen mode. How would they translate or even fit into landscape mode without cluttering up the screen, disrupting any game hierarchy, or disrupting the intuitive/smooth UX that the game currently has? That’s the main problem I’ll be solving.
2. Experiment & Explore
The best way to discover or create solutions is to try… so I decided to dive right in. I started out experimenting with landscape game UX possibilities by playing around with the game’s screen and menu elements, exploring different layouts and options.
A. Game’s Top Menu Bar Experiments
I chose to keep elements group 1 at the top of the screen because currency and XP are usually universally placed at the top of a game screen. Gamers are used to that. Placing them anywhere else would contradict with what gamers are used to, and would negatively affect UX. Furthermore, these elements are of high importance to the game, and are used in several screens.
Option A: The bars fit but the empty dark blue areas look bad.
Option B: The bars fit but the empty space to the right is wasted space and looks bad.
Option C: Everything fits. Elements are to be centered. Choosing this option leaves us with more space and less clutter on the screen.
Elements group 2 can’t just horizontally go under elements group 1 like in portrait mode because that wouldn’t leave much space for other more important screen elements. We either have to find them a new layout and place on the left or right of the screen, but that would clutter the screen, or we can fit them in the top menu bar like in option C.
B. Game’s Navigation Menu Experiments
We have 2 options here: either to keep the navigation at the bottom, or place it on the right.
Option A & B:
Placing it on the right means getting rid of the horizontal swipe-based navigation from screen to screen and replacing it with either a vertical swipe navigation or just a button navigation. This would also mean that the way all other screens work would have to be also changed. This would cause an inconsistent experience for players who are used to the horizontal swipe navigation system of portrait mode.
Keeping the menu on the bottom means that users who have used portrait mode will have the same consistent experience (horizontal swipe to navigate screens, or press screen icon), and all other screens will continue to function the same way as before.
C. Battle Screen Elements Experiments
I tried different variations and combinations of placements of different elements. Here are some of these variations with comments.
3. Refinement, Testing, Validation and Selection – Battle Screen
After experimenting with different design variations, I combined the best solutions that I found into 1 screen. I tested that screen and other variations that I had with some users (players) that I had access to, and got their feedback. Fortunately, I didn’t have much fixes to do because their feedback validated my designs and design choices.
Here’s the final Battle screen with some comments:
Since I got the main challenge of the top menu bar and navigation menu figured out, the remaining screens were much easier to design because they followed the Battle screen.
Options B & C require less scrolling. Test these screens with users to determine the best option.
Since players own many cards, this layout makes sense and reduces the amount of scroll a player needs to do in order to manage the cards.
Below are the final results of the portrait to landscape conversions…
Players gave positive feedback about the game’s new proposed landscape mode. Many said that the new mode maintained the same smooth look and feel that they were used to, and even made some aspects of the game more convenient.