UX/UI Design

Diablo Immortal – redesigning the current user experience

Details

Course Instructor

UX/UI Director at Blizzard Entertainment

Role

UX Designer

Timeline

2 Weeks

Project Goal

  • Analyze the current player journey through heuristic evaluation of existing screens
  • Identify & prioritize main areas of improvement
  • Develop wireframe mockups to streamline UX for identified UI

A process-oriented approach.

1 – Understanding the Player Journey

Mapping out the player journey is essential to identify key screens and interactions for evaluation, ensuring UX improvements are targeted towards the areas that will have the most substantial impact.

2 – Evaluating the Current Player Experience

Evaluating existing screens through the lens of usability, desirability, scalability, and feasibility ensures that UX improvements are intuitive, appealing, sustainable, and technically practical for long-term success.

Experience Evaluation #1 – Map Screen

Usability

Rating – Low

  • Low contrast and visibility between content & background
  • Lack of coordination between map and quest objectives
  • Current location indicator is unclear
  • Lack of an icon key overwhelms and confuses new players

Desirability

Rating – Medium

  • Parchment-style design enhances immersion and feels true to the Diablo universe.
  • Lack of personalization (custom markers) discourages a deeper player connection.

Scalability

Rating – Medium

  • Zooming in on densely packed areas feels clunky, making navigation less appealing.
  • The map’s separation by acts and regions allows Blizzard to gradually roll out content without overwhelming players.

Experience Evaluation #2 – Inventory Screen

Usability

Rating – Low

  • Low contrast and visibility between content & background
  • Lack of coordination between map and quest objectives
  • Current location indicator is unclear
  • Lack of an icon key overwhelms and confuses new players

Desirability

Rating – Medium

  • Parchment-style design enhances immersion and feels true to the Diablo universe.
  • Lack of personalization (custom markers) discourages a deeper player connection.

Scalability

Rating – High

  • Game encourages players to sell their unused items, preventing an overcrowded inventory
  • Endless options for new items and interactions with their character

3 – Aligning on Vision & Scope

Post-evaluation & identification of UX pain-points, we move into the solution space to develop an improvement vision with a tiered checklist for prioritization and buy-in.

Plan of Action – Map Screen

Bronze Plan – 30%

The bare minimum that needs to get prioritized for a good UX.

Incorporate quest information into the map screen, matching players mental models

Silver Plan – 70%

An balanced plan considering both UX and team capacity.

Improved visibility and contrast between background and UI elements

Gold Plan – 100%

A fully comprehensive plan that includes all UX recommendations.

Provide informational features to help players understand what UI elements represent on screen

Plan of Action – Inventory Screen

Bronze Plan – 30%

The bare minimum that needs to get prioritized for a good UX.

Create a deeper sense of organization within inventory (weapons and armor types)

Silver Plan – 70%

An balanced plan considering both UX and team capacity.

Increased visibility of character attributes as player changes their character’s item equips

Gold Plan – 100%

A fully comprehensive plan that includes all UX recommendations.

Improved labelling of different item categories as well as item slots.

4 – Wireframes – Refining Interaction Design

After defining key screens during the player journey, evaluating major UX gaps, & prioritizing a tiered solution plan, we are ready to begin designing wireframes to improve the existing experience.

© David Leen 2025 All Rights Reserved

UX/UI Design

Diablo Immortal – redesigning the current user experience

Details

Course Instructor

UX/UI Director at Blizzard Entertainment

Role

UX Designer

Timeline

2 Weeks

Project Goal

  • Analyze the current player journey through heuristic evaluation of existing screens
  • Identify & prioritize main areas of improvement
  • Develop wireframe mockups to streamline UX for identified UI

A process-oriented approach.

1 – Understanding the Player Journey

Mapping out the player journey is essential to identify key screens and

interactions for evaluation, ensuring UX improvements are targeted towards

the areas that will have the most substantial impact.

2 – Evaluating the Current Player Experience

Evaluating existing screens through the lens of usability, desirability, scalability, and feasibility ensures that UX improvements are intuitive, appealing, sustainable, and technically practical for long-term success.

Experience Evaluation #1 – Map Screen

Usability

Desirability

Scalability

Rating – Low

Rating – Medium

Rating – Medium

  • Low contrast and visibility between content & background
  • Lack of coordination between map and quest objectives
  • Current location indicator is unclear
  • Lack of an icon key overwhelms and confuses new players
  • Parchment-style design enhances immersion and feels true to the Diablo universe.
  • Lack of personalization (custom markers) discourages a deeper player connection.
  • Zooming in on densely packed areas feels clunky, making navigation less appealing.
  • The map’s separation by acts and regions allows Blizzard to gradually roll out content without overwhelming players.

Experience Evaluation #2 – Inventory Screen

Usability

Desirability

Scalability

Rating – Low

Rating – Medium

Rating – High

  • Poor categorization & organization of weapons, armor, etc.
  • Character stats are hidden and not immediately visible to the player as they equip new items
  • Poor labelling – equips, equip active slots, gems, currency, etc.

 

  • Player is able to see their character change appearance live as they equip new items, providing a sense of satisfaction
  • The UI lacks flair and feels more like a spreadsheet than a fantasy loot hoard
  • Game encourages players to sell their unused items, preventing an overcrowded inventory
  • Endless options for new items and interactions with their character

3 – Aligning on Vision & Scope

Post-evaluation & identification of UX pain-points, we move into the solution space to

develop an improvement vision with a tiered checklist for prioritization and buy-in.

Plan of Action – Map Screen

Bronze Plan – 30%

The bare minimum that needs to get prioritized for a good UX.

Incorporate quest information into the map screen, matching players mental models

Silver Plan – 70%

An balanced plan considering both UX and team capacity.

Improved visibility and contrast between background and UI elements

Gold Plan – 100%

A fully comprehensive plan that includes all UX recommendations.

Provide informational features to help players understand what UI elements represent on screen

Plan of Action – Inventory Screen

Bronze Plan – 30%

The bare minimum that needs to get prioritized for a good UX.

Create a deeper sense of organization within inventory (weapons and armor types)

Silver Plan – 70%

An balanced plan considering both UX and team capacity.

Increased visibility of character attributes as player changes their character’s item equips

Gold Plan – 100%

A fully comprehensive plan that includes all UX recommendations.

Improved labelling of different item categories as well as item slots.

4 – Wireframes – Refining Interaction Design

After defining key screens during the player journey, evaluating major UX gaps, & prioritizing a tiered solution plan, we are ready to begin designing wireframes to improve the existing experience.

© David Leen 2025 All Rights Reserved

UX/UI Design

Diablo Immortal – redesigning the current user experience

Details

Course Instructor

UX/UI Director at Blizzard Entertainment

Role

UX Designer

Timeline

2 Weeks

Project Goal

  • Analyze the current player journey through heuristic evaluation of existing screens
  • Identify & prioritize main areas of improvement
  • Develop wireframe mockups to streamline UX for identified UI

A process-oriented approach.

1 – Understanding the Player Journey

Mapping out the player journey is essential to identify key screens and

interactions for evaluation, ensuring UX improvements are targeted towards

the areas that will have the most substantial impact.

2 – Evaluating the Current Player Experience

Evaluating existing screens through the lens of usability, desirability, scalability, and feasibility ensures that UX improvements are intuitive, appealing, sustainable, and technically practical for long-term success.

Experience Evaluation #1 – Map Screen

Usability

Desirability

Scalability

Rating – Low

Rating – Medium

Rating – Medium

  • Low contrast and visibility between content & background
  • Lack of coordination between map and quest objectives
  • Current location indicator is unclear
  • Lack of an icon key overwhelms and confuses new players
  • Parchment-style design enhances immersion and feels true to the Diablo universe.
  • Lack of personalization (custom markers) discourages a deeper player connection.
  • Zooming in on densely packed areas feels clunky, making navigation less appealing.
  • The map’s separation by acts and regions allows Blizzard to gradually roll out content without overwhelming players.

Experience Evaluation #2 – Inventory Screen

Usability

Desirability

Scalability

Rating – Low

Rating – Medium

Rating – High

  • Poor categorization & organization of weapons, armor, etc.
  • Character stats are hidden and not immediately visible to the player as they equip new items
  • Poor labelling – equips, equip active slots, gems, currency, etc.

 

  • Player is able to see their character change appearance live as they equip new items, providing a sense of satisfaction
  • The UI lacks flair and feels more like a spreadsheet than a fantasy loot hoard
  • Game encourages players to sell their unused items, preventing an overcrowded inventory
  • Endless options for new items and interactions with their character

3 – Aligning on Vision & Scope

Post-evaluation & identification of UX pain-points, we move into the solution space to

develop an improvement vision with a tiered checklist for prioritization and buy-in.

Plan of Action – Map Screen

Bronze Plan – 30%

The bare minimum that needs to get prioritized for a good UX.

Incorporate quest information into the map screen, matching players mental models

Silver Plan – 70%

An balanced plan considering both UX and team capacity.

Improved visibility and contrast between background and UI elements

Gold Plan – 100%

A fully comprehensive plan that includes all UX recommendations.

Provide informational features to help players understand what UI elements represent on screen

Plan of Action – Inventory Screen

Bronze Plan – 30%

The bare minimum that needs to get prioritized for a good UX.

Create a deeper sense of organization within inventory (weapons and armor types)

Silver Plan – 70%

An balanced plan considering both UX and team capacity.

Increased visibility of character attributes as player changes their character’s item equips

Gold Plan – 100%

A fully comprehensive plan that includes all UX recommendations.

Improved labelling of different item categories as well as item slots.

4 – Wireframes – Refining Interaction Design

After defining key screens during the player journey, evaluating major UX gaps, & prioritizing a tiered solution plan, we are ready to begin designing wireframes to improve the existing experience.

© David Leen 2025 All Rights Reserved