Chaos Combat Chess

Game UX Design

Brief

Chaos Combat Chess is an auto-chess game created by This Game Stuio, Inc., based on our IP. I worked on the UX with my colleagues Prachi Pradhan and Jerah Regundos. Chaos Combat Chess mobile and standalone were shipped in 2020.

I went through the project's complete phases from pre-production to shipping and maintenance. Screens-wise, I worked on the combat HUD, the Time Challenge Combat event from scratch, and many other pre-combat screens, including customization screens, store animated offers, and searching opponents screens.
‍
I also helped my colleagues get familiar with UGUI, transferred my learning tips, and wrote documentation of UGUI best practices shared with the UX team.

My Roles

- Competitor research
- Feature flow
- UGUI greybox implementation
- UI performance optimization
- Hi-Fi mockup
- UI assets

1. Competitor Analysis

I played and collected screenshots of popular auto-chess games on the market in the pre-production phase, including ChessRush Tencent, AutoChess DuoDuo, Chess Legends, TFT, and DoTA Underlords. The intention is to get familiar with the gameplay and feature flow that has been tested amoung users and find the challenges and opportunities of each mature product.

2. Combat HUD Flow

My first task was designing the Combat HUD UX. After working closely with Game Designers, I came up with this Combat HUD Flow chart shared with the whole production team. On the one hand, it's an efficient way to make sure everyone is on the same page about the first pass design. On the other hand, it helps me think when creating screens by screens. It reminds me to always keep in mind the context of the screens when designing them for our user.

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.

4. Greyboxing in UGUI

In This Game Studio, UX Designers are in charge of laying out the UI in the game engine. This process allows us to control the quality of the layout as much as possible.
‍
I started using UGUI in IGG at the beginning of 2018. In this project, I wrote documentation of UGUI's best practices for my colleagues and helped my colleague who's new with Unity with learning tips.

5. Game Design, UX, Engineer Workflow

We also initiated a workflow refining process between UX Designers, Game Designers, and Engineers during this project. After working together with the UX team lead, Jerah Regualos, we developed a flow chart that specified each step in this workflow.

6. Motions in UI

Motion plays a vital role in UX. I worked on multiple UI animations in this project, including animations to emphasize UI elements on a screen (special offers, news), and to deliver information one after another to avoid cluttered numbers and texts.

Chaos Combat Chess store special offer animation.