ELDEN RING

UX Game Design Case Study

ELDEN RING

UX Game Design Case Study

OVERVIEW

Case Study of the game, Elden Ring, exploring the UI/UX research and design practices in video games. Project includes player journey, game UI prototyping, and color blind accessibility tests.

TASK

Game UX/UI
Prototype Elden Ring Screens
User Testing​

TASK

Prototype Elden Ring Screens
Game UX/UI (exploration)
User Testing​

TOOLS

Figma
Photoshop
Illustrator
DALL·E

TIMELINE

6 Weeks

OVERVIEW

Case Study of the game, Elden Ring, exploring the UI/UX research and design practices in video games. Project includes player journey, game UI prototyping, and color blind accessibility tests.

OBSTACLES

  • Limited time and resources for player testing

  • Game designer not available for feedback on new iterations.

  • Player research obstacles – finding a balance with asking non-leading questions for non-Elden ring players.

  • Creating new but consistent game UI / assets in limited time

OBSTACLES

  • Limited time and resources for player testing

  • Game designer not available for feedback on new iterations.

  • Player research obstacles – finding a balance with asking non-leading questions for non-Elden ring players.

  • Creating new but consistent game UI / assets in limited time

TOOLS

Figma
Photoshop
Illustrator
DALL·E

TIMELINE

6 Weeks

DESIGN PROCESS

1

Player Journey

2

Paper Prototype

3

Flow Chart

4

Wireframe
& Iterations

5

Usability Test

6

UI
Moodboard

7

UI
Style Guide

8

UI
Mock Ups

9

Accessibility
(Color Blindness)

PLAYER JOURNEY

(Elden Ring gameplay: first 20 minutes)

PAPER PROTOTYPE

(Elden Ring gameplay: first 20 minutes)

FLOW CHART

(Elden Ring gameplay: first 20 minutes)

WIREFRAMES

Objective: Iterate on new Elden Ring UI to create clearer communication while maintaining original game designer intentions.
Initial Sketches
Initial Wireframe - Home Screen
Initial Wireframe - Gameplay Screen
Initial Wireframe - Inventory Screen

USABILITY TEST

Questions: Do pro Elden Ring players appreciate the new design approach? How do non-Elden Ring players feel about iterated screens vs original screen Do the new iterations adhere to the original game designer’s intentions?

4 users of different video game experience were tested (1 Elden Ring Pro Player). Thank you Dorothy, Sarah, Jeremy, and JR.​ 👩🏻‍💼🦸🏽‍♀️👨🏻‍🍳👨🏽‍🏫

ITERATED WIREFRAMES

(Post user-test insights)

Home Screen
(2nd Iteration)

Load Game/New Game Clarification: Ensure that the ‘Load Game’ and ‘New Game’ options are distinctly visible to prevent confusion between the home screen and pause screen (proven in user testing).

Removal of Edit Appearance Option: Align with the game designer’s vision for immersion by removing the ‘Edit Appearance’ option. Players will need to physically visit a specific area in the game to change appearance, enhancing exploration and immersion aspects.

Simplicity in Screen Design: Maintain simplicity in screen designs for higher success rates, as proven by user testing.

New Iteration 1: Keeps the original menu options, has a character preview, and also has game preview with navigational arrows to quickly move between load games

New Iteration 2: A more simpler approach that keeps the original menu but has a character preview.

Home Screen Insights

Load Game/New Game Clarification: Ensure that the ‘Load Game’ and ‘New Game’ options are distinctly visible to prevent confusion between the home screen and pause screen (proven in user testing).

Removal of Edit Appearance Option: Align with the game designer’s vision for immersion by removing the ‘Edit Appearance’ option. Players will need to physically visit a specific area in the game to change appearance, enhancing exploration and immersion aspects.

Simplicity in Screen Design: Maintain simplicity in screen designs for higher success rates, as proven by user testing.

New Iteration 1: Keeps the original menu options, has a character preview, and also has game preview with navigational arrows to quickly move between load games

New Iteration 2: A more simpler approach that keeps the original menu but has a character preview.

Gameplay Screen
(2nd Iteration)
Runes UI Placement: User tests recommend positioning the Runes UI either in the top right for enhanced visibility or retaining the original bottom left placement to minimize UI presence and emphasize world immersion, aligning with game designer intentions.
Inventory Screen
(2nd Iteration)

A hover-over option was added for key terms (option to hover over the complex information of the equipment/inventory screen.

Purpose: To promote easy access for in-game learning of lore and knowledge of the game.

Takeaway: This would add to Elden Ring’s theme of learning about the world without breaking immersion. Otherwise, a player would be forced to look up what a certain attribute means on their phone and scroll through Google or a reddit forum. This feature would maintain Elden Ring style UI to promote the story.

MOOD BOARD

STYLE GUIDE

FINAL UI MOCK UP

Home Screen
Original game
Gameplay Screen
Original game
Inventory Screen
Original game

ACCESSIBILITY COLOR BLINDNESS TEST

ITERATED MOCK UP

(post color blind test)

  • The main changes to the UI included changing the health flask and health bar to a bright yellow. 
  • Preemptively changing to a toon high-contrast poppy UI style played favorably for the color blindness test.
  • Enlarging the home screen menu UI was a good choice for color blind test.

CONCLUSIONS

Overcoming Obstacles
  • No game designer available?: Worked through this challenge by researching the game and realizing game designer intentions: self-learning and story immersion. The wireframes were based of these intentions
  • Player research obstacles?: In handling player feedback, I’ve learned to balance between modifying designs from user feedback, turning data into intelligence based on design knowledge, and adhering to the original game designer’s intentions.
  • New original UI/art in limited time?: Using Illustrator, photoshop, free Figma assets, and DALLE, I find that mock-ups are easier in the current time we live in and it will only get easier.
Takeaways
  • The main improvements I added were for accessibility. The screens were kept simple to adhere to the game designer’s immersion and world-focused intentions.
  • The inventory improvements included an all-in-one menu for the equipment, inventory, and character status screens (instead of them being separated). The other main UX decisions came from user tests.
  • Through participatory design with player tests, we iterated by adding a subtle description pop-up that you can scroll through for all the obscure terms on the inventory screen. This is so players take less time looking up these terms on Reddit or Google. I would like to iterate more on this feature in the future.
  • Overall, Elden Ring is a fantastic game with a particular user experience. Many would argue it’s not the best. However, based on the game designer’s intentions, one could understand the design decisions made.

Making a game is like driving a giant spaceship

- Ivy Sang (Blizzard)

Thank you to:

Ivy Sang (UX/UI Mentor, Blizzard)
Juan Morales Patino (UX Mentor, Bungie)
ELVTR Gaming Oct-Dec 2023 Cohort

Citations and Shout Outs

Original Elden Ring 3D Art and UI
Illustrated Elden character art: Tyler Smith – https://www.artstation.com/artwork/9Nl8PQ
Inventory UI Elements: Denizen Design – https://www.buymeacoffee.com/denizensg
Personal DALL·E explorations
Thanks for scrolling! See more of Sean’s work here