.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
-
Set a background story for the game to guide the game's art style and atmosphere.
-
Design features based on player needs and gameplay.
-
Make a smooth transition from background to the character creation with storytelling.
-
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.”
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
.jpg)
.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
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].