My Approach:

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.

Option C:
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.