03.png
02.png
Mobile game character creator

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 Punk 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.”

gif1.gif
iphone.png

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:

userflow.png

Choose gender

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

Gif2.gif
iphone.png

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.

GIF3.gif
iphone.png
Layout Iteration

Creator UI layout innovation

maxresdefault (2).jpg
maxresdefault (1).jpg
446149287.jpg

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

UI2.png

2

3 layers of the menu on the right:  

  • benefit right-hand operation

  • limit interface layout

UI1.png

3

Distributed on both sides according to hierarchy

UI3.png

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.

heatmap2.png

Visual refinements to make a more transparent interface hierarchy

UI4.png
UI5.png
UI6.png
UI3.png

Highest chosen after test

Customize Section

Body Shape

gif7.gif
iphone.png

Voice Chosen

sound.png
iphone.png

Submission Popup

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

gif6.gif
iphone.png

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.

gif4.gif
iphone.png

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.

GIF5.gif
iphone.png
Tools and references
SW.png

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