Mobile game character creator

1-week design exercise | Game UX/UI

Project Background

Why I do this design exercise?

The character creation process is widespread in games; I took this design exercise for myself to explore how relatively complex creator interfaces fit the mobile phone and tried to find points worth optimization and innovation.

Design Goals

  1. Set a background story for the game to guide the game's art style and atmosphere.

  2. Design features based on player needs and gameplay.

  3. Make a smooth transition from background to the character creation with storytelling.

  4. Make a user-friendly creator UI layout.

Ideation

Background setting - 

Cyber style FPS game

"The dark forces are raging; people’s lives are no longer peaceful... You joined an armed organization. To protect your family and this city, fight against the dark forces with others, your battle begins..."

A transition from onboarding story to character creation

Most games initially enter the character creation process, and it is easy to destroy the immersion that the background set up. By a short story, the design naturally transitions from the game introduction to the character creation process to create a more immersive experience.

“Your face got damaged in a battle. The doctor will help you with the facial repair. Now let her know your face data.”

User flow based on player's needs

As I set this game as an FPS mobile game, the character creation process should satisfy both players who want to set character very customized and players who want to start the game quickly. So it is essential to give the default character presets. Based on similar thoughts, I got the creator structure:

Choose gender

I designed an animation for gender choice to enhance the player's immersive experience.

Default character presets

Considering players who want to start the game quickly, multiple presets is essential in the beginning. And they also served as a good starting point. This part also should support random generations and generations based on the player’s photo.

Layout Iteration

Creator UI layout innovation

After research on the current creator UI, I found the creator interface is a relatively complex UI. I made three iterations for comparative analysis to find which layout method could be easier to understand and play.

1

3 layers of the menu on the left:  

  • follows the typical UI rules of the PC game

  • more familiar to the players

2

3 layers of the menu on the right:  

  • benefit right-hand operation

  • limit interface layout

3

Distributed on both sides according to hierarchy

The 3 version is relatively the most reasonable one  because:

  • Based on mobile right-left hand operation, It is more convenient to adjust the details with right-hand.

  • The hierarchy is relatively clear.

Visual refinements to make a more transparent interface hierarchy

Highest chosen after test

Customize Section

Body Shape

Voice Chosen

Submission Popup

The submission pop-up plays an essential role to let the player fully understand submission and further changing rules.

Save & Reset

Inport & Sharing

The saving button will undoubtedly help players avoid potential negative experiences of lost current editing.
The design of reset also supports the user to choose reset all or restore to the last save version.

The sharing and importing of custom characters provide great help for game marketing.

The design combines QR code, number code, and character preview for a clear sharing and easy inport.

Tools and references

The character model resources used in the design comes from [Black Desert].

Design by Lai Wei © 2020