Diablo Immortal

Many indie game service platforms are already providing game previews, however users are willing to see those games altogether for easier comparison, simplified visuals, and clearer contexts.
Goal
Creating an unified platform service that can connect users and the indie games.



‍
Diablo Immortal: Elevating current player experience
UX/UI Research I 9 Weeks
Diablo Immortal is a well-designed ARPG, boasting a successful game with stunning UI/UX design, cohesive style, immersive storytelling, and captivating gameplay. Evaluate current Diablo Immortal player experience and looking for an opportunity to enhance the overall player experience.
‍
Part 01: Battle & Action Flow, Part 02: Character customization
Methods
User research, player journey, player persona, wire-framing, prototyping, and, UI design.
Tools
Adobe Photoshop,
Figma
‍
My role
UI/UX designer, researcher.
Overview‍
Through player interviews, research, and analyze, findig opportunities further enhance the existing gameplay flow.
The problem:
Diablo Immortal is a well-crafted game; however, certain user pain points have been identified, presenting an opportunity to enhance the overall player experience (UX).
The Goal:
Address player pain points by implementing solutions that do not disrupt overall gameplay.
Project timeline:‍
Process‍
Work Progress:‍
Challenges
  • Considering all 4 aspects of the player experiences.
    ○ Usability
    ○ Desirability
    ○ Discoverability (Scalability)
    ○ Feasibility
  • Running initial stakeholder communication, aligning and idealize everyone’s goals yet, realistic solutions.
  • Coming up with alternative solution if the technical engine implement is not feasible.
  • Considering player engagement and coming up with ideas that will boost it without creating obstacles.
Player Profile:
Player Profile:
Setting up variations of players with different engagement, goals, and desires to evaluate the current game flow with more empathy, and from higher spectrum of the perspective.
‍
Part 01: Battle & Action Flow‍
List The Info/Options:
List The Info/Options (Game Design) Players Have In Gameplay Flow (Before, During & After The Gameplay)
Flow Chart (Overall game play):
Imagining user scenario, brainstorming user paths, and properly guide the users.
Experience Goals (Visions)
Develop Experience Goals & Visions by evaluate and analyze existing gameplay flow (pre-game screens, during gameplay & post-game screens).
  • While most aspects where High & Medium, found some opprtunity to elevate the player experience.
Experience Goals (Scope):
Gather the ideas based on curret player experience analyzation.
  • Gathering ideas based on their priority, and necessity.
Stakeholder Communication‍
Stakeholder feedback
Imagine if I was at the real work scenario and just presented your experience goals with stakeholders and you receive their feedback.
  • Understanding how each stakeholder has their own goals
  • Preparing how to pitch my ideas
  • Preparing smooth collaboration that involves communications and mutual understandings.
Stakeholder Conversation
Analyze the stakeholders’ perspectives and WHY they might make these statements
  • Imagining how to collaborate with each stakeholders; reach both individual, and team goals that will ultimately help player experience
  • Evaluate stakeholder feedbacks and merge into UX ideas for better UX, and team project proess.
  • Modify the action plan from the previous pitch ideas.
Define  Pain Points‍
Initial Player Interview:‍
  • Player A: Most players who play Diablo Immortals are old veterans, who been playing Diablo series for a while. They are supporting and playing the game since we love the series. Like to see more Diablo like features.
  • Player B: Most of us are old (Not in teens or twenties anymore), our reflection and eye tracking time is slow.
  • Player C: Willing to have some short cuts for the functions that we use often.
  • Player D: We play ARPG games because we don't need to worry about much but smash the buttons to hit and kill monster and feel that 'hit satisfaction'. We just keep getting stronger by doing it, and therefore there is no end game.
Current eye tracking
Current mouse cursors
  • For the Desktop players with big monitor, in-game mouse cursor is too small, hard to find in certain environment.
  • This is critical since it's click to move avatar syste.
Current teleport location
  • The original placement of the teleport option is placing inside of the inventory.
  • However many players use this functions, and they desire to have less steps to reach there.
  • I found exit instant button that only pops up while inside of the boss room.
  • Swapping this button to teleport, while players are not in the boss room could be a great idea.
Starting Design‍
Battle Action Scene
Players who are beginners + players who have experience with previous game series.
  • Players want to see more Diablo like features; something from previous series.
  • Less eye tracking time, make informations more scannable.
  • Creating short cuts for the features that players use the most.
Digital Wireframe
Creating a simple digital wireframe and find out best features that works well (Star).
    Work Process (Mockup)
    • Considering Diablo immortal is cross-platform product, start designing on iPad ratio (4:3) first for the expansion to Mobile/Desktop/Console (16:9)
    Mobile & Desktop Mockup
    Evaluate the Design‍
    Eye tracking comparisons
    Players do not need to move around their eyes to check important informations as much anymore.
    Mouse cursor visibility
    Mouse color choice (3), and size control has added in accessibility.
    Color impairment check to enhance further accessibility for the broader audience.
    Part 02: Character Customization‍
    What players care the most?
    • Sam, Iris: I want to customize the character flow in the game.
    •  Iris, Shane: I want to see more characters in the game.
    •  Sam, Iris, Shane: I don’t like this character.
    Why players struggling?
    Develop Experience Goals & Visions
    Evaluate and rate each player engagement pillars (Usability, Desirability, Scalability, Feasibility) in the chart. Breakdown each pillars as player stories
    Identify Design & Art Hypothesis
    Applying art hypothesis in each experience goals & Visons.
    Analyze Player Feedback & Plan Desired Player Experience
    Go over the player feedback and analyze: What do they really mean?What really matters to them? What could be the desired path? What can I change in your design/art?
    Stakeholder Communication‍
    Initial Solutions
    Experience Goals (Scope):
    Gather the ideas based on curret player experience analyzation.
    • Gathering ideas based on their priority, and necessity.
    Creating Mitigate Plans
    Coming up with actions in case project encounter any errors or difficulties.
    ‍
    Starting Design‍
    Updating User Flow
    A step to confirm the user flow before conducting a usability test.
    Wireframe Planning
    Created wireframe planning with existing game screens, possibly conducting AB test on original flow, and updated flow to check the player experience enhancements.
    Paper wireframe:
    Defining user pain points and Brainstorming ideas (Solutions).
    Digital wireframe:
    High-Fidelity Mockups:
    ‍    Focuses in helping players to imagining their characters in the battle action more than seeing the detailed character appearance.
    • Adding a pre-tutorial tryout that users can see and feel how character battle/actions would be. It can be as simple as hitting the dummy on the same spot.
    • Changing the character creation/customization flow by showing the character slot (game waiting room/lobby) first.
    • Labeling (1 character exist) on the classes of the character that player already has.
    • Adding avatar modification indicator so players know which part of avatar that they are customizing without having to figure it out themselves.
    Going Forward
    Impact:
    • Players can familiarize themselves with previous Diablo series.
    • Players get shortcut on the 'teleport' function (One of the most used in game play).
    • Players does not require as much eye tracking as before.
    • Players can now control mouse cursor sizes and pick colors based on their accessibility needs.
    • Players get knowledge, maximum numbers of characters per server before they create their first character.
    • Players can perceive themselves in action, and sneak peak the skill shots with experiencing 'hit satisfaction' before they enter the actual game play.
    • Players can now indicate better which part of the avatar customizaton that they are working on.
    Learnings:‍
    In working on the Diablo immortal: Elevating the current player experience, I learned how to plan and align player experience goals, and game visions by analyzing and evaluating the game experience. It also helped creating a document for stakeholder conversations, knowing who to contact and collaborate together.

    Planning UI/UX elements considering cross function platform was challenging, yet extremely rewarding thinking of reach out to larger group of players.

    I also gained insights of creating mitigate plans, how to deal with situations when experience design effects critical towards certain player groups. As we develop a game we will aways encounter difficulties, and as an UI/UX designer, we sometimes should seek for professional reviews to make sure we can minimize the risks that can effect player experiences.
    Next steps:  
    Credits:
    • Gameplay Walkthrough: https://youtu.be/oNTVq_ZSzvw?si=g3w7AKfg-U4wj6ty
    • Images: https://www.nexusmods.com/diabloimmortal
    • UI Style & D4 UI: https://www.wowhead.com/diablo-4/guide/gameplay/health-globe-ui
    • Mouse cursor video: https://www.youtube.com/watch?v=w-BzSoHmVvo
    • Special thanks to the test participants, mentors Ivy and Jacob, as well as my Advanced UX/UI for gaming classmates for their support.
    gracesooyeun.kim@gmail.com
    © reserved by Grace Kim 2022
    Projects - Freelance

    IDAT Website

    UI/UX personal research
    Re-branding, website design

    DEJONG logo

    Brand identity design
    Re-branding, freelance

    FPS + 3D Game Motion sickness

    UI/UX personal research
    Work in progress
    Works done - Personal

    Animal Crossing UI Update

    Game UX/UI Design
    UX/UI, Re-Design, Research

    Bojagi

    Interactive table
    User experience, generative, Illustration

    Gimme More Puddings

    Board game design
    UX, Game design, Illustrations

    Diablo Immortal UI Update

    Game UX/UI Design
    UX/UI, Re-Design, Research

    Gradient

    Brand identity design
    Branding, Strategy, Packaging

    Save the Polar Bears

    Font Design + Iconography
    Typography, Illustration

    Parallel Labs

    Brand identity design
    Branding, web, app

    Anatomy Gothic

    Font Design
    Typography, motion, Illustration

    EYOSIS

    Brand identity design
    Graphic, 3D motion, packaging

    Mystery Portal

    Indie-game preview app
    Work in progress

    Mystery Portal

    Indie-game preview app
    Work in progress
    Updating soon
    Coming soon.

    Day by Day

    Daily tracker application
    UI/UX, user research
    Coming soon.

    Blood Nav

    Blood donation center finder
    UI/UX, user research
    Coming soon.

    Jolly Cat Food

    Package design
    Graphic, packaging, branding
    Coming soon.

    Kombu

    Package design
    Graphic, packaging
    Coming soon.

    Sonoma County Harvest Fair

    Campaign Series
    Editorial, branding
    Coming soon.

    Serene Hotel

    Brand identity design
    Branding