UX/UI Strategy | 2024
Diablo - Miranda Buechler, painted in Photoshop
Come take a deep dive into the UX behind Diablo's mobile-first MMORPG + explore new feature proposals, experience goals + business strategy. Let's level up some UX!
This project was completed as part of ELVTR's Advanced UX/UI in Gaming course.
A special thanks to
ROLES
UX Design
UX Market Research
Visual Design
DURATION
8 weeks
DELIVERABLES
Experience Visions + Metrics
Early Engagement Evaluation
Flow Charts
Wireframes (cross-platform)
Mockups
Risk Mitigation
Tech Feasibility Plan
Retention Analysis Document
Director Review Slide Deck
TOOLS
Figma
FigJam
Illustrator
Photoshop
Google Suite
CONTENTS
01. BUSINESS-DRIVEN UX/UI
​
Business-driven is what to achieve | Player Experience is how to achieve
TARGETING BUSINESS GOALS
UX/UI Day 1 Retention Strategy
The Process -
Player Engagement Pillars are used to define Experience Visions, Quantitative + Qualitative Goals, supported by Player Engagement KPIs.
COMPETITIVE ANALYSIS
By comparing Diablo Immortal's player learning experience against competing mobile RPGs, I identified 3 simple solutions that make a big impact on improving early gameplay retention + player engagement.
1. Reward Notification Discoverability
2. Habit-forming for Ultimate Attacks
3. Clarifying Equipment vs. Cosmetics
SUFFICIENT REWARD NOTIFICATIONS
Players Learn Through Player-Feedback Loops
Gameplay Core Loop - The core cycle Diablo Immortal players learn to go through to progress in the game.
Gameplay footage thanks to Lacry.
Players will likely miss notifications that are too quick, leading to an inefficient feedback loop (frustrated players).
​
The solution is simple: add a second or two to certain pop-up messages such as Skill Upgrade, New Skill + Level Up and then play test.
I sure hope you read quick because many notifications related to level + upgrades tend to appear for only ~2 seconds amidst combat and gameplay!
ANALYZING HABIT BUILDING
Habit-Reward Evaluation for Ultimates
Player Learning Experience - Players learn through experience, (repeated) actions or habits + efficient feedback, like rewards. Intrinsic and extrinsic motivation drives the player forward.
Currently, this is where players can find info about Ultimates.
Personally, I missed it, and I've heard similar stories from other players.
The Q’s players are asking
-
What is it?
-
How long until it recharges?
-
How does it recharge?
-
How much damage?
While Diablo Immortal does a great job of informing players how to trigger an Ultimate, players don’t know they have access to info about Ultimate Skills.
​Solution -
-
Move info about Ultimates to main-level Skills Menu so players get a reminder (habit building)
-
During initial tutorial, gauge should blink briefly
-
“New Skill” notification should trigger to teach players more info is in the Skills Menu
Result - Improved player learning experience + solidify player habits (KPI)
“What does it do, though? I don’t even know what my ultimate does.”
​
- StarInSky, “Diablo Immortal Mobile Gameplay”
INTRODUCING COSMETIC SETS
Educating Players on What Makes Cosmetics Special
The Q’s players are asking
-
What’s the difference between equipment + cosmetics?
-
How do Cosmetics benefit me?
​
Adding a tooltip that displays information about Cosmetic Sets can put the purpose of them into context for new players.
​
The result - Improved player learning experience, player engagement (KPI) +
Cosmetics purchases.
​
​
3D assets are property of Blizzard Entertainment
ANALYZING D1 RETENTION
Director Review Slide Deck - 1
02. IMPROVE EXISTING GAMEPLAY FLOW
DEVELOPING EXPERIENCE GOALS
Goals + Visions Mapping
The Process - I evaluated the existing gameplay flow, marked the areas I targeted to improve + recorded the experience goals I wanted to achieve.
INTRODUCING THE PORTAL FOR GAMEPLAY FLOW
Interactive Prototype + Cross-platform Wireframes
Issue #1 - A number of players don’t know about the fast-travel portal, which saves them + their party time.
Issue #2 - A number of players don’t realize when their inventory becomes full.
One solution to both problems - Teaching players from the beginning that fast travel via portal is an option by informing them inventory’s full.
Take a look at my prototype demonstrating the new player learning process to a solution which greatly improves gameplay flow: teaching players about fast-travel via portal.
Or check it out for yourself.
VOLUME ON
Cross-Platform Game Experience
Iphone 14 + 15 Pro | 19.5 : 9
Teaching players from the beginning that fast travel via portal is an option by informing them inventory’s full.
The foreseen results
-
Less player frustration
-
Improved usability
-
Increased discoverability
-
Players get their time back
-
More portal Cosmetic purchases
3D assets are property of Blizzard Entertainment
ELEVATING GAMEPLAY FLOW
Director Review Slide Deck - 2
03. EXPANDING CHARACTER CUSTOMIZATION
Setting Goals + Success Metrics
The Process - I broke down each engagement pillar into Player Stories + supported with Operation Success metrics (bullet points).
INCREASING PLAYER ENGAGEMENT
Character Creation Expansion Wireframes
Currently, players choose a preset + each preset has its own 6 swatches.
This issue [lack of diversity in the games industry] becomes more specific, more harmful, and more painfully obvious when considering RPG’s, especially games where you have a chance to create your own character.
​
- Smith, Sasha, “Diversity in Character Creation” The Icon, May 25, 2021
Skin Tone Expansion - People of Color often feel underrepresented in games’ Character Creation systems.
By having a two-level skin color system (base/primary color and secondary tone), players can experiment with different combinations to find an appropriate fit for their character.
ABOVE
Option A - Light plays a big role in how subtleties of skin appears, so why only have flat swatches?
ABOVE
Option B -
If avoiding 3D samples is a concern (feasibility), providing a slider for the Primary Color + Secondary Tone offers players a wider range of color than 6 flat swatches.
Age Customization -
Having only young heroes is a thing of the past! Players will have the option to age their character with varying levels of wrinkles and age spotting to create protagonists who feel real and fully human.
Voice Customization -
Players will have the option to sample different voices, each reflecting different qualities such as age, gruffness, and perhaps regional accents.
Offering 2 samples per age implication + 3 pitch options, creates a new level of personalization while staying in the realm of feasibility.
This setting is the last one players encounter, so they know how their character will look before they choose how their character sounds (vertical left panel).
3D assets are property of Blizzard Entertainment
Skin Tone Customization -
Added Art Hypothesis for my Experience Goals + evaluated risks, listing the mitigation plans.
Aging Customization -
When we fully understand the goals, the challenges +
the priorities, we can find alternative solutions (mitigation).
Voice Customization -
Risk Mitigation entails methodically reducing the likelihood or the impact of a risk.
​
When a design is well-evaluated prior to implementation, the associated risks become minimal and the benefits outweigh them.
CHARACTER CREATION GOALS + RISKS
Risk Mitigation Map
POST-MORTEM
After completing this 8 week course, I have attained the art of championing a business-driven, player-informed gaming UX/UI culture, where player engagement is the key to learning and progression.
​
The mission of a UX/UI designer is to effectively convey the intended gaming experience while fulfilling the business objectives + strategies.
​
Happy gaming!
​
LIKE WHAT YOU SEE?
LET'S CHAT!