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
Game UX/UI (exploration)
User Testing
TOOLS
Photoshop
Illustrator
DALL·E
TIMELINE
OVERVIEW
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
Photoshop
Illustrator
DALL·E
TIMELINE
DESIGN PROCESS
Player Journey
Paper Prototype
Flow Chart
Wireframe
& Iterations
Usability Test
UI
Moodboard
UI
Style Guide
UI
Mock Ups
Accessibility
(Color Blindness)
PLAYER JOURNEY
PAPER PROTOTYPE
FLOW CHART
WIREFRAMES
USABILITY TEST
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)
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.
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.
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
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
- 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.
- 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
