My Role:
Responsibilities:
Time to completion:
UX Designer
Flow Charts, Experience Goals, Success Metrics, Player Journey, Information Options, Low Fidelity Wire Frames.
21 Days
Diablo Immortal Character Customization
Feature Proposal
| ELVTR | CASE STUDY
Overview
-
Objective: Create a new character customization feature in Diablo Immortal that will give new and seasoned players an experience that allows their unique vision for their Diablo avatar to be easily created.
-
How: Design a player experience that creates both an easy navigation of customizable features and showcases familiarity of the Diablo universe. Establish better Character Customization feature hierarchy.
-
Goals: New Feature Hierarchy
1. Class
2. Main Character Features
3. Subcategory Features
4. Slide Bars/Other Options.
Include simple UI with minimal descriptions.
“Show, don’t tell.”
Backgrounds and Contexts
-
Although plenty of character customization is allowed in the current feature. The player can easily miss a wealth of customization options by not clicking on the Customize button.
-
In its current state the character customization feature does not provide a smooth transition from character design into gameplay.
-
In order to understand exactly what key areas will need to be adjusted I began with an evaluation of the entire Diablo Immortal onboarding process in . From the start of the game, through the character customization section and into the end of the tutorial phase where the open world is finally unlocked.
-
To help with my overall analysis. I mapped out the current player journey, information options and flow chart.
Work Flow
Analysis and Research
Player Journey
-
The current path the player is sent on during onboarding. From the start of the game, into the character customization section and on to the end of the tutorial phase where the open world is finally unlocked.
Current Information Options for Diablo Immortal
-
All options presented to the player during the onboarding phase.
Diablo Immortal Onboarding Flow Chart
-
Creating the flowchart helped me identify problem areas affecting the character customization options.
-
Areas affecting current player experience are marked in red.
Experience Goals
Key Takeaways:
-
Will need a hierarchy redesign of customization content in order to create a simple and effective method for maximizing impact of character creation through visual organization.
-
New flowchart and wireframes needed.
-
Need low fidelity wireframes to create options layout for UI artists and programmers.
-
Redesign of UI icons might not be necessary. They are functional in current state.
Success Metrics
-
Our success metrics will focus on strong Usability and Desirability within the character creation feature.
-
Scalability will also be a nice to have priority but with less bandwidth allocated in this version.
Work Process
Information Architecture
-
The first step in the process was to organize the feature’s information architecture into simple sticky notes.
-
The color of each sticky note was chosen to group together similar content and categories
-
As the process went on I discovered that a new category would need to be created. (Orange Sticky Notes)
-
To avoid inconsistency in the character creation process, a customizable “eyes” category was created. (Orange Sticky Notes)
-
Previously eye customization was located inside other categories. It didn’t have it’s own unique section.
Sticky Note Content
-
The color of each sticky note represents one of the main character feature groups.
-
Every individual note is a subcategory of its main feature group. It shows all content that lives inside that specific subcategory.
-
Including: All character creation options. Will it have slide bars? Icon selections? Custom colors?
Updated Flow Chart
-
The next step was to organize the information architecture established on the sticky notes into a simple flowchart.
-
Visual Hierarchy is established with color coding.
Main Screens: Green
Character Classes (At the top): Purple
Main Menu: Pink
Subcategories: Biege
Icon Options/Custom Colors: Yellow
Slide Bars and Slider Options: Blue
-
The flow chart was prepared for efficiency, we want to ensure an easy development process once its shared with the game development team.
Character Customization Feature Layout
-
Main Character Customization Menu will appear on left side of screen. Menu is scrollable and scalable.
-
Gender and Face Preset options are prominent at the top. Arrows allow easy selection. Bubble above icon highlights selected option.
-
Customize Section five options to select.
-
Customizable Subcategory: (If available) opens Subcategory Customizable Features (scalable)
-
Customization options within subcategory: Slide Bars, Icons, Color Select. (scrollable)
-
Gear Preview five options.
-
Name your hero text field.
-
Scroll bar to show player menu is scrollable.
1.
3.
4.
5.
8.
8.
Low Fidelity Wire Frames
Class Selection
Customization Menu
All Options Open
Risk Management Plan
Player Research
-
We spoke with three distinct gamers.
-
Analyzed their expectations, motivations and gaming goals.
-
Our expert review is based on their answers.
Expert Review
-
Our new Character Customization Feature is based on the player research review above.
-
The focus of our flowchart and low fidelity wireframes exemplifies character expectations discovered through all of our player research.
Key Takeaways for Diablo Immortal Character
Customization Feature
-
We created a new easy to use Character Customization process that should enable the gamer more freedom to create the perfect avatar for their Diablo Immortal journey.
-
We streamlined the character creation process in-order to create a smoother, faster and easier navigation during the player experience.
-
The new Character Customization Feature will be extremely scalable for future additions of content.
