3. Sketches and Wires
At the beginning of the pre-pro, I did some wireframes to test out the combat HUD layout. The first wireframe was landscape, which was very similar to most auto-chess games on the market. In the portrait mode direction, I first tried putting the players' list (and feed) on the left/right side of the chessboard. But the limited space made it very difficult to fit all the player feed items, including emoji, win/lose state, level/unit upgrades, and many other necessary functions.

Proven by this human thumb area image (Image Source: Luke W — Designing for Large Screen Phones), it's evident that the bottom side of the screen space has the most feasible areas to be reached, which should be used for players to tap and drag. And if we limit most of the chessboard to the bottom of the screen, the top part of the screen would have much more space left to include information for players to read.

As a result, after iterations and feedback meetings with Game Designers and Engineers, we locked down the layout as shown in the image.

While the Chaos Combat Chess Mobile HUD is a challenge to design, the Standalone version's HUD is more straightforward.
